vue怎么实现点击复制到粘贴板

今天小编给大家分享一下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怎么实现点击复制到粘贴板”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。