Clipboard 自动复制功能，嵌套app内跳转的页面，ios 自动复制失败（该ios机子,微信，浏览器打开复制没有问题） 暂时换方案 user-select: text ;长按复制 （ios 兼容低版本，长按复制） 最好的 方案是让 app 给出原生复制的 方法。直接调用 可 自动复制 <div class="item-detail"> <div class="line" style> <!-- user-select: text !important; 可复制文字 --> <div style="user-select: text !important;">订单编号：{{item.order_no}}</div> <div class="line" >原因：{{item.refuse}}</div> </div> <div> <button class="tag-read" @click="copyText(item.order_no)" style="cursor: pointer" id="foo" data-clipboard-action="copy" :data-clipboard-text="item.order_no" >复制单号</button> </div> </div>
<script> import Clipboard from "clipboard"; export default { name: "order", data() { return { orderData: [], pageVal: 1, pageSize: 10, pageTotal: 0, loading: true, isLoading: false, form: { user_id: this.$route.query.user_id, status: 0, pageIndex: 1 } }; }, created() { this.form.pageIndex = 0; this.orderData = []; }, methods: { /* eslint-disable */ getList() { var order = []; this.$api.order(this.form).then(res => { if (!res.success) { util.toast(res.msg); } else if (res.data) { order = res.data.data.data; order.forEach(item => { this.orderData.push(item); }); this.dataTotal = res.data.data.dataTotal; this.pageSize = res.data.data.pageSize; this.pageTotal = res.data.data.pageTotal;
this.loading = true; // 当还有多余的数据时，将无限滚动给打开 ，就是可以继续滚动去请求后台 this.isLoading = true; if (this.pageTotal == this.form.pageIndex) { this.loading = false; this.isLoading = false; } if (this.pageTotal == 0) { this.cardListEmpty = true; } } }); }, copyText(text) { var clipboard = new Clipboard(".tag-read", { text: function(trigger) { return text; // 返回需要复制的内容 } }); clipboard.on("success", e => { util.toast("复制成功!"); // 释放内存 clipboard.destroy(); }); clipboard.on("error", e => { // 不支持复制 util.toast("请长按进行手动复制!"); // 释放内存 clipboard.destroy(); }); }, loadMore() { if (this.pageTotal == this.form.pageIndex && this.form.pageIndex != 0) { this.loading = false; // 将无限滚动关闭 this.isLoading = false; return; } setTimeout(() => { //发送请求有时间间隔第一个滚动时间结束后才发送第二个请求 this.form.pageIndex ; this.getList(); }, 500); }, }; </script> // 父元素加个-webkit-user-select:text;才有效，单独子元素即使加-webkit-user-select:text!important也无效 <style lang="scss" scoped> .item-detail { -webkit-user-select: text; -moz-user-select: text; -o-user-select: text; -ms-user-select: text; user-select: text; } </style>