Clipboard 自动复制功能，ios复制失败，换方案 user-select: text ;长按复制 （ios 兼容，长按复制）
Posted 假装学习
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Clipboard 自动复制功能，ios复制失败，换方案 user-select: text ;长按复制 （ios 兼容，长按复制）相关的知识，希望对你有一定的参考价值。
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>
以上是关于Clipboard 自动复制功能，ios复制失败，换方案 user-select: text ;长按复制 （ios 兼容，长按复制）的主要内容，如果未能解决你的问题，请参考以下文章