vue 中复制到剪贴板功能 v-clipboard 强烈要求弄成一个组件通过props传值

1.安装依赖
npm install --save v-clipboard
 
2.在main.js中引入
import Vue from 'vue'
import Clipboard from 'v-clipboard'
 
Vue.use(Clipboard)
 
3.使用(弄成组件就可以动态传值了,比如输入框的值变了你马上去点,就是复制的最新的值)
<template>
    <button 
    	v-clipboard:copy="content"
        v-clipboard:error="clipboardErrorHandler" //失败
        v-clipboard:success="onCopy" //复制成功的事件  
        >  
        Copy to clipboard
   </button> 
</template>
 
 
export default {
 props: {
    content: {
      type: String,
      default: ''
    }
  },
   data() {
      return {
      }
   },
   methods: {
      // Success event handler 
      onCopy(){
         this.$message.success("已复制");
      },
      clipboardErrorHandler(){
       this.$message.success("失败了");
      }
    }
}