【vue】clipboard实现文本复制

1.下载

npm install clipboard --save
版本："^2.0.4"  

2.引入使用

import Clipboard from "clipboard";

3.使用方法

   <el-button
      id="publicKey"
       type="success"
       :data-clipboard-text="linkUrl"
       @click="copy('publicKey')"
   >
    Copy linkUrl
   </el-button>
---------------------------------------------------------
  data() {
    return {
       linkUrl: 'www.baidu.com'
    },
    methods:{
      copy(type) {
	      if (!this.linkUrl) {
	        this.$message({
	          message: "linkUrl is empty",
	          type: "error",
	        });
	      } else {
	        var clipboard = new Clipboard(`#${type}`);
	        clipboard.on("success", (e) => {
	          // 释放内存
	          clipboard.destroy();
	          this.$message({
	            message: "Copy successful",
	            type: "success",
	          });
	        });
	        clipboard.on("error", (e) => {
	          // 不支持复制
	          this.$message.error("The browser does not support quick copy");
	          // 释放内存
	          clipboard.destroy();
	        });
	      }
	    }
     }