18 Dec 2017 18:53 +0000

Vue 拷贝特定内容到剪切板有一个专门的库 vue-clipboard, 但是不太好用, 而且很简单的功能引入一个库代价太大, 可以自己用几句代码简单实现下.

data () {
  return {
    copyContent: '我是要复制的内容'
  }
},
methods: {
  tryCopy () {
    const faker = document.createElement('textarea')
    faker.style.visibility = 'none'
    faker.style.position = 'fixed'
    faker.style.top = 0
    faker.style.left = 0
    faker.style.zIndex = -9999
    faker.setAttribute('readonly', '') // 防止移动端弹出输入法
    faker.value = this.copyContent

    document.body.appendChild(faker)

    faker.focus()
    faker.setSelectionRange(0, this.copyContent.length)

    try {
      document.execCommand('copy')
      alert('拷贝成功!')
    } catch (err) {
      alert('Oops, 看起来您的浏览器不支持自动拷贝, 请选中以上文字复制吧')
    } finally {
      document.body.removeChild(faker)
    }
  }
}

Loading comments...