vue中粘贴板clipboard的使用方法
一、npm安装clipboard
npm install clipboard --save
二、页面结构
<span id="copyTarget">{{targetCode}}</span>
<span id="copyBtn" :data-clipboard-text="targetCode" data-clipboard-action="copy" data-clipboard-target="#copyTarget" @click="copy">复制</span>
targetCode是被复制的文本
三、引入Clipboard
import Clipboard from "clipboard";
四、copy方法
copy() {
// 因为此事件不能添加.stop,所以要设置一个开关, 500ms后打开开关
this.itemIsDisabled = true
setTimeout(()=>{
this.itemIsDisabled = false
}, 500)
let clipboard = new Clipboard('#copyBtn');
clipboard.on('success', e => {
console.log(this, '复制成功!', 'success', e);
clipboard.destroy()
})
clipboard.on('error', e => {
console.log(this, '该浏览器不支持自动复制!', 'warning', e);
clipboard.destroy()
})
},
copy方法不能添加.stop等修饰符,所以如果有需求,我的解决方法是添加一个定时器开关,点复制,让开关关闭500ms,在父元素的时间中判断itemIsDisabled就行了。
success事件中,需要注意this的指向问题。this测试不是指向vue实例
vue中粘贴板clipboard的使用方法的更多相关文章
- vue中使用echarts的两种方法
在vue中使用echarts有两种方法一.第一种方法1.通过npm获取echarts npm install echarts --save 2.在vue项目中引入echarts 在 main.js 中 ...
- vue中push()和splice()的使用方法
vue中push()和splice()的使用方法 push()使用 push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度.注意:1. 新元素将添加在数组的末尾. 2.此方法改变数组的长度 ...
- 用Vue中遇到的问题和处理方法(一)
用Vue开发项目有一段时间,在实际项目中遇到一些问题,在里把问题记录下来,并附上解决方案,给遇到同样的问题的码友提供一个解决思路吧: 测试部抛出问题一:在Vue1.0路由vue-router中,当点击 ...
- 用Vue中遇到的问题和处理方法
用Vue开发项目有一段时间,在实际项目中遇到一些问题,在里把问题记录下来,并附上解决方案,给遇到同样的问题的码友提供一个解决思路吧: 测试部抛出问题一:在Vue1.0路由vue-router中,当点击 ...
- vue中如何引入全局样式或方法
vue中我么会经常用到通用的一些全局的方法,如何左才能实现全局的复用减少代码累赘呢? 我们一般将公用的方法分装再utils.js文件中,然后再main.js主入口文件中将utils.js中的公共的方法 ...
- vue中常见的问题以及解决方法
有一些问题不限于 Vue,还适应于其他类型的 SPA 项目. 1. 页面权限控制和登陆验证 页面权限控制 页面权限控制是什么意思呢? 就是一个网站有不同的角色,比如管理员和普通用户,要求不同的角色能访 ...
- Vue中组件通信的几种方法(Vue3的7种和Vue2的12种组件通信)
Vue3组件通信方式: props $emit expose / ref $attrs v-model provide / inject Vuex 使用方法: props 用 props 传数据给子组 ...
- 在vue中使用sass的配置的方法
1.安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于node-sass npm install --save-dev nod ...
- 在vue中添加sass的配置的方法
1.安装sass的依赖包 npm install --save-dev sass-loader //sass-loader依赖于 node-sass npm install --save-dev no ...
- vue 中使用 AJAX获取数据的方法
在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: <script type="text/javascri ...
随机推荐
- Centos 7 .Net core后台守护进程Supervisor教程
ASP.NET Core应用程序发布linux在shell中运行是正常的.可一但shell关闭网站也就关闭了,所以要配置守护进程, 用的是Supervisor,本文主要记录配置的过程和过程遇到的问题 ...
- bilibili视频常用快捷键
Esc退出全屏 Q点赞.长按三连 W投币 E收藏 D开/关弹幕 F开/关全屏 M静音 [ 多P 上一个 ] 多P下一个 Enter发弹幕 Space播放/暂停 →单次快进5s,长按倍速播放 ←快退5s ...
- vitrualbox虚拟机搭建
参考:https://blog.csdn.net/weixin_45115705/article/details/100661644?depth_1-utm_source=distribute.pc_ ...
- 初探redis缓存击穿、穿透、雪崩问题
现分析Redis缓存使用过程失效的一些问题,在有缓存的情况下,查询数据的顺序是先查询缓存,如果查询到数据则直接返回数据,如果没有查询到数据,则到数据库中查询,数据库中有数据的话,将查询出的数据写到缓存 ...
- 后台运行&和nohup使用
这里首先先介绍一下 ctrl+z bg fg jobs 命令 下面为了观察效果,test1.sh脚本不停的输出hello ctrl + z ,会使一个正在运行的进程挂起(暂停)到后台,而且执行jobs ...
- 思必驰周强:AI 和传统信号技术在实时音频通话中的应用
如何用 AI 解决声音传输&处理中的三大问题?三大问题又是哪三大问题? 在「RTE2022 实时互联网大会」中,思必驰研发总监 @周强以<AI 和传统信号技术在实时音频通话中的应用> ...
- 声网AI降噪测评系统初探
作者:孟赛斯 前言 音频质量的优化是一个复杂的系统工程,而降噪是这个系统工程中的一个重要环节,传统的降噪技术经过几十年的发展已经陷入了瓶颈期,尤其是对非平稳噪声的抑制越来越不能满足新场景的需求.而近几 ...
- 来自我的Moments-实用学习资源或网站
目录 计算机基础知识 操作系统原理 计算机网络 其他 计算机技术栈 电子技术和嵌入式 计算机专业工作和面试 软件工程师手册(华为资料) 机器人工程师学习计划-硬核-知乎文章 提升效率的工具 BIT T ...
- Windows 10 G 神州网信政府版
神州网信政府版2018版:Win10 CMGE_V0-H.1020.000.iso校验码:9484e568c6505f9c4ad5b9fcf7ec8d83588eebfb38089f53e33011 ...
- uniapp踩坑必备笔记
1.[配置]应用版本号名称有一个规则的字符串:1.0.0,规则是:大版本号,中版本号,小版本号. 2.[配置]应用版本号中的小版本号不能超过9,超过9的需要向上一个版本号进一(逢十进一). 3.[配置 ...