/*  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的更多相关文章

  1. JS 一键复制插件应用 和 原生实现

    一.目前来说复制功能 clipboard.js基本可以兼容所有浏览器,可以任意复制文本,官方地址 https://clipboardjs.com/ 1.进入官方网站下载 然后引入 <script ...

  2. echarts.js(图表插件)2.0版会导致 ZeroClipboard.js(复制插件)失效,3.0版未知。

    解决方法:ZeroClipboard.js先于echarts.js加载.

  3. vue.js国际化vue-i18n插件的使用问题,在模版文本、组件方法、jsf方法里的使用

    vue.js国际化vue-i18n插件的使用问题,在模版文本.组件方法.jsf方法里的使用 1.在文本里使用{{$t("xxx")}} <span>{{$t(" ...

  4. JS实现文本复制与剪切

    我们在网页上放置一个复制按钮,主要用来方便用户复制链接之类的复杂文本,以往的做法是,通过JS依靠Flash,甚至借助jQuery庞大的js库来实现文本复制到剪贴板的.今天我要给大家介绍的是一款极现代的 ...

  5. 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间

    原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...

  6. chrome浏览器的VUE调试插件Vue.js devtools

      chrome浏览器的VUE调试插件Vue.js devtools 应用商店直接安装 安装成功后在VUE文件打开可以直接调试: 提示效果如下: F12进入调试状态即可: 安装中出现的问题: 插件安装 ...

  7. clipboard.js -- js实现将文本复制到剪贴板的方法

    资源 推荐使用:clipboard.js 官方教程地址:https://clipboardjs.com/#example-text 官方github地址:https://github.com/zeno ...

  8. 【转】js实现复制到剪贴板功能,兼容所有浏览器

    两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能 ...

  9. 纯js实现复制到剪贴板功能

    在网页上复制文本到剪切板,一般是使用JS+Flash结合的方法,网上有很多相关文章介绍.随着 HTML5 技术的发展,Flash 已经在很多场合不适用了,甚至被屏蔽.本文介绍的一款JS插件,实现了纯J ...

随机推荐

  1. Flask蓝图(Blueprint)

    一.作用 1.目录结构划分 2.url添加前缀 url_prefix 3.应用特殊装饰器,在该蓝图定义的特殊装饰器,只在改蓝图的起效 二.简单示例 1.创建一个项目文件 2.创建一个同名的python ...

  2. 3.JavaSE之注释

  3. Java框架之SpringMVC 04-视图解析-Spring表单-JSON-上传下载

    SpringMVC 视图解析 请求处理方法(controller方法)执行完成后,最终返回一个 ModelAndView 对象,即使出现异常也会返回一个 ModelAndView 对象.对于那些返回 ...

  4. 04-String

    动手动脑 请运行以下示例代码StringPool.java,查看其输出结果.如何解释这样的输出结果?从中你能总结出什么? s0,s1,s2字符串的内容相同,实际占用的是同一空间,引用的是同一个对象,所 ...

  5. 如何查看Ubuntu服务器上Django项目的MySQL服务有没有挂?

    如果你在项目内输入:MySQL -uroot -p 接着输入密码之后返回ERROR:1045……如下图 那么这就说明MySQL服务挂了. 需要重新启动一下 重启时在项目目录下输入:sudo servi ...

  6. node js 爬啊爬 记录 向 Scott 致敬 不要问为什么

    更优雅的异步编程: 定向爬取 :http://www.010xww.com/list/travel.htm 上代码: 打印一下http . 嗯 http 模块加载没问题 获取一个 文章列表: 终于把人 ...

  7. 网络io模型总结

    操作系统基本概念 首先来来说下操作系统,嗯,操作系统是计算机硬件的管理软件,是对计算机硬件的抽象,操作系统将应用程序分为用户态和内核态,例如驱动程序就位于内核态,而我们写的一般程序都是用户态,包括we ...

  8. # 团队项目-Beta冲刺2(七个小矮人)

    团队项目-Beta冲刺2(七个小矮人) 一.格式描述 这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/GeographicInformationScien ...

  9. from .cv2 import * ImportError: DLL load failed: 找不到指定的模块。 >>>

    from .cv2 import * ImportError: DLL load failed: 找不到指定的模块. >>> 昨天看项目的时候遇到这个问题,折腾到深夜,网上的各种方法 ...

  10. UML--->用例图梳理

    用例图梳理 概述 用例图主要用来描述"用户.需求.系统功能单元"之间的关系.它展示了一个外部用户能够观察到的系统功能模型图. 用例图的主要目的是帮助开发团队以一种可视化的方式理解系 ...