vue复制指定字符串

一、使用插件

1.首先，要先安装剪切板

npm install --save vue-clipboard2

2.在vue项目中的main.js文件中对剪切板进行全局注册，代码如下，可直接复制粘贴

import VueClipboard from 'vue-clipboard2'
VueClipboard.config.autoSetContainer = true
Vue.use(VueClipboard)

1. 
    

3.具体实现(本人亲测有效)

        

<template>
<div
  class="copy"
  v-clipboard:copy="link"  //link在data中定义的  可以绑定输入框，文本框
  v-clipboard:success="onCopy" //复制成功的回调
  v-clipboard:error="onError"  //复制失败的回调
>
点击复制
</div>
</template>

export default {
  data() {
    return {
        link:""
    }
  },
  methods: {
  //复制
    onCopy() {
      this.$message({
        message: "复制成功！",
        type: "success"
      });
    },
    onError() {
      this.$message.error("复制失败！");
    },
  }

}

二、element-ui +vue 实现复制

<div slot="footer" class="dialog-footer">
<el-button @click="show=false"  size="mini">关 闭</el-button>
<el-button @click="handleSubmit()" size="mini" type="primary">复制</el-button>
</div>
handleSubmit() {
let name = this.processModelInfo.name;  //每一行的某个值
let key = this.processModelInfo.key;
var copyContent = document.createElement('input');     //创建一个隐藏input（重要！）
copyContent.value = name + "," + key;    //拼接多个赋值
document.body.appendChild(copyContent);
copyContent.select(); // 选择对象
document.execCommand("Copy"); // 执行浏览器复制命令
this.$message.success("复制成功！");
copyContent.remove();
}