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>