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

安装插件

npm install --save vue-clipboard2

在 main.js 中挂载插件

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

1
2
3
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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

使用方法二： 自定义事件手动调用

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

#uniapp #h5

上次更新: 2023/09/22, 16:54:32

← 使用plus.io创建文件并写入内容 uniapp使用vue3 setup→