您好,登錄后才能下訂單哦!
這篇文章給大家介紹怎么進(jìn)行Vue自定義復(fù)制指令v-copy功能的實(shí)現(xiàn),內(nèi)容非常詳細(xì),感興趣的小伙伴們可以參考借鑒,希望對(duì)大家能有所幫助。
使用自定義指令創(chuàng)建一個(gè)點(diǎn)擊復(fù)制文本功能
1. 創(chuàng)建v-copy.js文件
import Vue from "vue"; // 注冊(cè)一個(gè)全局自定義復(fù)制指令 `v-copy` Vue.directive("copy", { bind(el, { value }) { el.$value = value; el.handler = () => { el.style.position = 'relative'; if (!el.$value) { // 值為空的時(shí)候,給出提示 alert('無(wú)復(fù)制內(nèi)容'); return } // 動(dòng)態(tài)創(chuàng)建 textarea 標(biāo)簽 const textarea = document.createElement('textarea'); // 將該 textarea 設(shè)為 readonly 防止 iOS 下自動(dòng)喚起鍵盤(pán),同時(shí)將 textarea 移出可視區(qū)域 textarea.readOnly = 'readonly'; textarea.style.position = 'absolute'; textarea.style.top = '0px'; textarea.style.left = '-9999px'; textarea.style.zIndex = '-9999'; // 將要 copy 的值賦給 textarea 標(biāo)簽的 value 屬性 textarea.value = el.$value // 將 textarea 插入到 el 中 el.appendChild(textarea); // 兼容IOS 沒(méi)有 select() 方法 if (textarea.createTextRange) { textarea.select(); // 選中值并復(fù)制 } else { textarea.setSelectionRange(0, el.$value.length); textarea.focus(); } const result = document.execCommand('Copy'); if (result) alert('復(fù)制成功'); el.removeChild(textarea); } el.addEventListener('click', el.handler); // 綁定點(diǎn)擊事件 }, // 當(dāng)傳進(jìn)來(lái)的值更新的時(shí)候觸發(fā) componentUpdated(el, { value }) { el.$value = value; }, // 指令與元素解綁的時(shí)候,移除事件綁定 unbind(el) { el.removeEventListener('click', el.handler); }, });
2. 引入v-copy
// main.js 根據(jù)文件的相關(guān)路徑引入v-copy.js文件 import "xx/v-copy.js"; // v-copy 指令
3. 在標(biāo)簽使用v-copy
<span v-copy="復(fù)制內(nèi)容">復(fù)制</span>
我們常常在引入全局功能時(shí),主要都是寫(xiě)于 js 文件、組件中。不同于他們?cè)谑褂脮r(shí)每次需要引用或注冊(cè),在使用上指令更加簡(jiǎn)潔。
今天主要實(shí)現(xiàn)的是一個(gè)復(fù)制文本指令*v-copy
*,其中主要的參數(shù)有兩個(gè)icon
和dblclick
參數(shù) | 說(shuō)明 |
---|---|
dblclick | 雙擊復(fù)制 |
icon | 添加icon復(fù)制按鈕,單擊按鈕實(shí)現(xiàn)復(fù)制 |
代碼如下:
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 = "復(fù)制"; 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"); } } },
關(guān)于怎么進(jìn)行Vue自定義復(fù)制指令v-copy功能的實(shí)現(xiàn)就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。