vue复制相关内容至剪切板的2种方法

复制内容至剪切版我们使用的是插件vue-clipboard2，

npm install --save vue-clipboard2

在main.js引用进来就好了

//复制到粘贴板插件
import VueClipboard from 'vue-clipboard2';
Vue.use(VueClipboard);

第一种方法就是粘贴已有的内容

<el-button type="primary" size="small"
   v-clipboard:copy="scope.row.payLink"
   v-clipboard:success="onCopy"
   v-clipboard:error="onError">
   复制
</el-button>

methods:{
    onCopy() {
      this.$message({
        message: '复制成功',
        type: 'success'
      });
    },
    onError() {
      this.$message.error('复制失败');
    },
}

这种方法是直接复制内容，暂时没有想到处理数据后再复制的办法。

 

第二种方式，复制动作使用的是VUE响应函数方式，这样就可以对数据处理后再进行复制

    <el-table-column v-else :label="$t('common_operation')" width="100">
        <template slot-scope="scope">
           <el-button
            size="small"
            class="search-button"
            type="primary"
            :disabled="!template.mobile || !template.appId"
            @click="clickCopy(scope.row.content)"
          >复制</el-button>
        </template>
      </el-table-column>

methods: {
　　doCopy: function (val) {
      let _this= this;
      this.$copyText(val).then(function (e) {
        _this.$message({
          message: '复制成功,
          type: 'success'
        });
      }, function (e) {
        _this.$message.error('复制失败'));
      })
    },

　　clickCopy(con) {
　　　　con = con.replace(/\${applyAmount}/g,res.applyAmount?res.applyAmount:'')
            .replace(/\${dueDate}/g,res.dueDate?res.dueDate:'')
            .replace(/\${firstName}/g,res.firstName?res.firstName:'')
            .replace(/\${link}/g,res.link?res.link:'')
            .replace(/\${paidAmount}/g,res.paidAmount?res.paidAmount:'')
            .replace(/\${penaltyAmount}/g,res.penaltyAmount?res.penaltyAmount:'')
            .replace(/\${penaltyAmountPerDay}/g,res.penaltyAmountPerDay?res.penaltyAmountPerDay:'')
            .replace(/\${penaltyDay}/g,res.penaltyDay?res.penaltyDay:'')
            .replace(/\${repaymentAmount}/g,res.repaymentAmount?res.repaymentAmount:'')
            .replace(/\${username}/g,res.username?res.username:'');
       console.log('替换模板',con);
       this.doCopy(con);
　　},
}

第二种方法，我这里就是把得到的数据处理后，然后再进行复制，得到相关内容。处理数据，根据自己的需求进行处理。

 

参考地址： https://www.npmjs.com/package/vue-clipboard2