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 ...
随机推荐
- CF思维联系--CodeForces - 218C E - Ice Skating (并查集)
题目地址:24道CF的DIv2 CD题有兴趣可以做一下. ACM思维题训练集合 Bajtek is learning to skate on ice. He's a beginner, so his ...
- CodeForces - 1245 B - Restricted RPS(贪心)
Codeforces Round #597 (Div. 2) Let nn be a positive integer. Let a,b,ca,b,c be nonnegative integers ...
- 图论--网络流--最大流--POJ 3281 Dining (超级源汇+限流建图+拆点建图)
Description Cows are such finicky eaters. Each cow has a preference for certain foods and drinks, an ...
- Spring 注解注入—@Qualifier 注释
当创建多个具有相同类型的 bean 时,并且想要用一个属性只为它们其中的一个进行装配,在这种情况下,你可以使用 @Qualifier 注释和 @Autowired 注释通过指定哪一个真正的 bean ...
- 前端福利,用 JS 就能实现抖音养号等诸多功能
我是风筝,公众号「古时的风筝」,一个不只有技术的技术公众号,一个在程序圈混迹多年,主业 Java,另外 Python.React 也玩儿的 6 的斜杠开发者. Spring Cloud 系列文章已经完 ...
- C#黔驴技巧之去重(Distinct)
前言 关于C#中默认的Distinct方法在什么情况下才能去重,这个就不用我再多讲,针对集合对象去重默认实现将不再满足,于是乎我们需要自定义实现来解决这个问题,接下来我们详细讲解几种常见去重方案,孰好 ...
- webpack4使用出现ERROR in Template execution failed: ReferenceError: HtmlwebpackPlugin is not defined
问题描述 博主在使用webpack4的时候,使用了ejs文件,先附上ejs中的代码: <!doctype html> <html lang="zh-CN"> ...
- Ubuntu系统make menuconfig的依赖包ncurses安装
Linux内核或者u-boot进行make menuconfig的时候,如果系统上没有安装ncurses,就会出现以下报错 *** Unable to find the ncurses librari ...
- Linux dts 设备树详解(二) 动手编写设备树dts
Linux dts 设备树详解(一) 基础知识 Linux dts 设备树详解(二) 动手编写设备树dts 文章目录 前言 硬件结构 设备树dts文件 前言 在简单了解概念之后,我们可以开始尝试写一个 ...
- mongodb cluster
假设三台机器,ip分别为192.168.1.10,192.168.1.11,192.168.1.12,分别在每台电脑上下载并解压mongodb,关闭防火墙或者开放防火墙端口 一.安装shard 配置文 ...