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

目录
  • 引言
  • 1. 项目需求图展示：
  • 1. 安装第三方插件方法（不推荐）
  • 2. 浏览器自带Document.execCommand()复制方法（不推荐）
  • 3. Clipboard.writeText方法（强烈推荐）
  • 总结

引言

项目中如果实现粘贴复制功能，目前市面上共有三种方法，均有利有弊，大家可以根据自己项目实际情况依次选择。本节将都会对这三种方法做详细阐述，重点推荐第三种方法。

1. 项目需求图展示：

1. 安装第三方插件方法（不推荐）

这种方法兼容性很好，如果项目只使用了一次，不建议使用。

安装插件

npm install clipboard --save

引入插件

import Clipboard from 'clipboard';

项目中使用

<template>
    <span class="copy" @click="onCopy">
        <i class="iconfont iconcopy"></i>
        <span>点击复制</span>
    </span>
</template>

<script>
    methods: {
        onCopy(){
             let clipboard = new Clipboard('.copy')
             clipboard.on('success', e => {
               console.log('复制成功')
               // 释放内存
               clipboard.destroy()
             })
             clipboard.on('error', e => {
               // 不支持复制
               console.log('该浏览器不支持自动复制')
               // 释放内存
               clipboard.destroy()
             })
           }
    }
</script>

2. 浏览器自带Document.execCommand()复制方法（不推荐）

虽然这个方法不需要安装插件，但是官网申明如下：

项目中使用

<script>
    methods: {
        onCopy(){
            //创建一个input框
            const input = document.createElement("input")
            //将指定的DOM节点添加到body的末尾
            document.body.appendChild(input)
            //设置input框的value值为直播地址
            input.setAttribute("value", e)
            //选取文本域中的内容
            input.select()
            //copy的意思是拷贝当前选中内容到剪贴板
            //document.execCommand（）方法操纵可编辑内容区域的元素
            //返回值为一个Boolean，如果是 false 则表示操作不被支持或未被启用
            if (document.execCommand("copy")) {
            document.execCommand("copy")
            }
            //删除这个节点
            document.body.removeChild(input)
    }
</script>

3. Clipboard.writeText方法（强烈推荐）

说明

Clipboard 接口的 writeText()  方法可以写入特定字符串到操作系统的剪切板。会返回一个Promise ，一旦剪贴板的内容被更新，它就会被解析。如果调用者没有写入剪贴板的权限，则拒绝写入剪切板（reject）

项目中使用

onCopy() {
    navigator.clipboard.writeText(this.detailData.clientSecret).then(() => {
        this.$message.success('复制成功')
    })
}

总结

到此这篇关于vue实现粘贴复制功能的文章就介绍到这了,更多相关vue粘贴复制功能内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 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粘贴复制功能的实现过程记录

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

  • vue中使用protobuf的过程记录

    由于目前公司采用了ProtoBuf做前后端数据交互,进公司以来一直用的是公司大神写好的基础库,完全不了解底层是如何解析的,一旦报错只能求人,作为一只还算有钻研精神的猿,应该去了解一下底层的实现,在这里记录一下学习过程. Protobuf简单介绍 Google Protocol Buffer(简称 Protobuf)是一种轻便高效的结构化数据存储格式,平台无关.语言无关.可扩展,可用于通讯协议和数据存储等领域. 有几个优点: 1.平台无关,语言无关,可扩展: 2.提供了友好的动态库,使用简单; 3

  • 脚手架(vue-cli)创建Vue项目的超详细过程记录

    脚手架(vue-cli)创建Vue项目的超详细过程记录

    目录 cli3.x/4.x创建Vue项目 1.创建项目 2.项目手动配置 3.选择vue版本 4.路由模式 5.配置文件的存放位置 6.配置保存 项目创建成功 总结 cli3.x/4.x创建Vue项目 1.创建项目 vue create vue_project(项目名) 敲击回车,出现以下页面 此处本人一般选择手动配置,因为eslint真的是个很可怕的东西,它对代码格式的严格要求,真的会把人逼疯的,代码有一点点不规范的地方程序都会报错 2.项目手动配置 按空格键选择或取消选择 3.选择vue版本

  • 从axios源码角度解决bug的过程记录

    目录 现象 排查思路 1. 引入 vConsole 在移动端调试 2. 从大范围到小范围的 log 3. axios 源码一览 排查角度 - interceptor 排查角度 - xhr 4. 解决问题 现象 公司的一个 H5 站点在头条 App 里白屏,在手百.QQ 浏览器.Safari.Chrome 等都正常 排查思路 1. 引入 vConsole 在移动端调试 因为移动端没有 PC 里那样方便的调试工具可以清晰的查看 log 和 network 之类有用的信息,只能借助 vConsole.

  • Ubuntu 16.04安装微信的过程记录

    微信没有出Linux的版本,但是可以通过以下方式解决: 1.使用网页版,除了没有公众号之后,一切都没问题,包括传文件等. 网页登录地址:https://wx.qq.com/ 2.使用第三方版本,只不过这个是桌面应用,原理是通过网页API集成的,稳定性还是可以的. 网站:https://github.com/geeeeeeeeek/electronic-wechat/releases,离线版本:(链接: https://pan.baidu.com/s/1i5Dr15r 密码: rc93) 其实不用

  • Vue 实现复制功能,不需要任何结构内容直接复制方式

    介绍: 在做复制文档功能时,考虑到是个不太会复用的小功能,最后选择直接用 document.execCommand 方法实现. 在查阅资料时候,发现其他人都需要在页面上写上结构.ID.然后捕捉某个ID获取内容,感觉很不方便. 使用: methods: { copyShaneUrl(shareLink){ var input = document.createElement("input"); // 直接构建input input.value = shareLink; // 设置内容 d

  • vue和webpack项目构建过程常用的npm命令详解

    vue //最新稳定版 cnpm install vue //全局安装 vue-cli cnpm install --global vue-cli //创建一个基于 webpack 模板的新项目 vue init webpack my-project //进入项目目录,运行 cd my-project cnpm install cnpm run dev  webpack //全局安装webpack cnpm install -g webpack //安装到你的项目目录 cnpm install

  • 通过SSH连接本地linux虚拟机的过程记录

    实验环境: 物理机 Windows 10 x64 物理网卡信息 IPv4地址:192.168.123.205 子网掩码:255.255.255.0 默认网关:192.168.123.1 虚拟机VMware Workstation14 Cent OS 6.7 x64 VMnet8信息: IPv4地址:192.168.21.0 子网掩码:255.255.255.0 默认网关:192.168.21.2 一.修改VMware的网络设置 位置:工具栏->编辑->虚拟网络编辑器[管理员] NAT设置-&g

  • 一次docker错误的耗时排查过程记录

    由来 客户是深信服的订制系统,基于 centos 改的,排查半天发现居然是文件损坏,而不是 docker 的问题. 环境信息 docker信息: $ docker info Containers: 0 Running: 0 Paused: 0 Stopped: 0 Images: 2 Server Version: 18.09.3 Storage Driver: overlay2 Backing Filesystem: xfs Supports d_type: true Native Overl

  • nodejs的错误处理过程记录

    本文以连接错误ECONNREFUSED为例,看看nodejs对错误处理的过程. 假设我们有以下代码 1. const net = require('net'); 2. net.connect({port: 9999}) 如果本机上没有监听9999端口,那么我们会得到以下输出. 1. events.js:170 2. throw er; // Unhandled 'error' event 3. ^ 4. 5. Error: connect ECONNREFUSED 127.0.0.1:9999

随机推荐