js文本复制插件&vue
/* HTML:
* <a href="javascript:;" class="copy" data-clipboard-text="copy"></a>
*/
$('.bdsharebuttonbox .copy').on('click', function (){
$(this).attr('data-clipboard-text',window.location.href); var clipboard = new Clipboard('.copy');
clipboard.on('success',function(e){
e.clearSelection();
alert('复制成功');
});
clipboard.on('error',function(e){
e.clearSelection();
alert('复制失败');
});
}); // vue 文本复制插件
/* install:
* 1、npm install --save vue-clipboard2
* 2、import Vue from 'vue'
* 3、import VueClipboard from 'vue-clipboard2'
*/
/* HTML:
* <el-button class="ml10" type="text" size="medium"
* v-clipboard:copy="sysAppIds"
* v-clipboard:success="onCopy"
* v-clipboard:error="onError">点击复制</el-button>
*/
export default {
data(){
return {
sysAppIds: 'xxxxxxxxxxxsx'
}
},
methods: {
// 复制成功
onCopy(e){
console.log(e.text);
},
// 复制失败
onError(e){
alert("失败");
},
}
}
js文本复制插件&vue的更多相关文章
- JS 一键复制插件应用 和 原生实现
一.目前来说复制功能 clipboard.js基本可以兼容所有浏览器,可以任意复制文本,官方地址 https://clipboardjs.com/ 1.进入官方网站下载 然后引入 <script ...
- echarts.js(图表插件)2.0版会导致 ZeroClipboard.js(复制插件)失效,3.0版未知。
解决方法:ZeroClipboard.js先于echarts.js加载.
- vue.js国际化vue-i18n插件的使用问题,在模版文本、组件方法、jsf方法里的使用
vue.js国际化vue-i18n插件的使用问题,在模版文本.组件方法.jsf方法里的使用 1.在文本里使用{{$t("xxx")}} <span>{{$t(" ...
- JS实现文本复制与剪切
我们在网页上放置一个复制按钮,主要用来方便用户复制链接之类的复杂文本,以往的做法是,通过JS依靠Flash,甚至借助jQuery庞大的js库来实现文本复制到剪贴板的.今天我要给大家介绍的是一款极现代的 ...
- 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间
原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...
- chrome浏览器的VUE调试插件Vue.js devtools
chrome浏览器的VUE调试插件Vue.js devtools 应用商店直接安装 安装成功后在VUE文件打开可以直接调试: 提示效果如下: F12进入调试状态即可: 安装中出现的问题: 插件安装 ...
- clipboard.js -- js实现将文本复制到剪贴板的方法
资源 推荐使用:clipboard.js 官方教程地址:https://clipboardjs.com/#example-text 官方github地址:https://github.com/zeno ...
- 【转】js实现复制到剪贴板功能,兼容所有浏览器
两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...
- 纯js实现复制到剪贴板功能
在网页上复制文本到剪切板,一般是使用JS+Flash结合的方法,网上有很多相关文章介绍.随着 HTML5 技术的发展,Flash 已经在很多场合不适用了,甚至被屏蔽.本文介绍的一款JS插件,实现了纯J ...
随机推荐
- Django 滑动验证
极验官网:https://www.geetest.com/ 文档: https://docs.geetest.com/ 查看 行为验证的部署文档
- ASP.NET Cookie是怎么生成的
ASP.NET Cookie是怎么生成的 可能有人知道Cookie的生成由machineKey有关,machineKey用于决定Cookie生成的算法和密钥,并如果使用多台服务器做负载均衡时,必须指定 ...
- UidGenerator springboot2集成篇
uid-generator 官网集成文档: https://github.com/baidu/uid-generator/blob/master/README.zh_cn.md 由于并没有提供spri ...
- PHP——数组
数组的定义 数组能够在单个变量中存储多个值. 创建空数组: $arr = array();//表示创建一个空数组,并把创建的空数组赋值给变量$arr 数值数组 自动分配 ID 键(ID 键总是从 0 ...
- UIKit, AppKit, 以及其他API在多线程当中的使用注意事项
UIKit, AppKit, 以及其他API在多线程当中的使用注意事项 Overview The Main Thread Checker is a standalone tool for Swift ...
- Java容器解析系列(17) LruCache详解
在之前讲LinkedHashMap的时候,我们说起可以用来实现LRU(least recent used)算法,接下来我看一下其中的一个具体实现-----android sdk 中的LruCache. ...
- zookeeper3.4.6安装
1.关闭防火墙 service iptables stop chkconfig iptables off 2.编辑hosts文件: vi /etc/hosts 192.168.99.6 JacK6 1 ...
- Dubbo如何支持本地调用?injvm方式解析
Dubbo是一个远程调用的框架,对于一个服务提供者,暴露了一个接口供外部消费者调用,那么对于提供者自己是否可以调用这个接口,需要什么特殊处理吗? 这篇文章就分享下Dubbo关于本地调用的实现机制,以及 ...
- BeautifulSoup标签定位方法总结
首先说明一下两个基本函数 .find() 和 .findAll(). find()返回第一个符合要求的标签 findAll()返回一个由所有符合要求的标签组成的列表.除此之外基本相同. 0.直接定位 ...
- Guava中强大的排序器Ordering使用
一 创建排序器 排序器:可以用来为构建复杂的比较器,以完成集合排序的功能: 本质上来说,Ordering 实例无非就是一个特殊的Comparator 实例. Ordering把很多基于Comparat ...