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