vue---复制功能

在做VUE开发前台用户的时候，对于订单编号，合同编号，增加一个一键复制的功能，往往能够极大的提升用户体验。

第一步：安装 v-clipboard

#使用npm安装：
npm install --save v-clipboard

#使用yarn安装
yarn add v-clipboard

第二步：全局引入 main.js

import Vue from 'vue'
import Clipboard from 'v-clipboard'
Vue.use(Clipboard)

第三步：具体使用

<template>  
    <button v-clipboard="some text">
      copy
    </button>
</template>  

复制动态变量：

<template>  
  <button v-clipboard="() => textToCopy">
    Copy to clipboard
  </button> 
  <p>{{ textToCopy }}</p>  
</template>

常见的应该是这种使用：

<template>  
  <button v-clipboard="foo" v-clipboard:success="clipboardSuccessHandler" v-clipboard:error="clipboardErrorHandler">
    Copy to clipboard
  </button>
</template>
  
<script>  
export default {  
  methods: {
    // 复制
    foo(){
      return '你说的对';
    },
    // 复制成功回调函数
    clipboardSuccessHandler ({ value, event }) {
      console.log('success', value)
    },
    // 复制失败回调函数
    clipboardErrorHandler ({ value, event }) {
      console.log('error', value)
    }
  }
}  
</script>

打完收工！