Vue实现简单的点击复制功能

主要使用的是 document.execCommand 的 Copy 方法

<template>
  <div>
    <input v-model="copyData"></input>
    <button @click="handleCopy(copyData)">点击复制</button>
  </div>
</template>

<script>
export default {
  name: 'HelloInputWorld',
  data() {
    return {
      copyData: ''
    }
  },
  methods: {
    handleCopy (data) {
      this.copy(data)
    },
    copy (data) {
      let elInput = document.createElement('input')
      elInput.value = data
      document.body.appendChild(elInput)
      // 选择对象
      elInput.select()
      console.log(elInput, elInput.value)
      // 执行浏览器复制命令
      console.log('复制成功')
      document.execCommand("Copy")
      elInput.remove()
    }
  }
}
</script>

<style scoped>
</style>