vue实现点击复制到粘贴板

 更新时间:2022年08月23日 11:02:49   作者:王博wangbo  
这篇文章主要为大家详细介绍了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 二级路由嵌套和二级路由高亮问题

    浅谈vue 二级路由嵌套和二级路由高亮问题

    这篇文章主要介绍了浅谈vue 二级路由嵌套和二级路由高亮问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • Vue使用swiper问题(5.2.0版本,避免踩坑)

    Vue使用swiper问题(5.2.0版本,避免踩坑)

    这篇文章主要介绍了Vue使用swiper问题(5.2.0版本,避免踩坑),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • Vue ECharts直角坐标系配置详细讲解

    Vue ECharts直角坐标系配置详细讲解

    数据的重要性我们大家都知道,就算再小的项目中都可能使用几个图表展示,我最近在做项目的过程中也是需要用到图表,最后选择了echarts图表库
    2022-12-12
  • Vue新一代状态管理工具Pinia的具体使用

    Vue新一代状态管理工具Pinia的具体使用

    本文主要介绍了Vue新一代状态管理工具Pinia的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • vue使用Print.js打印页面样式不出现的解决

    vue使用Print.js打印页面样式不出现的解决

    这篇文章主要介绍了vue使用Print.js打印页面样式不出现的解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • vue.js template模板的使用(仿饿了么布局)

    vue.js template模板的使用(仿饿了么布局)

    这篇文章主要介绍了vue.js template模板的使用,主要是模仿饿了么布局,用到了4个组件,分别是header.vue,goods.vue,ratings.vue,seller.vue,感兴趣的朋友跟随脚本之家小编一起看看实现代码
    2018-08-08
  • 基于Vue中使用节流Lodash throttle详解

    基于Vue中使用节流Lodash throttle详解

    今天小编就为大家分享一篇基于Vue中使用节流Lodash throttle详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • vue如何通过$router.push传参数

    vue如何通过$router.push传参数

    这篇文章主要介绍了vue如何通过$router.push传参数,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • 详解如何用模块化的方式写vuejs

    详解如何用模块化的方式写vuejs

    这篇文章主要介绍了详解如何用模块化的方式写vuejs,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • 如何在vue3中使用滑块检验vue-puzzle-verification

    如何在vue3中使用滑块检验vue-puzzle-verification

    这篇文章主要介绍了在vue3中使用滑块检验vue-puzzle-verification的相关资料,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-11-11

最新评论