vue复制信息到剪切板

最新推荐文章于 2024-09-21 11:29:05 发布

anne0000

最新推荐文章于 2024-09-21 11:29:05 发布

阅读量61

点赞数

文章标签： vue javascript

本文链接：https://blog.csdn.net/anne0000/article/details/119782251

版权

1、安装vue-clipboard2

npm  install vue-clipboard2  --save

2、main.js 引用

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

3、页面中使用
3.1方式一

<span class="copy-btn" v-clipboard:copy="f" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</span>
// 复制成功时的回调函数
onCopy (e) {
 this.$message.success("内容已复制到剪切板！")
},
// 复制失败时的回调函数
onError (e) {
 this.$message.error("抱歉，复制失败！")
}

3.2方式二

<button type="button" @click="doCopy('add me!')">Copy!</button>

dataProcessing (val) {
        this.message = this.message + ' ' + val
      },
      doCopy: function (val) {
        this.dataProcessing(val)
        this.$copyText(this.message).then(function (e) {
          alert('Copied')
          console.log(e)
        }, function (e) {
          alert('Can not copy')
          console.log(e)
        })
      }