指令

vue 指令 官方文档 (opens new window)，在阅读本文档前，请对该方法的使用有一定了解。

介绍

该指令实现点击复制文字效果，关于 clipboard 更多用法，请查看官网文档 (opens new window)

目录结构

└─ src
   └─ directive
      └─ Clipboard              # 复制
         ├─ index.js            # 注册指令
         └─ Clipboard.js        # 定义指令

安装

npm install clipboard --save

源码分析

指令实现

import Clipboard from "clipboard";      // 引入 copy 插件
import { Message } from 'element-ui';   // 引入提示组件

export default {
    bind(el, binding = {}, vnode) {
        
        // 设置鼠标 hover 显示 cpoy 样式
        el.style.cursor = 'copy';

        // 实例化 copy 插件
        const clipboard = new Clipboard(el, {
            text: () => binding.value;
        })

        // 复制成功提示
        clipboard.on('success', e => {
            Message.success("已复制到剪切板");
        })

        // 复制失败提示
        clipboard.on('error', e => {
            Message.success("复制失败");
        })
    },

    // 
    update(el, binding) {
        el.__clipboard__.text = () => binding.value
    },

    // 卸载绑定
    unbind(el, binding) {
        el.__clipboard__.destroy();
        delete el.__clipboard__;
    }
}

index.js

引入 Clipboard 并导出安装 vue 方法，指令名称为 copy

import Clipboard from './Clipboard.js'

export default {
  install (Vue) {
    Vue.directive('copy', Clipboard)
  }
}

引入到 main.js

import Clipboard from "./directive/Clipboard/index.js";
Vue.use(Clipboard)

使用

<div v-copy="'copy message'">Copy Message</div>