<p>{{text}}</p>
<div @click="copeText()"></div>
data() {
return {
text: '我是复制文本'
}
},
methods: {
copeText() {
// 数字没有 .length 不能执行selectText 需要转化成字符串
const textString = this.text.toString()
let input = document.querySelector('#copy-input')
if (!input) {
input = document.createElement('input')
input.id = 'copy-input'
input.readOnly = 'readOnly' // 防止ios聚焦触发键盘事件
input.style.position = 'absolute'
input.style.left = '-1000px'
input.style.zIndex = '-1000'
document.body.appendChild(input)
}
input.value = textString
// ios必须先选中文字且不支持 input.select();
this.selectText(input, 0, textString.length)
if (document.execCommand('copy')) {
document.execCommand('copy')
const toast = this.$createToast({
time: 1000,
txt: '复制成功',
type: 'correct'
})
toast.show()
} else {
console.log('不兼容')
}
input.blur()
},
// input自带的select()方法在苹果端无法进行选择，所以需要自己去写一个类似的方法
// 选择文本。createTextRange(setSelectionRange)是input方法
selectText(textbox, startIndex, stopIndex) {
if (textbox.createTextRange) { // ie
const range = textbox.createTextRange()
range.collapse(true)
range.moveStart('character', startIndex)// 起始光标
range.moveEnd('character', stopIndex - startIndex)// 结束光标
range.select()// 不兼容苹果
} else { // firefox/chrome
textbox.setSelectionRange(startIndex, stopIndex)
textbox.focus()
}
}
}
