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. Markdown中希腊字母与代码对应表

    字母 代码 α\alphaα $\alpha$ β\betaβ $\beta$ γ\gammaγ $\gamma$ Γ\GammaΓ $\Gamma$ δ\deltaδ $\delta$ Δ\Delt ...

  2. RobotFrameWork 自动化环境搭建(基于 python2.7)

    1.自动化工具安装顺序 robot Framework(两个RF框架) WXpython(不要更改安装路径,自动安装在python文件中) 安装依赖库 RF3.0 和 RF1.5.2.1 打开 rid ...

  3. D - The Bakery CodeForces - 834D 线段树优化dp···

    D - The Bakery CodeForces - 834D 这个题目好难啊,我理解了好久,都没有怎么理解好, 这种线段树优化dp,感觉还是很难的. 直接说思路吧,说不清楚就看代码吧. 这个题目转 ...

  4. keepalived高可用服务配置管理

    实验环境: 主机 ipaddress 服务 备注 k8s-master1 10.0.0.63 nginx k8s-master2 10.0.0.64 nginx k8s-node1 10.0.0.65 ...

  5. opencv-12-高斯滤波-双边滤波(附C++代码实现)

    开始之前 这几天由于自己的原因没有写, 一个是因为自己懒了, 一个是感觉这里遇到点问题不想往下写了, 我们先努力结束这个章节吧, 之前介绍了比较常用而且比较好理解的均值和中值滤波, 但是呢,在例程Sm ...

  6. 【Spark】DataFrame关于数据常用操作

    文章目录 DSL语法 概述 实例操作 SQL语法 概述 实例操作 DSL语法 概述 1.查看全表数据 -- DataFrame.show 2.查看部分字段数据(有4种方法)  (1) DataFram ...

  7. JAVA知识总结(一):概述

    第一次写文章,有点小紧张,不过没关系,因为我面对的都是小白.好了废话少说,直接开始吧. 我主要说一下JAVA的发展和开发java的基本知识及JAVA的主要特性. 一.JAVA的主要特性: 1. 一方面 ...

  8. 在培训机构花了好几万学Java,当了程序员还常被鄙视,这是招谁惹谁了?

    在之前的文章中说过,我是非计算机专业,通过参加培训进入程序员这行的. 入了程序员这行后,挺长一段时间在亲戚朋友中,我还是挺有面子的:家族里的第一个程序员,工作不用风吹日晒,收入比其他行业高不少,尤其是 ...

  9. [hdu4598]二分图判定,差分约束

    题意: 给一个图,问能否给每个点分配一个实数值,使得存在一个数实数T,所有点满足:|value(i)| < T 且 u,v之间有边<=> |value(u)-value(v)| &g ...

  10. [hdu2594]kmp水题

    题意:求最长的a的前缀同时满足是b的后缀,把a,b连在一起,kmp跑一下,迭代next直到长度小于等于a,b长度的最小值为止,即为答案. #pragma comment(linker, "/ ...