vue实现点击复制功能方法封装demo。

源码如下

  copyTextToClipboard(text, that) {

        const textArea = document.createElement("textarea");

        textArea.value = text;

        document.body.appendChild(textArea);     在子节点末尾添加元素

        textArea.select();      select方法讲解可以了解一下         JavaScript select()方法_js select()-CSDN博客  

        简单来说select() 方法就是获取要复制的值。

        document.execCommand("copy") 

        浏览器本身提供了一个copy命令,利用它可以复制选中(select方法)的内容

        document.body.removeChild(textArea);   删除子节点元素

        console.log('复制成功', text)

        that.$notify({

            title: '成功',

            message: '复制成功',

            type: 'success',

        })

    },

如何使用

1.导入该方法

2.方法需要两个参数     参数一:需要复制的内容    参数二:that

3.that.$notify 方法是在右侧提示是否复制成功提示的。如果想在顶部居中提示可以

改为    that.$message.success('复制成功')

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/603191.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

工业协议转换网关:打破通信壁垒,实现设备互联

在工业自动化领域,各种设备和系统间的通信协议不尽相同,这给不同设备间的集成和数据交互带来了挑战。工业协议转换网关作为一种解决这一问题的关键设备,能够实现不同协议间的转换和数据传输,打破通信壁垒,提高设备的协…

【PostgreSQL】模式Schema

PostgreSQL 数据库集群包含一个或多个命名数据库。角色和一些其他对象类型在整个集群中共享。与服务器的客户端连接只能访问单个数据库中的数据,该数据库在连接请求中指定。 数据库包含一个或多个命名schema,而这些schema又包含表。schema还包含其他类型…

Java 基础知识点1 (含面试题)

本次Java 知识点主要是关于SE的相关基础,同时也包含了数据结构中的一些API,例如Set,List,Map等,最后也附上了相关重要的面试题,可供大家学习与参考! 目录 重要知识点数据结构API面试题 重要知识点 Java 是一门面向对象…

税法相关的基础知识

文章目录 税法原则1.税法基本原则2.税法适用原则3.税收收入划分 来和大家聊聊税法相关的基础知识 税法原则 1.税法基本原则 2.税法适用原则 3.税收收入划分

Flume基础知识(十):Flume 聚合实战

1)案例需求: hadoop100上的 Flume-1 监控文件/opt/module/group.log, hadoop101上的 Flume-2 监控某一个端口的数据流, Flume-1 与 Flume-2 将数据发送给 hadoop102 上的 Flume-3,Flume-3 将最终数据打印 到控制台。…

数据库事务的特性

数据库事务具有 ACID 特性,其中 ACID 是指原子性(Atomicity)、一致性(Consistency)、隔离性(Isolation)和持久性(Durability)。这些特性是为了确保数据库在事务处理中的可…

Android 13.0修改recovery 菜单项字体大小

1.概述 在13.0的系统rom定制化开发中,在系统进入recovery模式后,界面会g_menu_actions 菜单选项和 提示文字,而这些文字的大小不像上层一样是通过设置属性来表示大小的 而它确是通过字体png图片的大小来计算文字的宽和高的,然后可以修改字体大小,接下来就实现菜单项字体大…

RocketMQ详细介绍及核心问题解释(很全)

1. RocketMq是什么 一个纯Java、分布式队列模型的消息中间件,具有高可用、高可靠、高实时、低延迟的特点。(记住这句就行了) 2. RocketMq有什么功能 1、业务解耦:这也是发布订阅的消息模型。生产者发送指令到MQ中,然…

python中parsel模块的css解析

一、爬虫页面分类 1.想要爬取的内容全部在标签中,可以使用xpath去进行解析如下图 2.想要爬取的内容呈现json的数据特征,用.json()转换为字典格式 3.页面不规则,标签中包含大括号,如下面想要获取键值内容怎么做,先用re正…

Binius:基于binary fields的SNARKs(Part 2)

1. 引言 前序博客有: Binius:基于binary fields的SNARKs(Part 1)Binius:助力ZK行业发展 本文重点关注: 1)concatenated codes:可扩展对small fields的多项式承诺方案2&#xff0…

Docker学习与应用(六)-Docker网络

1、Docker网络 Docker有多种网络模式可以选择,可以根据应用场景和需求选择合适的网络模式。 桥接模式(Bridge Mode):默认情况下,Docker使用桥接模式创建一个虚拟网络,所有容器会连接到这个虚拟网络中。每个…

回家用go?还是go to?

语法 go 副词 go to 名词 home比较特殊 前面无修饰词就是副词 前面有修饰词就是名词 案例

【MATLAB第88期】基于MATLAB的6种神经网络(ANN、FFNN、CFNN、RNN、GRNN、PNN)多分类预测模型对比含交叉验证

【MATLAB第88期】基于MATLAB的6种神经网络(ANN、FFNN、CFNN、RNN、GRNN、PNN)多分类预测模型对比含交叉验证 前言 本文介绍六种类型的神经网络分类预测模型 1.模型选择 前馈神经网络 (FFNN) 人工神经网络 (ANN) 级联前向神经网络 (CFNN) 循环神经网…

消息队列-什么是MQ?何时使用MQ?怎么选择MQ?

什么是MQ? MessageQueue:就是消息 队列,任务队列,指令 队列。 功能:应用程序之间(生产者与消费者)的通信方式。 使用场景 从下面这个场景来感受MQ 的诞生 如果我们有很多任务需要处理,任务…

Logstash相关问题及答案(2024)

1、什么是Logstash? Logstash是Elastic Stack(曾被称为ELK Stack,即Elasticsearch、Logstash、Kibana三者的组合)的一部分,是一个开源的服务器端数据处理管道,可以同时从多个来源采集数据,转换数…

Mac打包Unix可执行文件为pkg

Mac打包Unix可执行文件为pkg 方式一:通过packages页面打包 1.下载packages app Distribution:自定义化更高,包括修改安装页面的内容提示 我这里主要演示Distribution模式的项目:通过unix可执行文件postinstall.sh脚本实现通过ma…

听GPT 讲Rust源代码--compiler(31)

File: rust/compiler/rustc_ast_passes/src/node_count.rs 在Rust源代码的rust/compiler/rustc_ast_passes/src/node_count.rs文件中,它定义了Rust编译器中的AST节点计数器。该文件的作用是统计不同类型的AST节点在程序中的数量,以便在优化和调试过程中能…

【Python】Excel多sheet逐行合并为一个sheet

我有一个excel,内含多个sheet,我要将不同sheet合并在一个sheet中,依然保存在这个excel文件中,命名为合并,要求列名依次对应,逐行合并,请为我写出python代码 import pandas as pd# 读取 Excel 文…

acwing KMP算法

【数据结构】KMP算法&#xff08;详解&#xff09; #include <iostream> #include <string> #include <vector>using namespace std; const int N 1e6 10; int n1, n2; char s1[N], s2[N]; vector<int> next_val(N);void get_next() {// next数组中…

详解Keras:keras.preprocessing.image

keras.preprocessing.image Keras 库中的一个模块&#xff0c;用于处理和增强图像数据&#xff0c;它提供了一些实用的函数&#xff0c;如图像的加载、预处理、增强等。 常用函数 1、load_img 用于加载图像文件&#xff0c;并返回一个 NumPy 数组表示该图像 示例 from ker…