剪贴板 Clipbardjs 的使用教程，Vue

官方API https://github.com/zenorocha/clipboard.js

一、添加对应包

package.json

    "clipboard": "^2.0.8"

二、引用 clipboardjs

在需要使用 clipboardjs 的页面中引用它

import ClipboardJS from "clipboard"

三、使用方法

1. 复制固定内容

第一种方法，是直接把需要复制的内容绑定到对应的 dom 元素上的 data-clipboard-text 属性上，当点击它的时候就会复制这个内容了。

<button class="btn" data-clipboard-text="这里是复制的内容">

let clipboard = new ClipboardJS('.btn')clipboard.on('success', function (e) {console.info('Action:', e.action)console.info('Text:', e.text)console.info('Trigger:', e.trigger)e.clearSelection()
})

2. js 复制任意内容

第二种方法是通过 js 处理需要复制的内容，比较灵活，可以复制任何内容。我一般使用这种方法。

比如这里我有一个自定义的元素，在点击的时候复制它的卡号。

核心代码如下

Vue

<div title="复制卡号" class="operation-btn clipboard" :dataClipboard='card'><i class="el-icon-document-copy"></i>
</div>

data(){return {clipboard: null // 存放当前创建的 clipboard 对象，用于页面卸载时删除，避免出现切换页面时多次复制的情况}
},
mounted(){// 1. 绑定剪贴板操作方法this.clipboard = new ClipboardJS('.clipboard', {text: function (trigger) {// 2. trigger 就是点击的 dom 元素，所以就可以通过它来获取到它的属性 'dataClipboard' 的值了// 3. 从这个方法返回的 string 就是会复制到剪贴板中的内容，所以可以复制任何内容了，也可以在这里处理一些逻辑// 4. 我在这里就只是单纯的输出了事先绑定好的值return trigger.getAttribute('dataClipboard')},})// 5. 当复制成功的时候提示复制成功this.clipboard.on('success', ()=>{  // 还可以添加监听事件，如：复制成功后提示this.$message.success('复制成功')})
},
beforeDestroy(){this.clipboard.destroy() // 6. 销毁 clipboard 避免弹出多个复制成功提示框
}

四、结果

正常复制成功后会提示

但如果没有 destroy 那一步，就会再现这样的情况。
原因是在切换页面时，当前页面重载时，之前的实例并没有销毁，全部响应了。

剪贴板 Clipbardjs 的使用教程，Vue相关推荐

java 实例的生命周期_[Java教程]Vue实例生命周期
[Java教程]Vue实例生命周期 0 2017-08-15 19:00:09 前面的话 Vue实例在创建时有一系列的初始化步骤,例如建立数据观察,编译模板,创建数据绑定等.在此过程中,我们可以通过一 ...
Vue.js教程-Vue项目的目录结构和.vue文件的构成
Vue.js教程-Vue项目的目录结构和.vue文件的构成前言 Vue项目的目录结构(Vue-cli3/4版本) .vue文件的构成 Html区域(template) script区域 export ...
vue怎么设置封面_vue设置视频封面教程 vue如何修改标题
现在使用vue的伙伴很多,可以说是视频编辑美化软件排前几的软件,能够使用的功能非常多,有用户就想知道如何才能进行标题的修改,视频的封面又是怎么设置的,想知道的伙伴,可以在iefans看看详细的操作方法 ...
vue 父传子_Vue.js教程Vue基本指令
前言本文仅介绍基本常用指令(不包括自定义指令和相应的修饰符,这两个以后再写). 再附上官方API文档,大家也可以去看官方解释,更全面更具体.VueAPI 本文所有指令写在views文件夹下的Home ...
vue做混合式app_Vue Cordova教程-Vue+Cordova打造跨平台可安装的混合APP视频教程（大地）...
Vue+Cordova打造跨平台可安装的混合APP视频教程必看说明: 目前购买此教程送Html5+Cordova+Ionic智能电视(TV)应用开发教程视频教程: 购买过Ionic的同学可以直接在( ...
[js高手之路] vue系列教程 - vue的事件绑定与方法(2)
一.在vue中,绑定事件,用v-on:事件类型, 如绑定一个点击事件, 我们可以这样子做 1 window.onload = function () { 2 var c = new Vue({ 3 e ...
clipboard剪贴板插件的使用教程
clipboard 是实现复制文本到剪贴板功能的 JavaScript插件,实现复制剪切功能非常方便实现效果图 <div style="padding-right: 30px; di ...
c语言Clipboard函数,剪贴板操作 Clipboard API 教程
一.简介浏览器允许 JavaScript 脚本读写剪贴板,自动复制或粘贴内容. 一般来说,脚本不应该改动用户的剪贴板,以免不符合用户的预期.但是,有些时候这样做确实能够带来方便,比如"一键 ...
Jsplumb基础教程(vue+jsplumb+d3)
目前github社区存在几款可用于设计流程图的绘图框架: go.js( http://www.gojs.net/latest/index.html) :go.js 提供一整套的JS工具 ,支持各种交互 ...

剪贴板 Clipbardjs 的使用教程，Vue

剪贴板 Clipbardjs 的使用教程，Vue

一、添加对应包

二、引用 clipboardjs

三、使用方法

1. 复制固定内容

2. js 复制任意内容

四、结果

剪贴板 Clipbardjs 的使用教程，Vue相关推荐

最新文章

热门文章