/*  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. [分块][bitset][RMQ]区间

    源自 ditoly 大爷的 FJ 省队集训模拟赛题 Statement 给定一个长度为 \(n\) 的序列 \(a\) ,有 \(m\) 次询问 每次询问给出一个 \(k\) ,再给出 \(k\) 个 ...

  2. 造轮子-toast组件的实现(下)

    1.解决 toast 中传入 html 的问题,通过假的 slot 来实现 // plugins.js toast.$slots.default = [message] // toast.vue &l ...

  3. 【java面试】Web篇

    1.AJAX创建步骤 step1. 创建XMLHttpRequest对象,也就是创建一个异步调用对象:  step2. 创建一个新的HTTP请求,并指定改HTTP请求的方法.URL以及验证信息:  s ...

  4. 数据结构——栈的应用 NOI2.2 括号匹配问题

    栈是一种数据结构,相当于一个容器,将一个又一个变量从顶端压进去,需要使用时,又从顶端拿出来,其具体使用方法,下面是详细讲解: #include<stack>必须使用此头文件 stack&l ...

  5. 使用Azure CLI创建Linux虚拟机

    Azure提供了三种方式创建虚拟机,分别是Azure CLI.Azure PowerShell和Azure门户.本文介绍使用Azure CLI来创建Linux虚拟机. 使用Azure CLI创建Lin ...

  6. JPA_映射关联关系

    一:单项多对一的关联关系 例如:订单和客户 1.新创建订单类 package com.atguigu.jpa.helloworld; import javax.persistence.Column; ...

  7. Python学习,第五课 - 列表、字典、元组操作

    本篇主要详细讲解Python中常用的列表.字典.元组相关的操作 一.列表 列表是我们最以后最常用的数据类型之一,通过列表可以对数据实现最方便的存储.修改等操作 通过下标获取元素 #先定义一个列表 le ...

  8. Maven异常:Dynamic Web Module 3.0 requires Java 1.6 or newer.

    问题 我目前用的JDK 是java 1.8 ,搭建Maven项目的时候,设置Project facets后,出现来以下problem : Dynamic Web Module 3.0 requires ...

  9. FFMPEG学习----遍历所支持的解码器

    下面简单介绍一下遍历ffmpeg中的解码器信息的方法(这些解码器以一个链表的形式存储): 1.注册所有编解码器:av_register_all(); 2.声明一个AVCodec类型的指针,比如说AVC ...

  10. Huffman编码和解码

    一.Huffman树 定义: 给定n个权值作为n个叶子结点,构造一棵二叉树,若该树的带权路径达到最小,这样的二叉树称为最优二叉树,也称为霍夫曼树(Huffman树). 特点:     Huffman树 ...