magiccube-vue3/package/directives/copy/index.js

vue3-js版组件库

import { toast } from '../../components/message'
export default {
    name: 'copy',
    directive: {
        // 绑定元素的父组件被挂载时调用
        mounted(el, { value }) {
            el.$value = value
            el.handler = () => {
                //NO1 值为空时提示
                if (!el.$value) {
                    toast('复制内容为空')
                    return false
                }
                // NO2 利用textarea标签实现copy
                /**
                 * 创建一个textarea，然后将textarea设为readonly，防止ios下自动换气键盘，
                 * 最后将textarea移出可视区
                */
                const textarea = document.createElement('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)
                /**
                 * 实现选中并复制
                 * 利用select选中，
                 * 利用execCommand命令copy选中的内容到剪贴板中
                */
                textarea.select()
                textarea.setSelectionRange(0, textarea.value.length)
                const result = document.execCommand('Copy')
                if (result) {
                    toast(`${el.$value}复制成功`)
                }
                /**
                 * 移出textarea
                */
                document.body.removeChild(textarea)
            }
            el.addEventListener('click', el.handler)
        },
        // 当传进来的值更新的时候触发
        updated(el, { value }) {
            el.$value = value
        },
        // 指令与元素解绑的时候，移除事件绑定
        unmounted(el) {
            el.removeEventListener('click', el.handler)
        }
    }
}