当前位置:首页 > VUE > 正文内容

Vue使用vue-clipboard2复制内容到剪贴板

陈杰4周前 (11-05)VUE114

在项目中,经常使用的把文字内容复制到剪贴板的功能。


uni-app的复制到剪贴板的功能不支持H5。网上有npm加载vue-clipboard2的教程,但是我们用传统的cdn加载js的方式网上很少有这方面的教程。


今天我们就从两个角度来使用一下复制内容到剪贴板。


第一种,npm加载的方式,适合于类似uniapp vue-cli这类的项目


首先安装插件

npm install --save vue-clipboard2

image.png

然后再main.js中注册该插件

import Vue from 'vue'import VueClipboard from 'vue-clipboard2'

Vue.use(VueClipboard)


然后两个使用方法


template>
  <div>
    <button class="btn"
      v-clipboard:copy="'复制的内容'"
      v-clipboard:success="onSuccess" 
      v-clipboard:error="onError">复制内容</button>
  </div></template><script>
  export default {
    ...
    methods: {
      onSuccess: function (res) {
        console.log('复制成功')
      },
      onError: function (err) {
        console.log('复制失败')
      }
    }
  }</script>

方法2

template>
  <div>
    <button class="btn"
        @click="onClick">复制内容</button>
  </div></template><script>
  export default {
    ...
    methods: {
      onClick(){
        this.$copyText('复制的文本').then(
          res => {
            console.log('复制成功')
          },
          err => {
            console.log('复制失败')
          }
        );
      }
    }
  }</script>


第二种方式是使用CDN传统加载的方式


首先引入cdn

<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js"></script>

然后再created中添加一个监听事件

created() {

    let clipboard = new ClipboardJS(".copy");
    clipboard.on("success", function (e) {
        // alert("复制成功");
        vant.Toast.success('复制成功')

        e.clearSelection();
    })
},

然后使用

<button style="margin: 10px" class="copy" id="copy" data-clipboard-text="复制的内容">
    复制到剪贴板
</button>


扫描二维码至手机访问

扫描二维码推送至手机访问。

版权声明:本文由何烦过虎溪发布,如需转载请注明出处。

转载请注明出处:http://95shouyou.com/?id=48

分享给朋友:
返回列表

上一篇:npm install出现的@babel/core错误

没有最新的文章了...

相关文章

vue用cavans图片压缩并上传

      //vue压缩图片上传       yasuo() ...

javascript判断当前用户环境是pc端还是手机端

有一个项目因为是用的uniapp开发,因为项目比较早,之前uniapp的电脑端展示不是太友好,所以在电脑端用了一个iframe来包裹网站。现在这个项目需要二次开发,目的是摄像头转直播功能,项目完成了后...

npm install出现的@babel/core错误

报错信息npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to reso...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。