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思维联系--CodeForces - 218C E - Ice Skating (并查集)

    题目地址:24道CF的DIv2 CD题有兴趣可以做一下. ACM思维题训练集合 Bajtek is learning to skate on ice. He's a beginner, so his ...

  2. CodeForces - 1245 B - Restricted RPS(贪心)

    Codeforces Round #597 (Div. 2) Let nn be a positive integer. Let a,b,ca,b,c be nonnegative integers ...

  3. 图论--网络流--最大流--POJ 3281 Dining (超级源汇+限流建图+拆点建图)

    Description Cows are such finicky eaters. Each cow has a preference for certain foods and drinks, an ...

  4. Spring 注解注入—@Qualifier 注释

    当创建多个具有相同类型的 bean 时,并且想要用一个属性只为它们其中的一个进行装配,在这种情况下,你可以使用 @Qualifier 注释和 @Autowired 注释通过指定哪一个真正的 bean ...

  5. 前端福利,用 JS 就能实现抖音养号等诸多功能

    我是风筝,公众号「古时的风筝」,一个不只有技术的技术公众号,一个在程序圈混迹多年,主业 Java,另外 Python.React 也玩儿的 6 的斜杠开发者. Spring Cloud 系列文章已经完 ...

  6. C#黔驴技巧之去重(Distinct)

    前言 关于C#中默认的Distinct方法在什么情况下才能去重,这个就不用我再多讲,针对集合对象去重默认实现将不再满足,于是乎我们需要自定义实现来解决这个问题,接下来我们详细讲解几种常见去重方案,孰好 ...

  7. webpack4使用出现ERROR in Template execution failed: ReferenceError: HtmlwebpackPlugin is not defined

    问题描述 博主在使用webpack4的时候,使用了ejs文件,先附上ejs中的代码: <!doctype html> <html lang="zh-CN"> ...

  8. Ubuntu系统make menuconfig的依赖包ncurses安装

    Linux内核或者u-boot进行make menuconfig的时候,如果系统上没有安装ncurses,就会出现以下报错 *** Unable to find the ncurses librari ...

  9. Linux dts 设备树详解(二) 动手编写设备树dts

    Linux dts 设备树详解(一) 基础知识 Linux dts 设备树详解(二) 动手编写设备树dts 文章目录 前言 硬件结构 设备树dts文件 前言 在简单了解概念之后,我们可以开始尝试写一个 ...

  10. mongodb cluster

    假设三台机器,ip分别为192.168.1.10,192.168.1.11,192.168.1.12,分别在每台电脑上下载并解压mongodb,关闭防火墙或者开放防火墙端口 一.安装shard 配置文 ...