vue-cli实现复制内容到剪贴板

  • 内容
  • 评论
  • 相关

前言:

这次的需求实现是依赖于第三方插件vue-clipboard2,直接上使用方法吧。

 一,安装插件

npm install vue-clipboard2 --save

 二,全局注入插件在main.js中

import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)

 三,在需要使用的页面内

    <van-button type="info" size="small" v-clipboard:copy="item.file" v-clipboard:success="onCopy"
                  v-clipboard:error="onError">复制链接</van-button>
      // 复制成功时的回调函数
      onCopy(e) {
        Toast.success('内容已复制到剪切板');
      },
      // 复制失败时的回调函数
      onError(e) {
        Toast.fail('抱歉,复制失败!');
      }

本文标签:

版权声明:若无特殊注明,本文皆为《菜鸟站长》原创,转载请保留文章出处。

本文链接:vue-cli实现复制内容到剪贴板 - https://www.wlphp.com/?post=305

发表评论

电子邮件地址不会被公开。 必填项已用*标注