Vue 复制到剪切板

2022-07-26 09:02:59 阅读：149 来源： 互联网

标签：复制到 function vue alert Vue clipboard2 剪切板 message

第一种：VUE响应函数方式

复制动作使用的是VUE响应函数方式，这就为复制前控制数据提供了可能。

// 复制之前可以进行数据处理，点击事件
share(val) {
  //数据处理
  this.message = this.message + ' ' + val
  this.$copyText(this.message).then(function (e) {
    alert('Copied')
  }, function (e) {
    alert('Can not copy')
  })
},

第二种：插件 vue-clipboard2

1、安装vue-clipboard2插件

npm install --save vue-clipboard2

2、main.js 引入

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

Vue.use(VueClipboard)

3、使用例子

<template id="t">
  <div class="container">
  <input type="text" v-model="message">
  <button type="button" @click="doCopy">Copy!</button>
  </div>
</template>

<script>
  data() {
    return {
      message: 'Copy These Text'
    }
  },
  methods: {
    doCopy() {
      this.$copyText(this.message).then(function (e) {
        alert('Copied')
        console.log(e)
      }, function (e) {
        alert('Can not copy')
      })
    }
  }
</script>

传送门：https://www.npmjs.com/package/vue-clipboard2
传送门：https://juejin.cn/post/6967164792993742885

标签：复制到,function,vue,alert,Vue,clipboard2,剪切板,message
来源： https://www.cnblogs.com/DL-CODER/p/16519561.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue 复制到剪切板