广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue实现点击复制到粘贴板
  • 221
分享到

vue实现点击复制到粘贴板

2024-04-02 19:04:59 221人浏览 安东尼
摘要

本文实例为大家分享了Vue实现点击复制到粘贴板的具体代码,供大家参考,具体内容如下 背景: 业务开发中遇到,点击复制内容到粘贴板的需求,记录一下 效果: 关键代码: copyTex

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: vue实现点击复制到粘贴板

本文链接: https://www.lsjlt.com/news/165746.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue实现点击复制到粘贴板
    本文实例为大家分享了vue实现点击复制到粘贴板的具体代码,供大家参考,具体内容如下 背景: 业务开发中遇到,点击复制内容到粘贴板的需求,记录一下 效果: 关键代码: copyTex...
    99+
    2022-11-13
  • Webjs实现复制文本到粘贴板
    本文实例为大家分享了Web js实现复制文本到粘贴板的具体代码,供大家参考,具体内容如下 一、简述 记--简单用js实现将元素的文本内容复制到粘贴板。 二、效果 三、代码 <...
    99+
    2022-11-13
  • jQuery如何实现复制到粘贴板功能
    这篇文章主要为大家展示了“jQuery如何实现复制到粘贴板功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“jQuery如何实现复制到粘贴板功能”这篇文章吧。用...
    99+
    2022-10-19
  • js复制文本到粘贴板(Clipboard.writeText())
    目录复制文本到粘贴板(Clipboard.writeText())网上的代码clipboard.jsClipboard.writeText()复制内容到剪贴板(无插件,兼容所有浏览器...
    99+
    2022-11-13
  • vue如何实现粘贴复制功能
    这篇文章主要介绍了vue如何实现粘贴复制功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。引言项目中如果实现粘贴复制功能,目前市面上共有三种方法,均有利有弊,大家可以根据自己...
    99+
    2023-06-29
  • JS代码如何实现粘贴板复制功能
    这篇文章将为大家详细讲解有关JS代码如何实现粘贴板复制功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。使用剪贴板是一项基本技能。作为码农都应知道, Tab , Ctrl...
    99+
    2022-10-19
  • Vim如何实现复制粘贴
    这篇文章将为大家详细讲解有关Vim如何实现复制粘贴,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。最近使用Vim来写博客,发现在Vim中粘贴Python代码后,缩进就全乱了。仔细研究了以下,原来是自动缩进的...
    99+
    2023-06-13
  • ubuntu如何实现复制粘贴
    ubuntu实现复制粘贴的方法:在KDE/Gnome下:复制命令:Ctrl + C粘贴命令:Ctrl + V在终端下:复制命令:Ctrl + Shift + C 组合键粘贴命令:Ctrl + Shift + V 组合键在控制台下:复制命令:...
    99+
    2022-10-14
  • vue粘贴复制功能的实现过程记录
    目录引言1. 项目需求图展示:1. 安装第三方插件方法(不推荐)2. 浏览器自带Document.execCommand()复制方法(不推荐)3. Clipboard.writeTe...
    99+
    2022-11-13
  • python3+PyQt5实现使用剪贴板做复制与粘帖示例
    本文是对《Python Qt GUI快速编程》的第10章的例子剪贴板用Python3+PyQt5进行改写,分别对文本,图片和html文本的复制与粘帖,三种做法大同小异。 #!/usr/bin/env p...
    99+
    2022-06-04
    剪贴板 示例
  • js 剪切、复制、粘贴功能实现
    针对现代浏览器实现(Navigator.clipboard) Navigator.clipboard API可以用来访问系统剪贴板,可以实现【剪切、复制、粘贴】功能。该 API 被设...
    99+
    2023-05-18
    js 剪切 js复制 js粘贴
  • javaScript如何实现复制粘贴功能
    小编给大家分享一下javaScript如何实现复制粘贴功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! ...
    99+
    2022-10-19
  • 如何用python实现复制粘贴功能
    目录楔子实现复制实现粘贴macOS实现复制粘贴Linux实现复制粘贴楔子 pandas里面有这么一个方法:pd.read_clipboard,可以根据你复制的内容生成DataFra...
    99+
    2022-11-11
  • 怎么用python实现复制粘贴功能
    这篇文章主要介绍“怎么用python实现复制粘贴功能”,在日常操作中,相信很多人在怎么用python实现复制粘贴功能问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”怎么用python实现复制粘贴功能”的疑惑有所...
    99+
    2023-06-08
  • Python实现强制复制粘贴的示例详解
    目录前因后果流程思路代码展示效果展示前因后果 公司有人阳了,今天在家上班,突然小姨子就问我有没有baidu文库会员,想下载点东西,我心想这还要会员?用Python不是分分钟的事情! ...
    99+
    2022-12-19
    Python强制复制粘贴 Python 复制粘贴
  • JS如何实现复制内容到剪贴板功能
    这篇文章主要为大家展示了“JS如何实现复制内容到剪贴板功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JS如何实现复制内容到剪贴板功能”这篇文章吧。前记:本来...
    99+
    2022-10-19
  • JavaScript实现一键复制内容剪贴板
    目录引言代码实现效果引言 有时候为了方便用户快速复制页面的内容,一般的做法就是添加一个按钮给用户点击一下就复制下来了,这边使用JavaScript原生的方法进行设置剪贴板。 代码 c...
    99+
    2022-11-13
  • 如何通过禁用JavaScript的方式实现复制粘贴
    这篇文章给大家分享的是有关如何通过禁用JavaScript的方式实现复制粘贴的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。早上起来睁开眼,诶呀,考试周又到了。各个科目的期中作业都在各自的平台陆续发布了。各种乱七八...
    99+
    2023-06-14
  • 详解如何使用Python实现复制粘贴的功能
    目录楔子Windows 上的复制粘贴macOS 上的复制粘贴Linux 上的复制粘贴pyperclip 实现复制粘贴楔子 pandas 里面有一个 pd...
    99+
    2023-01-03
    Python实现复制粘贴功能 Python复制粘贴 Python复制 Python粘贴
  • 怎么用vbscript实现将脚本的输出复制到剪贴板
    本篇内容主要讲解“怎么用vbscript实现将脚本的输出复制到剪贴板”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么用vbscript实现将脚本的输出复制到剪贴板”吧!代码如下:strCopy...
    99+
    2023-06-08
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作