vue实现复制功能

原创于 2022-08-26 22:02:00 发布 · 410 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #javascript #前端

web端专栏收录该内容

29 篇文章

订阅专栏

本文介绍了一种使用Vue.js实现文本复制功能的方法。通过在模板中添加一个按钮，并为该按钮绑定点击事件，当用户点击时，会触发复制功能。具体实现方式是创建一个隐藏的输入框，将要复制的内容赋值给输入框的value属性，然后选中并执行复制命令。

vue实现复制功能

效果图
在这里插入图片描述

实现方法
template

<template>
  <div class="layout">
    <p>{{ name }}</p>
    <el-button type="text" @click="copySn(name)">
      复制
    </el-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      name: '土豆2'
    }
  },
  methods: {
    // 复制按钮
    copySn (item) {
      // 创建输入框元素
      const cInput = document.createElement('input')
      // 将需要复制的值赋值给输入框的value值
      cInput.value = item
      // 页面底部添加输入框
      document.body.appendChild(cInput)
      // 选中输入框
      cInput.select()
      // 执行浏览器复制命令
      document.execCommand('copy')
      this.$message({ message: '复制成功', type: 'success' })
      // 移除输入框
      document.body.removeChild(cInput)
    }
  }
}
</script>