vue复制到剪切板

VUE 中实现复制到剪切板,在电脑任何位置可复制功能
1、环境

vue 、 clipboard

2、使用步骤
1) 安装依赖包
npminstall vue-clipboard2--save

  1. 引入安装包
1、 脚手架搭建的用户 import Vue from 'vue'import VueClipboardfrom 'vue-clipboard2'Vue.use( VueClipboard )2、独立使用( 注意:vue-clipboard2需要再vue.js后面引入 )

  1. 页面中使用
1、 html结构 复制链接 2、JS操作 methods:{ // 复制成功 onCopy(e){ this.$message({ message:'复制成功!', type:'success' }) }, // 复制失败 onError(e){ this.$message({ message:'复制失败!', type:'error' }) }, }

3、实际项目中
3.1 clipboard 插件引入

vue复制到剪切板
文章图片
clipboard 插件的引入.jpg 3.2 clipboard方法的操作

vue复制到剪切板
文章图片
clipboardjs 方法的操作.jpg 【vue复制到剪切板】3.3 dom 结构中方法的绑定

vue复制到剪切板
文章图片
dom结构中方法的绑定.jpg

    推荐阅读