需求设定
- 点击某个按钮,将设置的目标内容(例如下载链接地址)复制到剪切板,可以在电脑上任何地方粘贴
- 不使用任何框架和使用Flash,以最小的代码实现该功能,并能兼容所有主流浏览器
插件选择
- clipboard.js:
![80aaa931bcadb9e40a21d4affebada24.png](https://i-blog.csdnimg.cn/blog_migrate/190a31d6f9b4cfa23a22afbda7c4b979.jpeg)
- 官网链接地址:clipboard.js
- 引入方式:
- NPM方式:npm install clipboard --save
- 直接引入:下载源代码以后将相关JS放在目录下,之后引入:
- 使用方式(官方文档例子):
- HTML(target包括但不限于input)
点击复制
- JS
var 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();});//失败回调clipboard.on('error', function(e) { console.error('Action:', e.action); console.error('Trigger:', e.trigger);});
更多使用方式和功能请参考官方文档,这里只举例一个实用且常用的功能!
兼容性:
![1a47aa09784d42f3cd7f4381edcc3ed2.png](https://i-blog.csdnimg.cn/blog_migrate/1a5d80ad2d3835a512ebfd86d14055dc.jpeg)
正文开始了!!!,在Vue中咋用?
- Vue项目所使用的相关插件(这仅是本人使用到clipboard.js那个项目用到的,不全是必须的):vue-router、vue-cli、es6-promise、axios、scss、element-ui、clipboard。
- 使用clipboard步骤介绍开始:
- 安装:npm install clipboard --save
- 引入(main.js):
import clipboard from 'clipboard';//注册到vue原型上Vue.prototype.clipboard = clipboard;
- template:
/*button上的这个ref需要命名一个,名字自己取,下面会讲解为什么*/复制
- Events:
data() { return { copyBtn: null //存储初始化复制按钮事件 }},mounted() {/*这里使用了刚开始注册到vue原型上的clipboard(使用注册到vue原型的插件的方法就是:this + 注册时命名名字)*这里需要用到刚才给button命名的ref的名字,因为这是vue提供的获取DOM的方法,虽然可以通过引入jQuery来获取,但是不推荐这样做,具体原因可以看官方文档和网上论坛搜索*这里是在挂载到DOM节点时将button按钮传入clipboard并存储起来,具体原因下面会有详述*/ this.copyBtn = new this.clipboard(this.$refs.copy);},methods: { copyLink() { /*这是点击按钮触发的点击事件,关于clipboard的使用就不再赘述了,上面介绍时已经讲述过,并且使用方法在官方文档上有*/ let _this = this; let clipboard = _this.copyBtn; clipboard.on('success', function() { _this.$message({ /*这是使用了element-UI的信息弹框*/ message: '复制成功!', type: 'success' }); }); clipboard.on('error', function() { _this.$message({ message: '复制失败,请手动选择复制!', type: 'error' }); }); }}
- 对Events的写法解惑及使用clipboard过程中的注意事项:
- 为什么要在mounted周期中把按钮先存储起来?
- 答:经过亲自测试,若在点击事件中再初始话,即把mounted中的内容放到copyLink函数中,那么第一次点击会无效,第二次及以后便能生效,这样肯定是不符合要求的,因此我想了这么一个办法来解决这么一个问题,当然不单单不是mounted周期,放在created和beforeMounted周期应该也是行的,虽然没有亲自测试,但是因为这两个周期已经能获取DOM了,应该是可以的。
- 使用过程中的注意事项
- 使用NPM安装完成之后记得在main.js中引入并注册到Vue原型上,名字可以自己取。
- 使用时通过this + 原型上命名名字来调用clipboard。
- 按钮通过ref的命名来取,就是this.$refs.xxx,不推荐使用jQuery来获取DOM。
- 关于clipboard复制按钮的要求请遵从官方文档要求,例如加上data-clipboard-action和data-clipboard-target等。
使用过程中若有任何疑问,欢迎留言询问!^_^^_^ 不足之处,欢迎各位批评指正!