vue一鍵複製實現
阿新 • • 發佈:2021-11-19
安裝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>