vue自定义指令——v-copy（基于vue-clipboard2）

directives/copy/index.js

import Clipboard from './clipboard'

const install = function (Vue) {
    Vue.directive('Clipboard', Clipboard)
}

if (window.Vue) {
    window.clipboard = Clipboard
    Vue.use(install); // eslint-disable-line
}

Clipboard.install = install
export default Clipboard
/**
 * 指令的使用方法（两种）
 * 第一种：
 * <el-button v-copy:copy="copyText" v-copy:success="onCopy" v-copy:error="onError">复制</el-button>
 *  
 *  onCopy(e) {
            this.$message.success(this.$t("layout.copySuccess"));
        },
    onError(e) {
            this.$message.error(this.$t("layout.copyError"));
        },
 * 第二种：
 *import clip from "@/utils/clipboard"; 
 * <el-button  @click="handleCopy(title, $event)">复制</el-button>
 *    handleCopy(text, event) {
            clip(text, event);
        },
 */

directives/copy/clipboard.js

// 引入Clipboard模块
const Clipboard = require('clipboard');

// 检查是否成功安装了clipboard模块
if (!Clipboard) {
    console.error('未找到Clipboard模块，请确保通过npm正确安装了`clipboard`模块。');
}

export default {
    bind(el, binding) {
        // 检查参数是否为success或error
        if (binding.arg === 'success') {
            // 将成功的回调函数保存到元素属性中
            el._v_clipboard_success = binding.value;
        } else if (binding.arg === 'error') {
            // 将失败的回调函数保存到元素属性中
            el._v_clipboard_error = binding.value;
        } else {
            // 创建Clipboard实例
            const clipboard = new Clipboard(el, {
                text() { return binding.value },
                action() { return binding.arg === 'cut' ? 'cut' : 'copy' }
            });

            // 监听复制成功事件
            clipboard.on('success', e => {
                const callback = el._v_clipboard_success;
                callback && callback(e); // eslint-disable-line
            });

            // 监听复制失败事件
            clipboard.on('error', e => {
                const callback = el._v_clipboard_error;
                callback && callback(e); // eslint-disable-line
            });

            // 保存Clipboard实例到元素属性中
            el._v_clipboard = clipboard;
        }
    },
    update(el, binding) {
        // 如果值和参数都没有变化，可以避免不必要的操作
        if (binding.value === el._v_clipboard.text() && binding.arg === (el._v_clipboard.action() === 'cut' ? 'cut' : 'copy')) {
            return;
        }

        // 更新成功和失败的回调
        if (binding.arg === 'success') {
            el._v_clipboard_success = binding.value;
        } else if (binding.arg === 'error') {
            el._v_clipboard_error = binding.value;
        } else {
            // 更新Clipboard实例的文本和操作类型
            el._v_clipboard.text = function () { return binding.value };
            el._v_clipboard.action = function () { return binding.arg === 'cut' ? 'cut' : 'copy' };
        }
    },
    unbind(el, binding) {
        // 根据参数，删除相应的回调函数或销毁Clipboard实例
        if (binding.arg === 'success') {
            delete el._v_clipboard_success;
        } else if (binding.arg === 'error') {
            delete el._v_clipboard_error;
        } else {
            el._v_clipboard.destroy();
            delete el._v_clipboard;
        }
    }
}

utils/clipboard.js

import Vue from 'vue'
import Clipboard from 'clipboard'

function clipboardSuccess() {
    Vue.prototype.$message({
        message: 'Copy successfully',
        type: 'success',
        duration: 1500
    })
}

function clipboardError() {
    Vue.prototype.$message({
        message: 'Copy failed',
        type: 'error'
    })
}

export default function handleClipboard(text, event) {
    const clipboard = new Clipboard(event.target, {
        text: () => text
    })
    clipboard.on('success', () => {
        clipboardSuccess()
        clipboard.destroy()
    })
    clipboard.on('error', () => {
        clipboardError()
        clipboard.destroy()
    })
    clipboard.onClick(event)
}