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>