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控件autocomplete 0.11演示及下载 1月5日已更新
Jan 09 Javascript
初试jQuery EasyUI 使用介绍
Apr 01 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
Jan 03 Javascript
使用js判断当前时区TimeZone是否是夏令时
Feb 23 Javascript
重写document.write实现无阻塞加载js广告(补充)
Dec 12 Javascript
jquery插件jquery.confirm弹出确认消息
Dec 22 Javascript
JavaScript File分段上传
Mar 10 Javascript
在点击div中的p时,如何阻止事件冒泡
Feb 07 Javascript
手把手搭建安装基于windows的Vue.js运行环境
Jun 12 Javascript
浅谈vue同一页面中拥有两个表单时,的验证问题
Sep 18 Javascript
jQuery实现视频展示效果
May 30 jQuery
vue如何批量引入组件、注册和使用详解
May 12 Vue.js
详解一个小实例理解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
解决phpmyadmin中文乱码问题。。。
2007/01/18 PHP
手把手教你使用DedeCms V3的在线采集图文教程
2007/04/03 PHP
PHP运行出现Notice : Use of undefined constant 的完美解决方案分享
2012/03/05 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
thinkPHP框架通过Redis实现增删改查操作的方法详解
2019/05/13 PHP
Thinkphp5+Redis实现商品秒杀代码实例讲解
2020/12/29 PHP
Jquery中获取iframe的代码
2011/01/11 Javascript
SuperSlide2实现图片滚动特效
2014/06/20 Javascript
javascript删除元素节点removeChild()用法实例
2015/05/26 Javascript
js+html5通过canvas指定开始和结束点绘制线条的方法
2015/06/05 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
2015/08/05 Javascript
用nodeJS搭建本地文件服务器的几种方法小结
2017/03/16 NodeJs
详解Angular中的自定义服务Service、Provider以及Factory
2017/04/22 Javascript
利用types增强vscode中js代码提示功能详解
2017/07/07 Javascript
微信小程序自定义模态对话框实例详解
2017/08/16 Javascript
vue 通过下拉框组件学习vue中的父子通讯
2017/12/19 Javascript
如何编写一个d.ts文件的步骤详解
2018/04/13 Javascript
详解React之父子组件传递和其它一些要点
2018/06/25 Javascript
Vue+Element实现网页版个人简历系统(推荐)
2019/12/31 Javascript
python调用windows api锁定计算机示例
2014/04/17 Python
数据挖掘之Apriori算法详解和Python实现代码分享
2014/11/07 Python
Python编程判断一个正整数是否为素数的方法
2017/04/14 Python
python with提前退出遇到的坑与解决方案
2018/01/05 Python
基于Django的乐观锁与悲观锁解决订单并发问题详解
2019/07/31 Python
python中hasattr()、getattr()、setattr()函数的使用
2019/08/16 Python
如何基于Python创建目录文件夹
2019/12/31 Python
python实现滑雪游戏
2020/02/22 Python
python 将视频 通过视频帧转换成时间实例
2020/04/23 Python
python生成xml时规定dtd实例方法
2020/09/21 Python
如何查看在weblogic中已经发布的EJB
2012/06/01 面试题
农村改厕实施方案
2014/03/22 职场文书
自我推荐信怎么写
2015/03/24 职场文书
青年岗位能手事迹材料(2016推荐版)
2016/03/01 职场文书
Redis Cluster 字段模糊匹配及删除
2021/05/27 Redis
Mysql索引失效 数据库表中有索引还是查询很慢
2022/05/15 MySQL
Java结构型设计模式之组合模式详解
2022/09/23 Java/Android