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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue粘贴复制功能的实现过程记录

    vue粘贴复制功能的实现过程记录

    目录 引言 1. 项目需求图展示: 1. 安装第三方插件方法(不推荐) 2. 浏览器自带Document.execCommand()复制方法(不推荐) 3. Clipboard.writeText方法(强烈推荐) 总结 引言 项目中如果实现粘贴复制功能,目前市面上共有三种方法,均有利有弊,大家可以根据自己项目实际情况依次选择.本节将都会对这三种方法做详细阐述,重点推荐第三种方法. 1. 项目需求图展示: 1. 安装第三方插件方法(不推荐) 这种方法兼容性很好,如果项目只使用了一次,不建议使用.

  • Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)

    使用教程(注意细看总结部分,写了几点,希望有所帮助): 1.安装插件:npm install vue-quill-editor 2.安装插件依赖:npm install quill 3.main.js文件中引入: import Vue from 'vue' import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' impor

  • vue 实现复制内容到粘贴板clipboard的方法

    1 . npm安装到项目目录文件中 npm install clipboard --save 2 . import 引入文件 import Clipboard from 'clipboard'; 3 . 在需要html元素中的自定义属性中data-clipboard-text 中写入要复制的内容 <button class="copyBtn" :data-clipboard-text = "https://www.baidu.com/" type="

  • vue实现点击复制到粘贴板

    vue实现点击复制到粘贴板

    本文实例为大家分享了vue实现点击复制到粘贴板的具体代码,供大家参考,具体内容如下 背景: 业务开发中遇到,点击复制内容到粘贴板的需求,记录一下 效果: 关键代码: copyText() {       const oInput = document.createElement('input')       oInput.value = this.textarea       document.body.appendChild(oInput)       oInput.select()    

  • js实现点击图片将图片地址复制到粘贴板的方法

    本文实例讲述了js实现点击图片将图片地址复制到粘贴板的方法.分享给大家供大家参考.具体如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml

  • Golang中生成随机字符串并复制到粘贴板的方法

    前段时间在生活中偶尔需要对某些文件进行重命名,而且是随机名字,刚 开始是手动重命名然后在键盘上胡乱打一些字母数字,时间长了发现也挺麻烦的,于是想到能不能用golang实现这个功能并且自动把生成的字符串 复制到粘贴板,然后生成exe文件,要用的是直接鼠标双击就行.说干就干. 网上搜了些相关资料,于是写了出来. 安装必要的库 go get github.com/atotto/clipboard 代码实现 package main import ( "fmt" "github.co

  • js 实现复制到粘贴板的功能代码

    他主要有两个参数:第一个是设置要复制的是一段文本,第二个参数是要复制具体的内容,这个内容可以从文本框中或使用innerHTML获取. 简单的实例代码: 复制代码 代码如下: <script type="text/javascript"> function copyData() { var copyText = document.getElementById("ctl00_cpRight_txtUrl").value; window.clipboardDa

  • jQuery实现复制到粘贴板功能

    项目中突然需要使用复制功能,在网上搜索了下看到了ZeroClipboard插件,好用,但是也有局限.用法如下: 1.引用jquery.zclip.js.swf文件. demo地址:https://github.com/chaoli920029342/jquery_copy 2.初始化 <body> <input type="text" name="text" id="text" value="http://www.ba

  • JavaScript实现复制内容到粘贴板代码

    最近做了一个前端项目,其中有需求:通过button直接把input或者textarea里的值复制到粘贴板里.下面小编把我实现思路及代码分享给大家,大家可以直接引入项目中. 具体代码如下所示: function copyToClipboard(elem) { // create hidden text element, if it doesn't already exist var targetId = "_hiddenCopyText_"; var isInput = elem.tag

  • Web js实现复制文本到粘贴板

    Web js实现复制文本到粘贴板

    本文实例为大家分享了Web js实现复制文本到粘贴板的具体代码,供大家参考,具体内容如下 一.简述 记--简单用js实现将元素的文本内容复制到粘贴板. 二.效果 三.代码 <!DOCTYPE html> <html>   <head>     <meta charset="utf-8" />     <title>js复制内容到粘贴板</title>     <script type="text/j

  • CMD里或登陆远程linux服务器时命令行下复制和粘贴实现方法

    如果要在CMD中复制的话,必须通过鼠标. 复制:要先标记(在CMD中击鼠标右键)要复制的内容(或者称是范围),然后鼠标点击右键或按回车(或Ctrl+C)即可复制完成. 粘贴:击右键粘贴即可把复制到粘贴板上的内容粘贴到CMD中. putty登陆远程大型机 复制:双击选中或鼠标拖动选中要复制的内容 粘贴:点右键直接粘贴 Xshell登陆远程大型机 复制:光标选中要复制的内容,按Ctrl+Insert 粘贴:Shift+Insert

  • H5 js点击按钮复制文本到粘贴板

    本文实例为大家分享了js点击按钮复制文本到粘贴板的具体代码,供大家参考,具体内容如下 准备:先去下载clipboard.js: 官网 移动端效果如下: 应用:html+js 代码如下: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wid

随机推荐