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/