13.Vue+Element UI实现复制内容

1.安装依赖包:

  npm install vue-clipboard2 --save

2. main.js中引入

  import Vue from 'vue'

  import VueClipboard from 'vue-clipboard2'

  Vue.use( VueClipboard )

3.页面中使用:

  <el-input v-model="address" :title="address"></el-input> (:title的变量address需要在data中声明一个)

  <a v-clipboard:copy="address" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</a> (此处的:copy对应的数据跟要复制内容的变量是一致的)

4.Methods下的两个方法:

  onCopy(e){    // 复制成功

    this.$message({

      message:'复制成功!',

      type:'success'

    })

  },

  onError(e){   // 复制失败

    this.$message({

      message:'复制失败!',

      type:'error'

    })

  },