解决clipboard.js在IOS上无法复制异步获取的文本的问题

---

一、问题详情

使用clipboard.js复制从接口异步获取的文本时，PC及安卓都正常。在IOS中提示复制成功但实际剪切板中无文本。

---

二、解决方案

• 思绪：
  
  
  
  • 将触发复制元素和传入ClipboardJs构造函数的元素分开，期望在异步获取文本后，再同步触发传入ClipboardJs构造函数的元素的点击事件，发现这只能解决在PC和安卓中异步复制的问题，但IOS中依然无法生效。
    
  • 基于上面的思绪，决定在点击触发复制元素，异步获取文本，在IOS中再次用代码触发复制元素的点击事件，代码如下：
    
  
  
• HTML代码
  

1.   <button id="copy-btn" @click="onCopy">复制文本</button>
2.   <div id="copy-div" />

复制代码

• vuejs代码
  

1. export default {
2.         data() {
3.                 return {
4.                         copyStr: ''
5.                 }
6.         },
7.         mounted() {
8.                 const that = this
9.                 this.clipboard = new ClipboardJS('#copy-div', {
10.                         text() {
11.                                 return that.copyStr
12.                         }
13.                 })
14.                 this.clipboard.on('success', () => {
15.                         console.log('success')
16.                 })
17.                 this.clipboard.on('error', () => {
18.                         console.log('error')
19.                 })
20.         },
21.         methods: {
22.                 onCopy() {
23.                         if (this.copyStr) {
24.                                 document.getElementById('#copy-div').click()
25.                         } else {
26.                                 // simulate asynchronous behavior
27.                                 setTimeout(() => {
28.                                         this.copyStr = 'helloWord'
29.                                         if (isIOS) {
30.                                                 document.getElementById('#copy-btn').click()
31.                                         } else {
32.                                                 document.getElementById('#copy-div').click()
33.                                         }
34.                                 }, 1000)
35.                         }
36.                 }
37.         }
38. }

复制代码

---

三、总结

• 不算完美的方案，但算解决了问题。
  
• 不足之处，多次触发点击事件，代码不敷优雅。
  
• 如有更好方式接待评论交换！
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。