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 ...
随机推荐
- [bzoj2038] [洛谷P1494] [2009国家集训队] 小Z的袜子(hose)
Description 作为一个生活散漫的人,小Z每天早上都要耗费很久从一堆五颜六色的袜子中找出一双来穿.终于有一天,小Z再也无法忍受这恼人的找袜子过程,于是他决定听天由命-- 具体来说,小Z把这N只 ...
- pandas时间序列常用操作
目录 一.时间序列是什么 二.时间序列的选取 三.时间序列的生成 四.时间序列的偏移量 五.时间前移或后移 五.时区处理 六.时期及算术运算 七.频率转换 一.时间序列是什么 时间序列在多个时间点观察 ...
- 美食家App开发日记1
前期一直在看第一行代码Android,这本书感觉讲基础讲得特别细致. 百看不如一试. 因为刚刚接触Android,没办法做到想写什么功能就直接一下写好,只能从最开始基础的控件使用开始练习. 所以一直在 ...
- Shell环境变量文件
/etc/profile 系统级的初始化环境变量文件,由登录Shell调用执行 /etc/profile.d 当/etc/profile运行时,会调用该目录下的一些脚本 /etc/bashrc 每个交 ...
- Java常见问题汇总
1.String,StringBuffer,StringBulider的区别及应用场景 2.Servlet生命周期 3.向上转型与向下转型 4.Java的多态性 5.重写和重载的区别 6.深拷贝和浅拷 ...
- pycharm版本下载地址
https://www.runoob.com/w3cnote/pycharm-windows-install.html 下载社区版本,因为免费 其余按照默认安装即可
- 线程池之 Executors
线程池之 Executors + 面试题 线程池的创建分为两种方式:ThreadPoolExecutor 和 Executors,上一节学习了 ThreadPoolExecutor 的使用方式,本节重 ...
- 修改 VS2013 项目属性的默认包含路径(全局)
1. 这里已不能更改. 2. 修改位置: C:\Users\N3verL4nd\AppData\Local\Microsoft\MSBuild\v4.0 Microsoft.Cpp.Win32.use ...
- FFmpeg被声明为已否决的解决方案
参考雷神的最简单的打印Hello World的程序: #include <stdio.h> #include <string.h> extern "C" { ...
- JavaScript 初学者容易犯的几个错误,你中招没?
JavaScript 是对初学者比较友好的一门编程语言,基本上花个半小时看下语法就能写出能运行的代码.JavaScript 是动态脚本语言,对数据类型没有太多的限制,写起来非常灵活.但正因为如此,初学 ...