自定义指令 copy

Apple-hcc

于 2024-03-14 16:45:08 发布

阅读量412

点赞数 7

文章标签： javascript 前端 vue

本文链接：https://blog.youkuaiyun.com/weixin_42169395/article/details/136715419

版权

这篇文章介绍了如何在AntDesignVue中创建一个自定义指令，实现在点击时将指定元素的值复制到剪贴板。使用了`Message`警告和成功提示，以及`document.execCommand(Copy)`执行复制操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import { Message } from 'ant-design-vue';
export default { //
    /*
    bind
    el: dom
    value: copy
    */
    bind(el, { value }) {
        el.$value = value; //
        el.handler = () => {
            if (!el.$value) {
                // ant-design-vue
                Message.warning(' ');
                return;
            }
            // textarea
            const textarea = document.createElement('textarea');
            // textarea readonly iOS textarea
            textarea.readOnly = 'readonly';
            textarea.style.position = 'absolute';
            textarea.style.left = '-9999px';
            // copy textarea value
            textarea.value = el.$value;
            // textarea body
            document.body.appendChild(textarea);
            //
            textarea.select();
            // textarea.setSelectionRange(0, textarea.value.length);
            const result = document.execCommand('Copy');
            if (result) {
                Message.success(' ');
            }
            document.body.removeChild(textarea);
        };
        // copy
        el.addEventListener('click', el.handler);
    },
    //
    componentUpdated(el, { value }) {
        el.$value = value;
    },
    // 指令与元素解绑的时候，移除事件绑定
    unbind(el) {
        el.removeEventListener('click', el.handler);
    },
};