一鍵 Copy的功能

import { Message } from 'ant-design-vue'; const vCopy = { // /* 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); }, }; export default vCopy;