vue中使用剪切板需要借助一个插件,clipboard,使用方法还是很简单的,先下载,然后引入:

npm i clipboard -S

//引入
import Clipboard from 'clipboard'; 下面就是使用了,比如说,比较常见的是,上面一行文字,下面有一个复制的按钮,
<p id="share-code">{{init.code}}</p>
<button class="copy-btn" data-clipboard-action="copy" data-clipboard-target="#share-code" @click="copy">copy</button>

<script> copy() {
if(!this.init) return;
var clipboard = new Clipboard('.copy-btn')
clipboard.on('success', e => {
console.log('复制成功')
this.toast('copy success');
// 释放内存
clipboard.destroy();
})
clipboard.on('error', e => {
// 不支持复制
      //console.log('该浏览器不支持自动复制')
// 释放内存
clipboard.destroy()
})
}
},
</script>

vue中使用剪切板插件 clipboard.js的更多相关文章

  1. jq复制到剪切板插件clipboard.min.js(兼容IE9)

    /*! * clipboard.js v1.5.5 * https://zenorocha.github.io/clipboard.js * * Licensed MIT 漏 Zeno Rocha * ...

  2. jquery复制值到剪切板(clipboard.js)

    引入一个clipboard.js文件即可使用,下载地址:https://github.com/zenorocha/clipboard.js <script type="text/jav ...

  3. vue中自定义组件(插件)

    vue中自定义组件(插件) 原创 2017年01月04日 22:46:43 标签: 插件 在vue项目中,可以自定义组件像vue-resource一样使用Vue.use()方法来使用,具体实现方法: ...

  4. zclip复制到剪切板插件有个bug

    今天发现zclip复制到剪切板插件有个bug,就是在遨游和360浏览器的兼容模式下,点击复制没响应,后来我看了页面代码,发现在这两个浏览器的兼容模式下,生成的是<object>,其他浏览器 ...

  5. .Net Web开发中实现剪切板功能

    我要实现的功能是:在列表页,通过一个按钮复制对应的文章Url,如下图: 如下代码:     <a class="btn btn-success copy" href=&quo ...

  6. vi中系统剪切板的设置

    在vi中,如果编译时没有clipboard属性,将vi中的内容拷贝到系统剪切板有些麻烦.可以用如下的方法,查看vi 是否支持系统剪切板的功能: xt@xt-ThinkPad-X220:~$ vi -- ...

  7. vue中使用better-scroll滚动条插件

    应用场景: overflow: hidden会让超出的部分隐藏,并且无法拖拽,所以可使用插件让长列表限定的区域滚动拖拽. 参考:https://zhuanlan.zhihu.com/p/2740702 ...

  8. vue 中如何对公共css、 js 方法进行单文件统一管理,全局调用

    1.前言 最近,为公司开发交付的一个后台管理系统项目,我使用了 Vue 框架进行开发实践. 模块化.组件化.工程化的开发体验非常好.良好的 api,优雅的设计,对于工程师非常友好. 但是由于模块比较多 ...

  9. 点击复制内容到剪切板(clipboard)

    clipboard官方文档:https://clipboardjs.com/ 安装: 1.用npm:npm install clipboard --save 2.下载:https://github.c ...

随机推荐

  1. CF #636 (Div. 3) 对应题号CF1343

    unrated 选手悠闲做题,然后只做出四个滚蛋了 符合 div3 一贯风格,没啥难算法 E最后就要调出来了,但还是赛后才A的 CF1343A Candies 传送门 找到一个 \(x\),使得存在一 ...

  2. 课堂管理系统;在线教辅平台;java课设

    # 白泽智慧教辅平台 **说明:** 运行时需要修改位置: bzedu\src\main\resources\application.properties bzedu\src\main\resourc ...

  3. F. Cards and Joy

    F. Cards and Joy 题目大意: 给你n个人,每一个人恰好选k张牌. 第一行是 n 和 k 第二行有n*k个数,代表有n*k张牌,每张牌上的数字 第三行有n个数,代表第i个人喜欢的数字 第 ...

  4. 【Hadoop离线基础总结】oozie的安装部署与使用

    目录 简单介绍 概述 架构 安装部署 1.修改core-site.xml 2.上传oozie的安装包并解压 3.解压hadooplibs到与oozie平行的目录 4.创建libext目录,并拷贝依赖包 ...

  5. [hdu2222]ac自动机(模板)

    题意:一个文本串+多个模板串的匹配问题 思路:裸的ac自动机. #pragma comment(linker, "/STACK:10240000,10240000") #inclu ...

  6. P2220 [HAOI2012]容易题(快速幂)

    Describe 为了使得大家高兴,小Q特意出个自认为的简单题(easy)来满足大家,这道简单题是描述如下: 有一个数列A已知对于所有的A[i]都是1~n的自然数,并且知道对于一些A[i]不能取哪些值 ...

  7. 整理了最全的Python3数据类型转换方法,可以收藏当手册用

    本文基于python3.8版本,总结了各种数据类型直接的转换规则和方法.算是比较全了,可以收藏当手册来查. 概述 数据类型转换,指的是通过某种方法,将一个数据由原来的类型转换为另外一个类型.比如,我们 ...

  8. Mysql 常用函数(9)- reverse 函数

    Mysql常用函数的汇总,可看下面系列文章 https://www.cnblogs.com/poloyy/category/1765164.html reverse 的作用 将字符串反转,即顺序取反 ...

  9. buuctf-pwn刷题-axb_2019_heap

    版权声明:本文为CSDN博主「L.o.W」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明. 原文链接:https://blog.csdn.net/weixin_441 ...

  10. 【疑问】SQLServer_DNS注入数据库因为点号不能显示数据库的库名的方法[语音和音乐]

    你好,欢迎关注我的网站: www.leosec.net