Zengjing

by Zengjing 2019-03-27

Vue开发札记:如何实现复制文本

复制信息,一个Ctrl+C快捷键操作的交互,看似简单,如何通过JS实现?推荐一款JS插件来解决。

插件官网地址:https://clipboardjs.com

第一步、安装
npm install clipboard --save
第二步、使用

支持绑定至DOM选择器、HTML元素或HTML元素列表。

<button class="tag-id" data-clipboard-text="messageText" @click="copy">立刻复制</button>

实例化以及回调处理:

copy() {
  let clipboard = new Clipboard(".tag-id");
  clipboard.on("success", e => {
    //复制成功
    clipboard.destroy();
  });
  clipboard.on("error", e => {
    //复制失败
    clipboard.destroy();
  });
}

收获点赞: 0

评论

...