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>