vue,自定义复制指令。
在项目里面经常有着一些复制数据的需求,对次封装了一个copy指令。
代码如下:
export default { bind(el, { value }) { el.$value = value; el.handleClick = () => { if (!el.$value) { return console.log('暂无数据'); } let input = document.createElement('input'); input.cssText = 'position:absolute;z-index:-99999'; input.readOnly = 'readOnly'; document.body.appendChild(input); input.select(); let result = document.execCommand('copy'); if (result) { console.log('复制成功'); document.body.removeChild(input); //复制成功后删除标签,避免多次点击复制创建无用标签。 } }; el.addEventListener('click', handleClick); //监听按钮点击事件 }, componentUpdated(el, { value }) { el.$value = value; }, unbind(el) { el.removeEventListener('click'); }, };