How does vue realize the copy function

Foreword:

        Implement the copy function in vue.

method:

1. Page

<input type="text" v-model="msg" />
<div class="text_div" @click="copyText">点击我可以复制:{
   
   { msg }}</div>

2. Method, you only need to modify the this.msg field

copyText() {
      let inputDom = document.createElement('textarea') // js创建一个文本框
      document.body.appendChild(inputDom) //将文本框暂时创建到实例里面
      inputDom.value = this.msg //将需要复制的内容赋值到创建的文本框中
      inputDom.select() //选中文本框中的内容
      inputDom.focus()
      document.execCommand('copy') //执行复制操作
      document.body.removeChild(inputDom) //最后移出
      this.$message.success('复制成功')
    },

Guess you like

Origin blog.csdn.net/weixin_44727080/article/details/131849136