Vue 自定义指令合集 （文本内容复制指令 v-copy）

我们常常在引入全局功能时，主要都是写于 js 文件、组件中。不同于他们在使用时每次需要引用或注册，在使用上指令更加简洁。

今天主要实现的是一个复制文本指令v-copy,其中主要的参数有两个icon和dblclick

代码如下：

    bind(el, binding) {
        if (binding.modifiers.dblclick) {
            el.addEventListener("dblclick", () => handleClick(el.innerText));
            el.style.cursor = "copy";
        } else if (binding.modifiers.icon) {
            el.addEventListener("mouseover", () => {
                if (el.hasicon) return;
                const icon = document.createElement("em");
                icon.setAttribute("class", "demo");
                icon.setAttribute("style", "{margin-left:5px,color:red}");
                icon.innerText = "复制";
                el.appendChild(icon);
                el.hasicon = true;
                icon.addEventListener("click", () => handleClick(el.innerText));
                icon.style.cursor = "pointer";
            });
            el.addEventListener("mouseleave", () => {
                let em = el.querySelector("em");
                el.hasicon = false;
                el.removeChild(em);
            });
        } else {
            el.addEventListener("click", () => handleClick(el.innerText));
            el.style.cursor = "copy";
        }

        function handleClick(content) {
            if (Window.clipboardData) {
                window.Clipboard.setData("text", content);
                return;
            } else {
                (function(content) {
                    document.oncopy = function(e) {
                        e.clipboardData.setData("text", content);
                        e.preventDefault();
                        document.oncopy = null;
                    };
                })(content);
                document.execCommand("Copy");
            }
        }
    },
};