vue移动端复制黏贴功能

67 篇文章 0 订阅

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>

 

 

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值