复制粘贴功能按钮实现[vue.js]

需求：点击复制按钮，实现复制粘贴功能。

data return中表格数据：

tableColumns: [
        {
          title: 'Token',
          key: 'token',
          width: 400,
          render: (h, params) => {
            let token = params.row.token
            let tokenLenth = params.row.token.length
            let tokenCont = params.row.token.substring(0, 20) + '......' + params.row.token.substring(tokenLenth - 20, tokenLenth)
            return h('div', [
              h('Button', {
                props: { type: 'success', size: 'small', icon: 'ios-copy' },
                style: { marginRight: '4px', float: 'left' },
                on: { click: () => { this.copyToken(token) } } }, '复制'),
              h('div', { style: { fontSize: '1%', float: 'left' } }, tokenCont)
            ])
          }
        },
    ]

 

method方法：

methods: {
    copyToken (data) {
      let url = data
      let oInput = document.createElement('input')
      oInput.value = url
      document.body.appendChild(oInput)
      oInput.select() // 选择对象
      console.log(oInput.value)
      document.execCommand('Copy') // 执行浏览器复制命令
      this.$message({
        message: '已成功复制到剪切板',
        type: 'success'
      })
      oInput.remove()
    }
}

转自：https://blog.csdn.net/namechenfl/article/details/85160549