关于vue.js:项目中复制功能

6次阅读

共计 681 个字符,预计需要花费 2 分钟才能阅读完成。

1. 开发环境 vue
2. 电脑系统 windows10 专业版
3. 在开发的过程中, 咱们可能会遇到复制的性能, 上面我来分享一下我遇到的问题和解决办法, 心愿对你有帮忙。
4. 对于复制性能, 我是通过 clipboard.js 进行解决的:

http://www.clipboardjs.cn/
// 第一步: 进行装置 ,npm 命令为:
npm install clipboard --save

5. 我来分享一下简略的应用:

一个很常见的用例是从另外以一个元素复制内容。你能够给指标元素增加一个 data-clipboard-target 属性来实现这个性能。这个属性的值就是能匹配到另一个元素的选择器, 上面是简略的应用

 代码:
<input id="foo" value="欢送来灰太狼的情与殇主页">
<button class="btn" data-clipboard-target="#foo" data-clipboard-action="copy" @click="chencopy"> 复制 </button>
// 在 methods 中增加如下代码:
chencopy() {let clipboard = new this.clipboard(".btn");
    clipboard.on("success", function (e) {console.info("复制胜利");
    console.info(e);
    });
    clipboard.on("error", function () {console.error("复制失败");
    });
},

成果如下:

6. 本期的分享到了这里就完结啦, 是不是很 nice, 心愿对你有所帮忙, 让咱们一起致力走向巅峰!

正文完
 0