vue一鍵復制實現 筆記

0 環境

• 系統環境：window
• 編輯器：IDEA,vscode

1 准備

vue-clipboard2參考資料

2 安裝

安裝vue-clipboard2

npm install --save vue-clipboard2

在main.js中引入它

import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard) 

3 實現

效果

復制

參考代碼

   <p>{{message}}</p>
 <button type="button" @click="doCopy(值)">Copy</button>   // 數據處理  dataProcessing (val) {  this.message += ' ' + val  },  doCopy: function (val) {  this.dataProcessing(val)   this.$copyText(this.message).then(function (e) {  alert(e.text)  }, function (e) {  alert('復制失敗',e.text)  })  } 

整改

❝

比如我有2個數組 currentRegData.columns --> ['張三','李四','王思'] currentRegs --> [12,13,13] 我想復制的內容 '張三': 12 換行 '李四': 13 換行 '王思' : 13

❞

<template>
 <div>  <div class="copy">  <button type="button" @click="doCopy(currentRegData.rows)">Copy</button>  </div>  </div> </template>  <script> // 我不需要全局配置 你可以配全局 import { Message } from 'element-ui';  export default {  methods:{  dataProcessing (val) {   var temp = this.currentRegData.columns;   // 數組遍歷  for (let index = 1; index < temp.length; index++) {  var element = temp[index];  // 拼接 換行   element += ": "+ this.currentRegs[index] + '\n';  this.messageCopy += element;  }  },  doCopy: function (val) {  // 處理   this.dataProcessing(val);   // 結果   this.$copyText(this.messageCopy).then(function (e) {  Message.success("內容已復制到剪切板！")  }, function (e) {  Message.error("抱歉，復制失敗！")  })  }  } } </script>  <style>  .copy{  text-align:right;  } </style>