clipboard.js - 移动端的复制

hey ~ 我是肥阳，后期会持续更新，请记得点赞支持哟

此文主要讲述如何在 vue-cli 搭建的项目中用 vue 结合 clipboard.js 实现移动端的 复制 需求

• 引入 clipboard.js
  npm install clipboard --save

• 在须要实现复制需求的 .vue 页面中使用
  import Clipboard from 'clipboard';

• 绑定须要复制的内容 第一种：

<p>{{msg}}</p>
<button class="copyBtn" data-clipboard-text="msg" @click="copy('.copyBtn')">点击复制</button>
复制代码

第二种：

<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">

<button class="btn" data-clipboard-target="#foo" @click="copy('btn')">
    <img src="assets/clippy.svg" alt="Copy to clipboard">
</button>
复制代码

• 实现复制

copy(type) {
      const clipboard = new Clipboard(type);
      // eslint-disable-next-line
      clipboard.on('success', e => {
        const toast = this.$createToast({
          time: 1000,
          txt: '复制成功',
          type: 'correct',
        });
        toast.show();
        clipboard.destroy();
      });
      // eslint-disable-next-line
      clipboard.on('error', e => {
        const toast = this.$createToast({
          time: 2000,
          type: 'warn',
          txt: '请长按进行手动复制',
        });
        toast.show();
        clipboard.destroy();
      });
    },
复制代码

更多详情请前往官网文档：clipboardjs.com/#example-ta…
中文网： www.clipboardjs.cn/