vue移動端複製黏貼功能

1.需求：

點擊按鈕，複製電話號碼，用戶在別處可以黏貼之前複製的電話號碼。

2.分析：

最初，使用的input設置opacity：0來實現複製黏貼的功能，可是發現在pc上面可以使用，但是在移動端就不能使用了。

後來又採取了別的方案。

3.移動端親測可行的方案：

html:

<template>
  <div id="clientInfor" v-cloak>
    <!--頭部-->
    <div class="clientInfor-header">
      <div class="company-info">
        <img :src="clientLogo" alt="" class="logo">
        <div class="company-name">{{companyShort}}</div>
        <div class="person-name">{{realName}}</div>
      </div>
      <div class="company-iphone" @click="callIphone">
        <img src="images/phone.png" alt="">
        撥打電話
      </div>
    </div>
    <!--列表信息-->
    <div class="list-item">
      <div class="item-l">正式端口到期日</div>
      <div class="item-r">{{expiredTime}}</div>
    </div>
    <div class="list-item">
      <div class="item-l">開通端口數</div>
      <div class="item-r">{{portTotal}}(餘{{portInventory}})</div>
    </div>
    <div class="list-item">
      <div class="item-l">企業名稱</div>
      <div class="item-r">{{companyName}}</div>
    </div>
    <div class="list-item">
      <div class="item-l">企業簡稱</div>
      <div class="item-r">{{companyShort}}</div>
    </div>
    <div class="list-item">
      <div class="item-l">聯繫人</div>
      <div class="item-r">{{realName}}</div>
    </div>
    <div class="list-item">
      <div class="item-l">聯繫電話</div>
      <div class="item-r" id="phone">{{clientMobile}}</div>
    </div>
    <div class="list-item">
      <div class="item-l">登錄賬號</div>
      <div class="item-r">{{clientName}}</div>
    </div>
    <div class="list-item">
      <div class="item-l">初始密碼</div>
      <div class="item-r">{{clientPass}}</div>
    </div>
    <div class="list-item">
      <div class="item-l">初始必修課單組合</div>
      <div class="item-r">{{packGroupTitle?packGroupTitle:'-'}}</div>
    </div>
    <div class="list-item">
      <div class="item-l">部門功能</div>
      <div class="item-r">{{enableDepartment===0?"關":"開"}}</div>
    </div>
    <div class="list-item">
      <div class="item-l">續費白名單</div>
      <div class="item-r">{{enableReplenishSurvives===0?"關":"開"}}</div>
    </div>
    <div class="toast" v-show="toastFlag">已複製</div>
    <!--對話框-->
    <div :class="{'modal-bj': true,'modal-bj-show': !slideUp, 'modal-bj-hide': slideUp}" v-if="modalFlag" @touchmove.prevent @click.stop="closeModal"></div>
    <div :class="{'modal-picker': true,'modal-pick-up': !slideUp, 'modal-pick-down': slideUp}" v-if="modalFlag">
      <div class="modal-picker-body">
        <div class="call" @click.stop="callAction">撥打 <span>{{clientMobile}}</span></div>
        <div class="copy" @click.stop="copyNumber">複製電話號碼</div>
        <div class="btn" @click.stop="closeModal">取消</div>
      </div>
    </div>
    <message ref="msg" :message="msg"></message>
  </div>
</template>

js:

<script>
  import clientService from 'service/clientInfor';

  export default {
    name: "clientInfor",
    data() {
      return {
        accountType: 0,
        clientId: 0,
        clientLogo: "-",
        clientMobile: "-",
        clientName: "-",
        clientPass: "-",
        companyName: "-",
        companyShort: "-",
        contentGroupTitle: "-",
        enableDepartment: 0,
        enableReplenishSurvives: 0,
        expiredTime: "-",
        packGroupTitle: "-",
        portTotal: 0,
        portInventory: 0,
        realName: "-",
        trialExpiredTime: "-",
        msg: "",
        modalFlag: false,
        slideUp: false,
        toastFlag: false
      }
    },
    mounted: function () {
      this.getDetails();
      document.title = '企業客戶詳情';
    },
    components: {
      message: function (resolve) {
        require(['../components/msg.vue'], resolve);
      }
    },
    methods: {
      /**
       * 獲取企業客戶詳情
       */
      getDetails() {
        var token = this.$route.query.token;
        var param = {
          params: {
            clientId: this.$route.params.id
          }
        };
        clientService.getClientDetails(this, token, param);
      },
      /**
       * 撥打電話
       */
      callIphone() {
        this.slideUp = false;
        this.modalFlag = true;
      },
      callAction() {
        window.location.href = `tel:${this.clientMobile}`;
      },
      /**
       * 剪切文本
       */
      selectText(x) {
        if (document.selection) {
          let range = document.body.createTextRange();
          range.moveToElementText(x);
          range.select();
        } else if (window.getSelection) {
          let selection = window.getSelection();
          let range = document.createRange();
          selection.removeAllRanges();
          range.selectNodeContents(x);
          selection.addRange(range);
        }
      },
      /**
       * 複製電話號碼
       */
      copyNumber() {
        let x = document.getElementById("phone");
        this.selectText(x);
        document.execCommand("copy");
        this.msg = "複製成功";
        this.$refs.msg.show();
        setTimeout(() => {
          this.$refs.msg.close();
        }, 800)
      },
      /**
       * 關閉彈窗
       */
      closeModal() {
        const self = this;
        this.slideUp = true;
        setTimeout(function () {
          self.modalFlag = false;
          self.pickFlag = 'province';
        }, 800);
      }
    }
  }
</script>