Vue+原生JS实现点击粘贴到剪贴板

需求描述

用户点击某个div，可以复制该div里面的内容，并提示用户复制成功。

步骤

1、给div绑定点击事件

2、在页面中写一个输入框，并做如下设置

<!-- 这个输入框放在最后面就行 -->
<input id="input-box" type="text" ref="inputBox" v-model="message" style="display:none;opacity:0" />

<style>
	#input-box {
		display: none;
		opacity: 0;
	}
</style>
           

3、点击div的时候，获取div里面的内容，并赋值给input组件

copy2ClipBoard(e) {
	this.$refs.inputBox.style.display = "block"
	this.message = e.target.innerHTML
	setTimeout(()=>{
      this.$refs.inputBox.select()
      document.execCommand("Copy")
      this.$refs.inputBox.style.display = "none"
      window.alert("复制成功")
    }, 0)
}
           

提示

要注意以下几点：

1、使用select()等方法，要求input框的display属性值不能为none，所以要在select()执行之前先把display属性修改了，最后再改回去。

2、使用select()方法，要把这个代码放在一个计时器内。如果不放在计时器内，select()会首先执行，然后才会执行

this.message = e.target.innerHTML

，具体原因没去探究，反正最开始我没有放在setTimeout()里面的时候，select总是先于赋值执行，导致每一次复制的文本都是上一次出现在输入框中的文本。