博客

npm一键复制

    npm install clipboard --save

main.js中引入一键复制

    import clipboard from 'clipboard';

//把一键复制注册到vue原型上

    Vue.prototype.clipboard = clipboard;

例：

    <div class="passWord account">

                <span>账号：</span>

                <span >{{account}}</span>

                <!-- 使用clipboard 进行一键复制，data-clipboard-action="copy" 设置属性为copy 不设置默认为copy -->

                <!-- :data-clipboard-text="account" 设置要复制的变量  -->

                <!-- @click="copy" 点击调用复制函数 :disabled="disabled" 设置禁用属性 复制按钮应为button按钮  -->
				
                <button class="cobyOrderSn" data-clipboard-action="copy" :data-clipboard-text="saccount" @click="copy()" :disabled="disabled">复制</button>

     </div>

            // 一键复制函数

        copy(flag) {

            // 改变this的使用方式为_this

            const _this = this

            // 新建一个复制实例

            var clipboard = new this.clipboard('.cobyOrderSn')

            // 复制成功后 执行回调函数

            clipboard.on('success', function (val) {

                // 判断复制的值与实际的值是否一致，一致认定成功，不一致认定失败

                if(val.text == _this.account) {

                    console.log('复制成功');

                }else {

                   console.log('复制失败');

                }

                // val.text 为复制的值

                // console.log(val.text,_this.account)

                // 设置按钮的禁用属性为true

                _this.disabled = true;

                // 定义一个定时器 时间为3秒

                setTimeout(() => {

                    // 设置按钮的禁用属性为false

                    _this.disabled = false

                    // 销毁实例防止多次触发

                    clipboard.destroy()

                }, 3000)

            })

        },
        ```