VUE 实现复制内容到剪贴板的两种方法


Posted in Javascript onApril 24, 2019

VUE 复制内容至剪切板(两种使用方法)

复制内容至剪切板使用的是插件'vue-clipboard2',通过官方文档会发现共有两种使用方式。

第一种方式与大多数文章类似,只粘贴代码:

<template>
 <div class="container">
  <input type="text" v-model="message">
  <button type="button"
      v-clipboard:copy="message"
      v-clipboard:success="onCopy"
      v-clipboard:error="onError">Copy!</button>
 </div>
</template>
<script>
 export default {
  data() {
   return {
    message: 'Copy These Text',
   }
  },
  methods: {
   onCopy: function (e) {
    alert('You just copied: ' + e.text)
   },
   onError: function (e) {
    console.log(e)
    alert('Failed to copy texts')
   }
  }
 }
</script>

这种使用方式直接将变量内容复制至剪切板,暂时没有找到处理数据后再复制的方式,这时就需要使用第二种方式。

第二种方式:

<template>
 <div class="container">
  <input type="text" v-model="message">
  <button type="button" @click="doCopy('add me!')">Copy!</button>
 </div>
</template>
<script>
 export default {
  data() {
   return {
    message: 'Copy These Text'
   }
  },
  methods: {
   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)
    })
   }
  }
 }
</script>

通过这段示例代码能看到,复制动作使用的是VUE响应函数方式,这就为复制前控制数据提供了可能!

下面在看下vue实现复制内容到剪贴板功能,具体内容如下所示:

注: 依赖第三方插件 clipboard

一、安装插件

npm install vue-clipboard2 --save

二、全局注入(main.js)

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

三、使用

<ul class="file-list">
 <li v-for="(f, index) of files" :key="index">
 <span>[文件{{index + 1}}] {{f}}</span>
 <span class="copy-btn" v-clipboard:copy="f" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</span>
 </li>
</ul>
// 复制成功时的回调函数
onCopy (e) {
 this.$message.success("内容已复制到剪切板!")
},
// 复制失败时的回调函数
onError (e) {
 this.$message.error("抱歉,复制失败!")
}

四、效果图

VUE 实现复制内容到剪贴板的两种方法

总结

以上所述是小编给大家介绍的VUE 实现复制内容到剪贴板功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
用js实现计算代码行数的简单方法附代码
Aug 13 Javascript
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
Apr 12 Javascript
JavaScript实现维吉尼亚(Vigenere)密码算法实例
Nov 22 Javascript
js实现点击左右按钮轮播图片效果实例
Jan 29 Javascript
javascript字符串函数汇总
Dec 06 Javascript
form表单转Json提交的方法(推荐)
Sep 23 Javascript
详解Node.js中exports和module.exports的区别
Apr 19 Javascript
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
将Sublime Text 3 添加到右键中的简单方法
Dec 12 Javascript
JS+HTML5 canvas绘制验证码示例
Dec 05 Javascript
JS实现在线ps功能详解
Jul 31 Javascript
JavaScript如何判断对象有某属性
Jul 03 Javascript
详解一个小实例理解js原型和继承
Apr 24 #Javascript
微信小程序实现的一键复制功能示例
Apr 24 #Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
Apr 24 #Javascript
解决vue 单文件组件中样式加载问题
Apr 24 #Javascript
vue router 用户登陆功能的实例代码
Apr 24 #Javascript
10个最受欢迎的 JavaScript框架(推荐)
Apr 24 #Javascript
vue.js多页面开发环境搭建过程
Apr 24 #Javascript
You might like
用session做客户验证时的注意事项
2006/10/09 PHP
php UBB 解析实现代码
2011/11/27 PHP
PHPMailer使用教程(PHPMailer发送邮件实例分析)
2012/12/06 PHP
调整PHP的性能
2013/10/30 PHP
phpstudy的php版本自由修改的方法
2017/10/18 PHP
Laravel5.1框架注册中间件的三种场景详解
2019/07/09 PHP
PHP 代码简洁之道(小结)
2019/10/16 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
Mootools 1.2教程(2) DOM选择器
2009/09/14 Javascript
js实现鼠标悬浮给图片加边框的方法
2015/01/30 Javascript
director.js实现前端路由使用实例
2015/02/03 Javascript
JS打字效果的动态菜单代码分享
2015/08/21 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
2015/12/28 Javascript
js轮播图无缝滚动效果
2017/06/17 Javascript
基于jQuery对象和DOM对象和字符串之间的转化实例
2017/08/08 jQuery
JavaScript面向对象精要(上部)
2017/09/12 Javascript
详解angular分页插件tm.pagination二次触发问题解决方案
2018/07/20 Javascript
在create-react-app中使用css modules的示例代码
2018/07/31 Javascript
Vue中插入HTML代码的方法
2018/09/21 Javascript
node.js中stream流中可读流和可写流的实现与使用方法实例分析
2020/02/13 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
2020/02/21 Javascript
开发Node CLI构建微信小程序脚手架的示例
2020/03/27 Javascript
Python multiprocessing.Manager介绍和实例(进程间共享数据)
2014/11/21 Python
Python用于学习重要算法的模块pygorithm实例浅析
2018/08/16 Python
python抖音表白程序源代码
2019/04/07 Python
Python 函数用法简单示例【定义、参数、返回值、函数嵌套】
2019/09/20 Python
Python matplotlib绘制图形实例(包括点,曲线,注释和箭头)
2020/04/17 Python
解决Jupyter Notebook使用parser.parse_args出现错误问题
2020/04/20 Python
京东奢侈品:全球奢侈品牌
2018/03/17 全球购物
商务邀请函范文
2014/01/14 职场文书
电子专业毕业生自我鉴定
2014/01/22 职场文书
名人演讲稿范文
2014/09/16 职场文书
新党章的学习心得体会
2014/11/07 职场文书
荆州古城导游词
2015/02/06 职场文书
2016高考冲刺决心书
2015/09/23 职场文书
JavaScript执行机制详细介绍
2021/12/06 Javascript