Vue中结合clipboard实现复制功能

时间: 2018-09-06阅读: 2073标签: 复制

首先现在vue中引入clipboard

npm install clipboard --save


在需要使用的组件中import 引入clipboard

import Clipboard from 'clipboard';


clipboard的实际使用

不论是单按钮复制还是多按钮复制,一定要在页面加载DOM完成后先New出来具有复制功能的按钮,如果在函数内再New那么可能会出现点击复制按钮两次,才复制成功的现象,如下:

 mounted() {
    var copybtn = document.getElementsByClassName('btn')
    this.clipboard = new Clipboard(copybtn);
    }
<!--并不一定非要在mounted中也可以在其他周期内,
    只要页面已经加载完DOM即可,如果是动态生成可以使用nextTick中New。-->

绑定复制内容的方式有以下几种:

<!--第一种直接绑定在按钮上-->
 <button class="marleft10 btn" style="float: right;border: none;" :data-clipboard-text="2"
        @click="copy()">复制
        </button>
<!--第二种单个复制按钮动态获取需要复制的内容-->
<input type="text" v-model="copyContent"  id="copy_text" style="opacity: 0">
<button ref="copy"  data-clipboard-action="copy" data-clipboard-target="#copy_text" @click="copy">复制</button>
<!--第三种可以在New Clipboard时设定要复制的内容-->
new Clipboard('copyBtn',function(){
    return <!--要复制的内容-->
})

copy(){
    let _this = this
    <!--如果在内部new会出现点击两次在复制成功的现象所以还请各位多多注意-->
    clipboard.on('success', function () {
        Toast('复制成功')
        _this.destroy() <!--销毁缓存,然后在重新new这样不会出现点击复制上出现之前复制的内容的情况-->
        _this.clipboard = new Clipboard(copyBtn);
    })
    clipboard.on('error', function () {
        Toast('复制失败,请手动复制')
      })
    }


来源:https://www.cnblogs.com/Edwin-du/archive/2018/09/05/9592806.html

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1057

关闭

原生js实现复制内容到剪切板,兼容pc、移动端(支持Safari浏览器)

在开发中经常会遇到这样的需求,第一种就是点击复制当前页面的链接,第二种就是类似卡券的功能,需要复制密码等等。纯js实现复制文本并提示复制成功(干货)适用所有浏览器

原生JS在网页上复制的所有文字后面自动加上一段版权声明

不少技术博客有这样的处理,当我们复制代码的时候,会自动加上一段本信息版权为XXXX,这是怎么实现的呢?其实实现的方式很简单,可以在我的网站页面上绑定一个 copy 事件,当你复制文章内容的时候

HTML页面 用CSS实现禁止选中、复制和右键

最近在写页面的时候,需要在左上角加一个logo,但是复制的时候会把这张图片一块选中。那么我们可以通过CSS给它设置禁止选中,代码如下:

css如何设置不可复制?

css可以使用user-select属性来设置不可复制,此属性可以设置或检索是否允许用户选中文本,将此属性的属性值设置为none可以使文本不可选中。

如何设置网页无法复制?

javascript设置网页无法复制的方法:在JavaScript代码中设置禁用右键菜单、复制、选择等操作,禁用Ctrl+c和Ctrl+v快捷键的使用,通过这种方法就可以实现网页无法复制。

原生Js实现复制(Copy)的方法总结,execCommand和clipboardData的使用

原生Js实现复制(Copy)的两种方法,一种是利用 clipboardData,另外一种则是用 execCommand(),今天将统一讲解一下关于他们的使用方法。

网页不让用户复制方法总汇,设置html禁止选择,保护源码,js禁止复制文字

这篇文章主要讲解:右键复制失效方法、菜单-文件-另存为-失效方法、防止查看源代码进行复制的方法、防止页面缓存的方法。来达到一定的代码保护效果

Js使用Object.assign()对象的复制、合并、封装等操作

Js使用Object.assign()对象的复制:Object.assign()只对顶层属性做了赋值,Object.assign()合并/封装等操作:具有相同属性的其他对象覆盖;null、undefined会被忽略;字符串会被封装成单字符的可枚举属性数组

程序员_代码神注释鉴赏大全(可复制粘贴)

程序员个性注释,让你的代码飞起来。一时兴起就收集了以下神注释,希望能为广大ITer带来快乐,以下是收集了以下神注释,希望能为广大程序员们带来快乐,缓解你们工作中的压力

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!