vue中使用剪切板插件 clipboard.js
vue中使用剪切板需要借助一个插件,clipboard,使用方法还是很简单的,先下载,然后引入:
npm i clipboard -S
//引入
import Clipboard from 'clipboard'; 下面就是使用了,比如说,比较常见的是,上面一行文字,下面有一个复制的按钮,
<p id="share-code">{{init.code}}</p>
<button class="copy-btn" data-clipboard-action="copy" data-clipboard-target="#share-code" @click="copy">copy</button>
<script> copy() {
if(!this.init) return;
var clipboard = new Clipboard('.copy-btn')
clipboard.on('success', e => {
console.log('复制成功')
this.toast('copy success');
// 释放内存
clipboard.destroy();
})
clipboard.on('error', e => {
// 不支持复制
//console.log('该浏览器不支持自动复制')
// 释放内存
clipboard.destroy()
})
}
},
</script>
vue中使用剪切板插件 clipboard.js的更多相关文章
- jq复制到剪切板插件clipboard.min.js(兼容IE9)
/*! * clipboard.js v1.5.5 * https://zenorocha.github.io/clipboard.js * * Licensed MIT 漏 Zeno Rocha * ...
- jquery复制值到剪切板(clipboard.js)
引入一个clipboard.js文件即可使用,下载地址:https://github.com/zenorocha/clipboard.js <script type="text/jav ...
- vue中自定义组件(插件)
vue中自定义组件(插件) 原创 2017年01月04日 22:46:43 标签: 插件 在vue项目中,可以自定义组件像vue-resource一样使用Vue.use()方法来使用,具体实现方法: ...
- zclip复制到剪切板插件有个bug
今天发现zclip复制到剪切板插件有个bug,就是在遨游和360浏览器的兼容模式下,点击复制没响应,后来我看了页面代码,发现在这两个浏览器的兼容模式下,生成的是<object>,其他浏览器 ...
- .Net Web开发中实现剪切板功能
我要实现的功能是:在列表页,通过一个按钮复制对应的文章Url,如下图: 如下代码: <a class="btn btn-success copy" href=&quo ...
- vi中系统剪切板的设置
在vi中,如果编译时没有clipboard属性,将vi中的内容拷贝到系统剪切板有些麻烦.可以用如下的方法,查看vi 是否支持系统剪切板的功能: xt@xt-ThinkPad-X220:~$ vi -- ...
- vue中使用better-scroll滚动条插件
应用场景: overflow: hidden会让超出的部分隐藏,并且无法拖拽,所以可使用插件让长列表限定的区域滚动拖拽. 参考:https://zhuanlan.zhihu.com/p/2740702 ...
- vue 中如何对公共css、 js 方法进行单文件统一管理,全局调用
1.前言 最近,为公司开发交付的一个后台管理系统项目,我使用了 Vue 框架进行开发实践. 模块化.组件化.工程化的开发体验非常好.良好的 api,优雅的设计,对于工程师非常友好. 但是由于模块比较多 ...
- 点击复制内容到剪切板(clipboard)
clipboard官方文档:https://clipboardjs.com/ 安装: 1.用npm:npm install clipboard --save 2.下载:https://github.c ...
随机推荐
- JAVA_WEB--jsp概述
JSP全名为Java Server Pages,中文名叫java服务器页面,其根本是一个简化的Servlet设计,它是由Sun Microsystems公司倡导.许多公司参与一起建立的一种动态网页技术 ...
- ModuleNotFoundError: No module named 'pip'的解决方案
python在通过cmd安装pandas时遇到ModuleNotFoundError: No module named 'pip'的报错. 网上查询后通过如下两行cmd命令解决了 python -m ...
- 线段树 C - Connected Components? CodeForces - 920E
这个题目居然可以用线段树写,好震惊,如果不是在线段树专题肯定想不到,但是就算在线段树的专题里面,我也不太会怎么写. 这个题目大意是,给你n m n代表n个点,m代表m条边,然后就是m行,每行两个数字, ...
- github使用命令
创建本地库,提交,和绑定github ,上传代码 git init git add README.md git commit -m "first commit" git remot ...
- Java 常用API(二)
目录 Java 常用API(二) 1. Object类 2. Date类 概述 构造方法和成员方法 3. DateFormat类 概述 SimpleDateFormat类 练习 4. Calendar ...
- Prime Path素数筛与BFS动态规划
埃拉托斯特尼筛法(sieve of Eratosthenes ) 是古希腊数学家埃拉托斯特尼发明的计算素数的方法.对于求解不大于n的所有素数,我们先找出sqrt(n)内的所有素数p1到pk,其中k = ...
- 王颖奇 20171010129《面向对象程序设计(java)》第十六周学习总结
实验十六 线程技术 实验时间 2018-12-8 理论部分: 并发⚫ 线程的概念⚫ 中断线程⚫ 线程状态⚫ 多线程调度⚫ 线程同步 1.线程的概念 程序是一段静态的代码,它是应用程序执行的蓝本. 进 ...
- Day_09【常用API】扩展案例7_验证QQ号是否正确
需求说明 请用户输入一个"QQ号码",我们来判断这个QQ号码是否正确 要求:使用方法来完成判断功能 验证规则: 1)必须是5-12位数字: 2)首位不能是0: package co ...
- mercurial 入门
安装 需要python的docutils,故 sudo pip3 install docutils 然后直接安装mercurial sudo pip3 install mercurial 如果超时,则 ...
- 移动端H5支付(微信和支付宝)
我们直接进入主题吧,先说功能: 1.用户通过我们的页面输入充值帐号和金额调起支付(微信或者支付宝),支付成功返回获取支付结果. 2.微信支付成功后重定向到指定页面(没有设置重定向地址的话,默认返回调起 ...