时间:2021-05-26
clipboard.js 是一个不需要flash,将文本复制到剪贴板的插件。下面给大家介绍Vue中使用clipboard实现复制功能,具体内容如下所示:
首先现在Vue中引入clipboard
npm install clipboard --save
在需要使用的组件中import 引入clipboard
import Clipboard from 'clipboard';
clipboard的实际使用
不论是单按钮复制还是多按钮复制,一定要在页面加载DOM完成后先New出来具有复制功能的按钮,如果在函数内再New那么可能会出现点击复制按钮两次,才复制成功的现象,如下:
只要页面已经加载完DOM即可,如果是动态生成可以使用nextTick中New。-->
绑定复制内容的方式有以下几种:
<!--第一种直接绑定在按钮上--> <button class="marleft10 btn" style="float: right;border: none;" :data-clipboard-text="2" @click="copy()">复制 </button><!--第二种单个复制按钮动态获取需要复制的内容--><input type="text" v-model="copyContent" id="copy_text" style="opacity: 0"><button ref="copy" data-clipboard-action="copy" data-clipboard-target="#copy_text" @click="copy">复制</button><!--第三种可以在New Clipboard时设定要复制的内容-->new Clipboard('copyBtn',function(){ return <!--要复制的内容-->})copy(){ let _this = this <!--如果在内部new会出现点击两次在复制成功的现象所以还请各位多多注意--> clipboard.on('success', function () { Toast('复制成功') _this.destroy() <!--销毁缓存,然后在重新new这样不会出现点击复制上出现之前复制的内容的情况--> _this.clipboard = new Clipboard(copyBtn); }) clipboard.on('error', function () { Toast('复制失败,请手动复制') }) }总结
以上所述是小编给大家介绍的Vue中使用clipboard实现复制功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
点击复制功能主要通过clipboard.js来实现在vue中使用clipboard.js时候发现一个问题,就是如果不是input或者button按钮的话,则复制
小白单纯记录一下工作中遇到的需求:在vue中如何实现复制功能(注:依赖第三方插件clipboard)一.安装插件第一种直接npm安装:npminstallcli
效果图:二维码用了qrcode.vuenpminstallqrcode.vue--save 复制内容用了vue-clipboard2npminstallvue-
VUE复制内容至剪切板(两种使用方法)复制内容至剪切板使用的是插件'vue-clipboard2',通过官方文档会发现共有两种使用方式。第一种方式与大多数文章类
常看到各种app应用中使用自定义的键盘,本例子中使用vue2实现个简单的键盘,支持在移动端和PC端使用实现效果:Keyboard.vue123符·{{key}}