vue 使用clipboard實現移動端一鍵複製

(1)執行命令,我是鏡像npm

 cnpm install clipboard --save

(2) main.js中加

import clipboard from 'clipboard';
Vue.prototype.clipboard = clipboard;

(3) .vue文件

      <yd-cell-group>
        <yd-cell-item>
          <yd-textarea slot="right" placeholder="此處生成API鏈接"  v-model="link"></yd-textarea>//要輸入框的內容
        </yd-cell-item>
        <div class="buy_btn2">
          <yd-button
            size="small"
            type="primary"
            shape="circle"
            @click.native="copyRes" //觸發函數
            class="api_btn1" //獲取dom
            data-clipboard-action="copy" //必加
            :data-clipboard-text="link(複製的內容)" //必加
          >複製鏈接</yd-button>
        </div>
      </yd-cell-group>

    //複製函數
      copyRes() {
      let _this = this;
      let clipboardObj = new this.clipboard(".api_btn1");
      clipboardObj.on("success", function() {
        _this.$dialog.notify({
          mes: "已複製到黏貼版,快去使用吧",
          timeout: 5000,
          callback: () => {
            console.log("我走咯！");
          }
        });
      });
      clipboardObj.on("error", function() {
        _this.$dialog.notify({
          mes: "複製失敗",
          timeout: 5000,
          callback: () => {
            console.log("我走咯！");
          }
        });
      });
    },

(4) 我用的yd是UI框架，不需要複製，拿函數就行