原生JS和JQuery都有很多种实现剪贴板复制功能的方法,既然用到Vue了,当然要试一下新的方法。在npm里搜索了一下,发现Vue实现剪贴板功能的插件有非常多,我就选了vue-clipboard2这个插件。
vue-clipboard2的使用方法很简单
-
- 引入vue-clipboard2.js
- script里定义点击事件(蓝色字体就是vue-clipboard2剪贴板复制功能的代码):
- copyPath: function(index) {
- let path = this.tableData[index].path;
- let fullPath = location.protocol + "//" + window.location.host + path.substring(2, path.length);
- this.txt = fullPath;
- console.log(fullPath);
- this.$copyText(this.txt).then(function(e) {
- vm.$notify({
- title: '复制成功!',
- message: '',
- type: 'success'
- });
- console.log(e);
- }, function(e) {
- vm.$notify.error({
- title: '复制失败!',
- message: ''
- });
- console.log(e)
- })
- }
- 给某个按钮绑定以上点击事件即可
npm地址:https://www.npmjs.com/package/vue-clipboard2