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. JSbridge 在Vue的封装与交互

    原文转自: 点我 写在 JSbridge.js let isAndroid = navigator.userAgent.indexOf('Android') > -1 || navigator. ...

  2. 数学--数论--Miller_Rabin判断一个大数是不是素数(随机算法)

    前提知识 1,费马定理:ap−1=1(mod p)a^{p-1}=1(mod\ p)ap−1=1(mod p)

  3. 使用C++STL的map容器实现一种命令映射

    因为最近在练习写一个ftp的服务器,其中的命令有很多种,每个命令对应一个执行函数,能够想到的最简单的实现方式便是使用if--else匹配命令和执行对应的函数,如下所示: if(strcmp(" ...

  4. XCTF练习题-WEB-webshell

    XCTF练习题-WEB-webshell 解题步骤: 1.观察题目,打开场景 2.根据题目提示,这道题很有可能是获取webshell,再看描述,一句话,基本确认了,观察一下页面,一句话内容,密码为sh ...

  5. React Hooks总结

    Hook 前言 什么是Hook 自从 16.8 版本开始,hooks 的出现使得你可以在不编写 class 的情况下使用状态管理以及其它 React 的特性. 那么在 React Hooks 出现之前 ...

  6. 设计模式(Java语言)- 原型模式

    原型模式(Prototype Pattern)也有人将原型模式称为克隆模式,是属于创造型设计模式,用于创建重复的对象,提供了一种创建对象的最佳方式.原型模式需要实现Cloneable接口,来实现对象的 ...

  7. CSS3.16

    <style>#back-top { position: fixed; bottom: 10px; right: 5px; z-index: 99;}#back-top span { wi ...

  8. spring mvc 中使用session

    举例:用户登录成功之后,把用户对象放置到session中 第一步,用户登录成功之后把用户对象首先放到Model中 第二步,要在控制器上加SessionAttributes注解,把放到model中的对象 ...

  9. 【mybatis】IF判断的坑

    http://cheng-xinwei.iteye.com/blog/2008200 最近在项目使用mybatis中碰到个问题 <if test="type=='y'"> ...

  10. 使用EF Code First生成模型,如何让时间字段由数据库自动生成

    场景:保存记录时需要时间字段,该时间如果由前台通过DateTime.Now产生,存在风险,比如修改客户端的系统时间,就会伪造该记录的生成时间.因此,需要在保存记录时,由后台自动赋予具体的时间. 实现方 ...