解决clipboard.js在IOS上无法复制异步获取的文本的问题
一、问题详情使用clipboard.js复制从接口异步获取的文本时，PC及安卓都正常。在IOS中提示复制成功但实际剪切板中无文本。
二、解决方案
[*]思绪：
[*]将触发复制元素和传入ClipboardJs构造函数的元素分开，期望在异步获取文本后，再同步触发传入ClipboardJs构造函数的元素的点击事件，发现这只能解决在PC和安卓中异步复制的问题，但IOS中依然无法生效。
[*]基于上面的思绪，决定在点击触发复制元素，异步获取文本，在IOS中再次用代码触发复制元素的点击事件，代码如下：
[*]HTML代码
<button id="copy-btn" @click="onCopy">复制文本</button>
<div id="copy-div" />
[*]vuejs代码
export default {
data() {
return {
copyStr: ''
}
},
mounted() {
const that = this
this.clipboard = new ClipboardJS('#copy-div', {
text() {
return that.copyStr
}
})
this.clipboard.on('success', () => {
console.log('success')
})
this.clipboard.on('error', () => {
console.log('error')
})
},
methods: {
onCopy() {
if (this.copyStr) {
document.getElementById('#copy-div').click()
} else {
// simulate asynchronous behavior
setTimeout(() => {
this.copyStr = 'helloWord'
if (isIOS) {
document.getElementById('#copy-btn').click()
} else {
document.getElementById('#copy-div').click()
}
}, 1000)
}
}
}
}
三、总结
[*]不算完美的方案，但算解决了问题。
[*]不足之处，多次触发点击事件，代码不敷优雅。
[*]如有更好方式接待评论交换！
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]