解决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)
			}
		}
	}
}

---

三、总结

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