vue移動端開發實現點擊復制

1、引入clipboard

npm install clipboard --save

2、使用的頁面引入

// 剪切板插件
import Clipboard from "clipboard";

3、有兩種實現方式（分為固定的數據和列表循環數據動態化）

（1）第一種

頁面內容為：

        <div class="list">
          <p class="name">公司名稱</p>
          <p class="value">
            <span>{{ invoiceInformation.companyName }}</span>
            <v-button
              mini
              plain
              type="primary"
              class="copy_btn"
              id="companyName"
              :data-clipboard-text="invoiceInformation.companyName"
              @click.native="copyFn('#companyName', '公司名稱')"
              >復制</v-button>
          </p>
        </div>

js代碼為：

    copyFn(id, title) {
      let clipboard = new Clipboard(id);
      let _this = this;
      this.$nextTick(() => {
        clipboard.on("success", function(e) {
          _this.$showPosition(title + "已復制");
          clipboard.destroy();
        });
        clipboard.on("error", function(e) {
          console.log("不支持復制功能哦！");
          clipboard.destroy();
        });
      });
    }

（2）第二種

頁面內容為：

            <div class="baseInfo_item" v-for="item,index in waybillList" :key="index">
              <span>運單{{index+1}}：</span>
              <div class="right inline" :id="'copy-btn' + index" data-clipboard-action="copy"
                :data-clipboard-target="'#share-code'+index" @click="copyWaybillNo('#copy-btn' + index)">
                <span :id="'share-code' + index">{{item.waybillno}}</span>
                <img class="copy-icon" src="../assets/images/prePay/copy-icon.png" />
              </div>
            </div>

js代碼內容：

      copyWaybillNo(id) {
        let clipboard = new Clipboard(id);
        let _this = this;
        this.$nextTick(() => {
          clipboard.on('success', function (e) {
            _this.$toast("運單號已復制");
            clipboard.destroy();
          });
          clipboard.on('error', function (e) {
            console.log('您的瀏覽器不支持點擊復制');
            clipboard.destroy();
          });
        });
      }