这篇文章给大家介绍怎么进行Vue自定义复制指令v-copy功能的实现,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
使用自定义指令创建一个点击复制文本功能
1. 创建v-copy.js文件
import Vue from "vue"; // 注册一个全局自定义复制指令 `v-copy` Vue.directive("copy", { bind(el, { value }) { el.$value = value; el.handler = () => { el.style.position = 'relative'; if (!el.$value) { // 值为空的时候,给出提示 alert('无复制内容'); return } // 动态创建 textarea 标签 const textarea = document.createElement('textarea'); // 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘,同时将 textarea 移出可视区域 textarea.readOnly = 'readonly'; textarea.style.position = 'absolute'; textarea.style.top = '0px'; textarea.style.left = '-9999px'; textarea.style.zIndex = '-9999'; // 将要 copy 的值赋给 textarea 标签的 value 属性 textarea.value = el.$value // 将 textarea 插入到 el 中 el.appendChild(textarea); // 兼容IOS 没有 select() 方法 if (textarea.createTextRange) { textarea.select(); // 选中值并复制 } else { textarea.setSelectionRange(0, el.$value.length); textarea.focus(); } const result = document.execCommand('Copy'); if (result) alert('复制成功'); el.removeChild(textarea); } el.addEventListener('click', el.handler); // 绑定点击事件 }, // 当传进来的值更新的时候触发 componentUpdated(el, { value }) { el.$value = value; }, // 指令与元素解绑的时候,移除事件绑定 unbind(el) { el.removeEventListener('click', el.handler); }, });
2. 引入v-copy
// main.js 根据文件的相关路径引入v-copy.js文件 import "xx/v-copy.js"; // v-copy 指令
3. 在标签使用v-copy
<span v-copy="复制内容">复制</span>
我们常常在引入全局功能时,主要都是写于 js 文件、组件中。不同于他们在使用时每次需要引用或注册,在使用上指令更加简洁。
今天主要实现的是一个复制文本指令*v-copy
*,其中主要的参数有两个icon
和dblclick
参数 | 说明 |
---|---|
dblclick | 双击复制 |
icon | 添加icon复制按钮,单击按钮实现复制 |
代码如下:
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"); } } },
关于怎么进行Vue自定义复制指令v-copy功能的实现就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。