首页 > 移动平台 > 详细

uniapp-H5端使用vue-clipboard2复制内容至剪切板

时间:2021-04-23 00:39:41      阅读:72      评论:0      收藏:0      [点我收藏+]

由于uni.setClipboardData不支持H5,所以使用vue-clipboard2复制文本

技术分享图片

 

 步骤如下:

1.安装插件

npm install --save vue-clipboard2

2.在 main.js 中挂载插件

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

3.使用方法一: 自定义事件手动调用

<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>

4.在元素上直接监听使用

<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>

 





uniapp-H5端使用vue-clipboard2复制内容至剪切板

原文:https://www.cnblogs.com/zhijie1/p/14690381.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!