vue实现点击复制到粘贴板

Tallulah ·

更新时间:2024-11-13

· 1243 次阅读

本文实例为大家分享了vue实现点击复制到粘贴板的具体代码，供大家参考，具体内容如下

背景：业务开发中遇到，点击复制内容到粘贴板的需求，记录一下

效果：

关键代码:

copyText() {
      const oInput = document.createElement('input')
      oInput.value = this.textarea
      document.body.appendChild(oInput)
      oInput.select()
      document.execCommand('Copy')
      this.$message({
        message: '复制成功',
        type: 'success'
      })
      oInput.remove()
}

代码：以下是完整代码

<template>
  <div class="white-body-view">
    <el-row>
      <el-col :span="22">
        <el-input
          v-model="textarea"
          type="textarea"
          resize="none"
          :rows="3"
          placeholder="请输入内容"
        />
      </el-col>
      <el-col :span="2">
        <el-tooltip class="item" effect="dark" content="复制" placement="top">
          <i class="el-icon-document-copy primary-icon" @click="copyText" />
        </el-tooltip>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      textarea: '测试内容'
    }
  },
  methods: {
    copyText() {
      const oInput = document.createElement('input')
      oInput.value = this.textarea
      document.body.appendChild(oInput)
      oInput.select()
      document.execCommand('Copy')
      this.$message({
        message: '复制成功',
        type: 'success'
      })
      oInput.remove()
    }
  }
}
</script>
<style lang="scss">
.primary-icon {
  cursor: pointer;
  color: #409eff;
  margin-left: 10px;
}
</style>

VUE 粘贴

1024 个赞