vue -- v-clipboard复制到剪切板的插件 应用示例

本例针对的是移动端复制单个字符串应用。

首先在项目安装依赖：

npm install --save   v-clipboard

其次在main.js引入如下：

import Clipboard from 'v-clipboard';
Vue.use(Clipboard)；

在页面直接应用如下：

  <button class="capyBtn"
         v-clipboard="() =>infoData.cardNumInfo"
         v-clipboard:success="clipboardSuccessHandler" 
         v-clipboard:error="clipboardErrorHandler">
             复制卡号卡密
</button>

复制成功和失败事件处理如下：

 // 复制成功
        clipboardSuccessHandler ({ value, event }){
            let toast;
            if(value == this.infoData.cardNumInfo){
                toast = '卡号卡密已复制到剪切板'
            }
            Toast({
                message: toast,
                duration: 1500
            });
        },
        // 复制失败
        clipboardErrorHandler ({ value, event }) {
            Toast({
                message: '复制失败，请重试',
                duration: 1500
            });
        },

以上就可以了。