clipboard提供复制粘贴功能：指令或者点击方法实现

vue 提供复制粘贴功能：指令或者点击方法实现

安装

 npm install clipboard --save

官方：https://www.npmjs.com/package/clipboard 及说明配置：

var clipboard = new ClipboardJS('.btn');
    clipboard.on('success', function (e) {
      console.info('Action:', e.action);
      console.info('Text:', e.text);
      console.info('Trigger:', e.trigger);
    
      e.clearSelection();
});

clipboard.on('error', function (e) {
  console.error('Action:', e.action);
  console.error('Trigger:', e.trigger);
});

一、指令的方式：v- v-copyText； 自身的属性：data-clipboard-text

// 复制到粘贴板
import Clipboard from "clipboard";
import Vue, {PluginObject, DirectiveOptions } from "vue";
import from "vue";
let copyCipboardHandle = null;
 const copyCipboard = {
            // 默认绑定属性
            bind(el: HTMLElement, binding: any， vnode: any) {
                const { value } = binding
                el.setAttribute("data-clipboard-text", value);
                copyCipboardHandle = new Clipboard(el)
                copyCipboardHandle.on('success', function (e) {
                      console.info('复制成功', 111);
                      e.clearSelection();
                  });
            };
            // 组件变化
            componentUpdated(el: HTMLElement, binding: any, vnode: any) {
                 const { value } = binding;
                 el.setAttribute("data-clipboard-text", value);
            }
 }
       
const directivesConfig: PluginObject<never> = {
    install(Vue) {
        Vue.directive("copyCipboard", copyCipboard);
    }
};

Vue.use(directivesConfig);
// 1 引入到main 入口文件中
// 2 使用
<p v-copyCipboard='复制的能通'>复制</p>
 

二、页面中单独引用使用：

// html:    
 <p ref="textBox"
      style="cursor: pointer; color: blue"
      :data-clipboard-text="formData.name"
      @click="copyDate(formData.name)">复制-{{formData.name}}</p>

// js
import Clipboard from "clipboard";
// 变量 复制构造函数
clipboarInstance = null;
copyDate(name: string) { 
      const _this = this;
            // setTimeout(() => {
            //     this.falg = true;
            // }, 4000);
            // if (!this.falg) return;
            this.clipboarInstance &&
                this.clipboarInstance.on("success", function(e: any) {
                    e.clearSelection();
                    _this.$message.success("复制成功！");
                    _this.clipboarInstance = null;
            });
}

// 通过监听添加复制属性
@Watch("formData.name")
 handleName(val: string) {
            if (val) {
                this.$nextTick(() => {
                    const dome = this.$refs.textBox as any;
                    dome.setAttribute("data-clipboard-text", val);
                    this.clipboarInstance = new Clipboard(dome);
                    console.log("data-clipboard-text", clipboarInstance, 111);
                });
            }
   }

自定义指令更好用