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("失败");
      },
    }
 }

原文地址:https://www.cnblogs.com/xiaojiangk/p/9718618.html

时间: 2024-08-28 18:02:01

js文本复制插件&vue的相关文章

PDF.js实现个性化PDF渲染(文本复制)

我肥来啦??.看到Redux教程突破3w的浏览量,小窃喜,很高兴自己的文章能够帮助到大家. 这次重返,依然带给大家一个小指南,也是最近工作中遇到的一个小case. 前不久,产品经理提出要在界面上优雅地展示PDF文档,当即就有了两种实现方式: 实现方式一使用embed标记来使用浏览器自带的pdf工具. 这种实现方式优缺点都很明显:优点:自带“打印”,“搜索”,“翻页”等功能,强大且实现方便.缺点:不同浏览器的pdf工具样式不一,且无法满足个性化需求,比如:禁止打印,下载等. 我们的产品经理是挑剔的

在sublime 编辑器中,安装插件 Vue Syntax Hightlight,高亮识别Vue.js 的单文件组件(*.vue)

转自:http://www.cnblogs.com/cosnyang/p/6290950.html 默认情况下,Vue.js 的单文件组件(*.vue)在 sublime 编辑器中是不被识别的.若要想高亮显示,需要安装插件 Vue Syntax Hightlight.安装步骤如下: 第一,在 sublime 中打开 PackageControl 如下图,快捷键 Ctrl+Shift+P. 第二,打开 Install Package 窗口.下图中第一个,回车. 打开过程中,右下角出现状态栏.如下图

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

原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org

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

chrome浏览器的VUE调试插件Vue.js devtools 应用商店直接安装 安装成功后在VUE文件打开可以直接调试: 提示效果如下: F12进入调试状态即可: 安装中出现的问题: 插件安装后无法使用,出现vue.js not detected提示的解决办法 找到插件的安装目录: (可以通过id搜索ID:nhdogjmejiglipccpnnnanhbledajbpd) C:\Users\liangsuya\AppData\Local\Google\Chrome\User Data\Def

js实现复制到粘贴板,兼容各浏览器

网上搜js实现复制粘贴的文章一大堆,但是没几个能用的.有的文章说Clipboard Copy解决,利用一个clipboard.swf作为桥梁,复制内容到剪贴板. 听说的是兼容IE.Firefox.Opera.chrome. Safari,但是必须浏览器支持Flash,考虑到Flash支持不是100%,所以我摒弃了这个方案. 说说我的实现,灵感来自优酷分享的复制,在此之上加以修改的.经测试,支持IE.Firefox.Opera.chrome.搜狗浏览器.360等主流浏览器,Safari是本身不支持

黄聪:JS实现复制到剪贴板功能,兼容所有浏览器(转)

两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能会更大.成长以来,很多朋友也听说到不少激励自己上进的话,但不是每个人都能一直坚持做下来,其实,这个跟自己的性格以及周围的环境都有很大关系,只能说多找方法.条件给自己鼓励,不断提高对自己的要求,才有机会获得多一点的成就. 今年下半年打算在组内建个叫『移动开发指南』的站点,在网站框架搭建过程,有一个功能

js封装成插件

由于项目原因,工作一年多还没用js写过插件,项目太成熟,平时基本都是在使用已经封装好的功能插件.感觉自己好low......这两天想自己抽空写一个canvas画统计图与折现图的插件,所以就去网上学习了下如何封装.....虽然之前看了很多源码,但是感觉就算了解也是野路子..... 什么是封装呢? 我的理解就是 把一个功能单独做成一个组件,就像做饺子,以前做饺子必须自己先用面粉做饺子皮,再做饺子馅,然后再手工包饺子,但是现在人们发明了自动包饺子机器,虽然机器里面的每一步骤和你自己包饺子是一样的,但是

推荐20款基于 jQuery &amp; CSS 的文本效果插件

jQuery 和 CSS 可以说是设计和开发行业的一次革命.这一切如此简单,快捷的一站式服务.jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQuery 插件. 所以今天我们将展示一些很酷的文本效果插件,将帮助你为你的 Web 页面创建一些很酷的和动态的东西.这里是20个基于 jQuery & CSS 的文本效果插件. 您可能感兴趣的相关文章 12款经典的白富美型 jQuery 图片轮播插件 让网站动起来!12款优秀的 jQuery 动画插件

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

两天前听了一个H5的分享,会议上有一句话,非常有感触:不是你不能,而是你对自己的要求太低.很简单的一句话,相信很多事情不是大家做不到,真的是对自己的要求太低,如果对自己要求多一点,那么你取得的进步可能会更大.成长以来,很多朋友也听说到不少激励自己上进的话,但不是每个人都能一直坚持做下来,其实,这个跟自己的性格以及周围的环境都有很大关系,只能说多找方法.条件给自己鼓励,不断提高对自己的要求,才有机会获得多一点的成就. 今年下半年打算在组内建个叫『移动开发指南』的站点,在网站框架搭建过程,有一个功能