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>