1. 程式人生 > 其它 >vue一鍵複製實現

vue一鍵複製實現

安裝vue-clipboard2

npm install --save vue-clipboard2

在main.js中引入它

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

參考程式碼

   <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) }) }

整改

<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>