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 ...
随机推荐
- js世家委托详解
事件原理 通过div0.addElementListener来调用:用法:div0.addElementListener(事件类型,事件回调函数,是否捕获时执行){}.1.事件类型(type):必须是 ...
- VUE 后台管理系统权限控制
谈一谈VUE 后台管理系统权限控制 前端权限从本质上来讲, 就是控制视图层的展示,比如说是某个页面或者某个按钮,后端权限可以控制某个用户是否能够查询数据, 是否能够修改数据等操作,后端权限大部分是基于 ...
- 1) drf 整体了解
一.接口 """ 1.什么是接口:url+请求参数+响应数据 | 接口文档 2.接口规范: url:https,api,资源(名词复数),v1,get|post表示操 ...
- 洛谷P5018 对称二叉树
不多扯题目 直接题解= = 1.递归 由题目可以得知,子树既可以是根节点和叶节点组成,也可以是一个节点,题意中的对称二叉子树是必须由一个根节点一直到树的最底部所组成的树. 这样一来就简单了,我们很容易 ...
- Hello World的五十种不同实现方法!!!!!
我们作为一名程序员,职业生涯中至少完成了一个“Hello, World!“程序.当我们学习一门新的语言时,“Hello, World!“通常是我们所写的第一个程序.程序员一般也都会使用多门语言,甚至有 ...
- springboot配置静态资源访问路径
其实在springboot中静态资源的映射文件是在resources目录下的static文件夹,springboot推荐我们将静态资源放在static文件夹下,因为默认配置就是classpath:/s ...
- webpack-基础知识
一.webpack介绍 webpack是一个前端模块化工具,简单解释:webpack就是处理多个文件,根据设置的规则,对文件进行合并和修改. 正式说:webpack是一个模块化打包工具.从入口模块出发 ...
- [NBUT 1224 Happiness Hotel 佩尔方程最小正整数解]连分数法解Pell方程
题意:求方程x2-Dy2=1的最小正整数解 思路:用连分数法解佩尔方程,关键是找出√d的连分数表示的循环节.具体过程参见:http://m.blog.csdn.net/blog/wh2124335/8 ...
- JTextpane 添加行号
最近项目需求,需要在JTextPane上添加行号等信息,网上找了好久只找到JTextArea添加行号信息,copy网上的程序研究了下,发现自己改改就可以让JTextPane显示行号! 代码: pack ...
- Redis学习笔记(八) RDB持久化
Redis是内存数据库,它将自己的数据库状态存储在内存里面,所以如果不想办法将存储在内存中的数据库状态保存到磁盘,那么服务器 进程一旦退出,服务器中的数据库状态也会消失不见. 为了解决这个问题,Red ...