适用于vue3的复制指令

一、前言

明说吧，我完全复制的v-clipboard，自己想太麻烦了。原版的不支持vue3，我就改造了一下，仅此而已。

二、代码

function SpellCheckMain(app, options) {
    // let checkerId = 0;      // 定义初始数字，在创建新标签的时候用
    const cssText = 'position:fixed;pointer-events:none;z-index:-9999;opacity:0;'
    let result = true
    let errortext = "浏览器不支持，复制失败"
    let neirong = ""
    // 主要处理过程
    function chuli(value) {
        // 初始化各种状态
        result = true
        errortext = "浏览器不支持，复制失败"
        let thisdata
        if(typeof value!=="string"){
            try{
                thisdata = JSON.stringify(value)
            }catch(e){
                errortext = "数据类型无法转化复制"
                result = false
                return
            }
        }else{
            thisdata = value
        }
        // 将数据暂存
        neirong = thisdata
        // 创建一个input 元素
        // createElement() 方法通过指定名称创建一个元素，给这个元素添加样式
        const textarea = document.createElement('textarea')
        textarea.value = thisdata  // 将内容赋值给文本域
        textarea.setAttribute('readonly', '')
        textarea.style.cssText = cssText
        // appendChild() 方法向节点添加最后一个子节点。
        document.body.appendChild(textarea);
        // 选中input元素中的文本
        // select() 方法用于选择该元素中的文本。复制一个完整的判断。
        if (navigator.userAgent.match(/ipad|ipod|iphone/i)) {
            textarea.contentEditable = true
            textarea.readOnly = true

            const range = document.createRange()

            range.selectNodeContents(textarea)

            const selection = window.getSelection()

            selection.removeAllRanges()
            selection.addRange(range)
            textarea.setSelectionRange(0, 999999)
        } else {
            textarea.select()
        }

        // 执行浏览器复制命令
        //  execCommand方法是执行一个对当前文档，当前选择或者给出范围的命令
        try {
            const thisvalue = document.execCommand('Copy')
            // 清空输入框
            textarea.remove();
            result = true
        } catch (err) {
            result = false
        }

    }
    function fenfa(el,binding){
        const {arg, value} = binding
        switch (arg) {
            case "success":
                if(result){
                    if(value){
                        value(neirong,el)
                    }else{
                        console.log("复制成功")
                    }
                }
                neirong = ""      // 将数据置空
                break
            case "error":
                if(!result){
                    if(value){
                        value(errortext,el)
                    }else{
                        console.log(errortext)
                    }
                }
                neirong = ""    // 将数据置空
                break
            default:
                chuli(value)
        }
    }
    app.directive('clipboard', {
        mounted: function (el, binding, vnode, oldVnode) {
            el.addEventListener("click", () => {fenfa(el,binding)})
        },
        unmounted: function (el, binding, vnode, oldVnode) {
            el.addEventListener("click", () => {fenfa(el,binding)})
        }
    })
}

export default {
    install: SpellCheckMain
}

三、使用

<n-button size="mini" class="mx-2" type="primary" v-clipboard="item" v-clipboard:success="chenggong" v-clipboard:error="shibai">复制</n-button>
 v-clipboard="item"绑定需要复制的内容
 v-clipboard:success复制成功的回调
 v-clipboard:error复制失败的回调
回调函数我放了两个参数，一个是内容，一个是event。

四、展示

没有图