基于Vue3+ElementPlus项目,复制文字到剪贴板功能实践指南,揭秘使用js-tool-big-box工具库的核心优势

在前端开发项目中,很多时候有那么一个场景,就是要求将一段文案复制下来,这段文案可能是一串很长的id,可能是一条命令语句,可能是一小段文案,复制到剪贴板上。这样有利于用户复制到其他地方去,使得用户操作起来更便捷。

目录

1 前言 

2 基于Vue3+ElementPlus项目来使用工具

2.1 实现素材

2.2 定义界面 

2.3  使用Vue3定义数据依赖

2.4 引入js-tool-big-box工具库,实现复制功能 

2.5 方法说明

3 使用js-tool-big-box工具库的好处

3.1 说明文档的与众不同

3.2 目前已有的工具方法 

3.3 使用js-tool-big-box的好处 

4 最后


1 前言 

所以提到copy-to-clipboard大家肯定不陌生,这个工具很方便,使用起来也很简单,所以我就想,js-tool-big-box这个工具库,如果把这个功能添加进去,一定能更帮助更多的前端小伙伴们,说干就干,下面我们说一下js-tool-big-box这个工具库,如何使用复制文字到剪贴板的功能。

2 基于Vue3+ElementPlus项目来使用工具

2.1 实现素材

这一小节讲解的实现素材包括:

  1. 启动Vue3项目,主要使用到reactive定义数据依赖;
  2. 安装ElementPlus,主要用到ElMessageel-button组件功能;
  3. 安装js-tool-big-box,基于Vue3项目使用其复制文字到剪贴板功能。

2.2 定义界面 

首先,我们希望定义一个模板界面,界面中有两个输入框第一个可以随意输入文字,然后添加按钮,点击按钮实现复制文字到剪贴板功能,然后我们手动执行粘贴,可以将第一个输入框的文字复制到第二个输入框中,算是大功告成。Vue3模板界面代码如下:

<template>
  <div class="home">
    <div class="top">js-tool-big-box</div>
    <div class="top top2">做更丰富的前端JS工具库</div>
    <div class="div-box">
      copy处:<input type="text" v-model="form.copyVal" />
    </div>
    <el-button type="primary" @click="go2Copy()">复制一下</el-button>
    <div class="div-box">
      paste处:<input type="text" v-model="form.pasteVal" />
    </div>
  </div>
</template>

2.3  使用Vue3定义数据依赖

如果你刚刚使用Vue3不久,总会难以想起Vue3如何定义数据依赖,就像上午还在做Vue项目用两个大括号绑定变量数据,突然下午开始做React项目,写上两个大括号就报错一样。这里我们引入reactive,然后定义两个输入框的数据依赖。

<script setup>
  import { reactive } from "vue";
  import { ElMessage } from 'element-plus'

  const form = reactive({
    copyVal: '',
    pasteVal: ''
  })
</script>

2.4 引入js-tool-big-box工具库,实现复制功能 

首先安装js-tool-big-box工具库

执行命令npm i js-tool-big-box

项目中引入工具库,同时工具库对外提供了dataBox对象,用于复制文字到剪贴板的功能。引入代码如下:

import { dataBox } from 'js-tool-big-box';

接下来就可以开始实现功能调用了,上面的模板处,我们点击按钮,会执行一个go2Copy方法,这里来实现一下:

const go2Copy =() =>{
    const text = form.copyVal;
      dataBox.copyText(text, () => {
        ElMessage({
            type: 'success',
            message: '复制成功'
        })
      }, () => {
        ElMessage({
            type: 'error',
            message: '复制异常,请尝试其他方式复制内容'
        })
      }
    )
  }

 

2.5 方法说明

 工具使用起来很便捷,通过对外提供的dataBox对象,调用copyText方法,就可以实现功能。方法使用总结如下:

方法名返回值入参
copyText--

第一个参数必填,表示需要复制到剪贴板的文字;

第二个参数非必填,为一个回调函数,表示复制成功后的回调函数;

第三个参数非必填,为一个回调函数,表示复制失败后的回调函数;

其实我倒是觉得,回调函数还是很有必要的,毕竟前端javascript调用浏览器,再调用操作系统的功能是需要一定时间的,而前端开发同学为了很好的用户体验,很多时候是需要给用户一些页面上的提示的。例如弹出一个toast提示,例如将复制按钮变动一下,例如其他地方给一个提示,总之给用户提示的方式多种多样,但这个回调函数,还是应该有的,而且很必要

3 使用js-tool-big-box工具库的好处

3.1 说明文档的与众不同

从学习java的时候,到后来的jquery等工具api的时候,会有一个小工具,我也想过是否做一个小工具,或者单独起一个网址,又或者将说明文档写到项目的readme里,又或者是写到npm的那个介绍里。后来我发现,我还是更喜欢文章形式,文章就会有自己更多的发挥空间,可以和大家聊聊天,可以在评论中接受更多的消息,所以我统一将说明文档写到了csdn的博客中。后续的方法继续加,专栏博客就会继续累加。

3.2 目前已有的工具方法 

 目前我已经根据自己以往的经验,将一些使用频率非常高的功能糅合了进去,后续还会继续累加,并根据大家的反映,提供更多的功能进去,目前已有的功能如下:

3.3 使用js-tool-big-box的好处 

你在前端开发项目中,是否遇到过这样的问题呢?比如我们在开发过程中,几个业务场景都需要的方法,就不单独实现了,写到一个公共的目录下,大家共同调用;比如自己难以实现的功能,去网上找一找,安装引入,大家开始使用;甚至有时候,有的同事比较独特,你引入了,我也要单独写一遍,自己用;还有时候,有人自己安装了了一个第三方库,然后没有告诉一起开发的同事,导致项目起不来,然后才开始问,哦,原来需要安装一下。

其实这些问题或者场景,我都遇到过。所以我希望js-tool-big-box可以越来越丰富,越来越满足大家的日常需求。大家可以少写一些公共方法,直接使用这个工具库。况且大家最浪费时间或者最核心的是业务功能,又不是这个工具库,也不必担心使用了工具库,或是那些AI人工智能一样,哪天自己的业务能力被取代了。大家可以把更多的时间用于自己的核心业务开发中去。

使用了这个工具库以后呢,也是希望大家可以减少一些第三方库的安装,这样package.json会少一些内容,也可以减少因为安装而引起的团队沟通困扰。

4 最后

最后呢,希望大家有一些想法可以评论区告诉我,或者私信告诉我,我希望我们可以为这个工具库添砖加瓦,让他变得越来越丰富,希望可以真正帮助开发者们减少install,减少冗余的公共方法。你有更多的时间去做业务开发,有更多的思路去提升你们产品的用户体验,那个时候,希望你可以在团队中越来越游刃有余吧。

我在文章末尾加了投票环节,希望得到你宝贵的一票哦!

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

RuoYi-Vue-Plus (Logback 和 logback-plus.xml 、p6spy)

项目后本地日志 一、logback依赖 打开最外层的 pom.xml,查看 SpringBoot的依赖配置。 <dependencyManagement><dependencies><!-- SpringBoot的依赖配置--><dependency><groupId>org.springframework.boot</groupId><artifactId>s…

国外新闻媒体推广:多元化媒体分发投放-大舍传媒

前言 &#xff1a;随着全球化的进程&#xff0c;国外新闻市场呈现出快速发展的趋势。在这个趋势下&#xff0c;国外新闻媒体推广成为了各行业企业宣传业务的重要一环。本文将重点介绍大舍传媒的多元化媒体分发投放服务&#xff0c;以及对国外新闻媒体推广的意义。 1. 多元化媒…

【docker】SpringBoot应用容器镜像日志挂载

启动镜像时候使用 -v 挂载 首先得在宿主机创建目录&#xff1a;/workspace/java/demo/logs mkdir -pv /workspace/java/demo/logs 启动镜像 docker run -p 8080:8080 -itd -v /workspace/java/demo/logs/:/logs/ 192.168.2.1:5000/demo:0.0.1-SNAPSHOT -v /workspace/ja…

《控制系统实验与综合设计》综合四至六(含程序和题目)

1.电机模型辨识实验 1.1 实验目的 &#xff08;1&#xff09;掌握一阶系统阶跃响应的特点&#xff0c;通过实验加深对直流电解模型的理解&#xff1b; &#xff08;2&#xff09;掌握系统建模过程中参数的整定&#xff0c;体会参数变化对系统的影响&#xff1b; &#xff0…

国外新闻媒体投放:多元化媒体分发投稿平台-大舍传媒

引言 随着全球信息传播的加速和全球化的发展&#xff0c;国外新闻媒体的推广变得越来越重要。在这个数字化时代&#xff0c;多元化的媒体分发投放成为了有效推广的关键。本文将介绍大舍传媒在国外新闻媒体推广中的经验与策略。 国外新闻媒体的重要性 国外新闻媒体是获取国际…

信创替代后的设备处置

信创替代后的设备处置 在信创项目中替换下来的设备&#xff0c;如果从技术层面讲还具有较高的应用价值&#xff0c;如何处置呢&#xff1f; 一、数据处置 信创适配完成后&#xff0c;这些被替换下来的服务器上有大量的数据&#xff08;包括结构化和非结构化&#xff09;&…

【2024】前端,该卷什么呢?

✅顺便推个机会&#xff0c;技术大厂&#xff0c;部门捞人&#xff0c;前后端可投。 2024ChatGPT 的炸裂式发展&#xff0c;很多大佬都亲自入场整活儿&#xff0c;你不得不说&#xff0c;人工智能时代的未来已来&#xff0c;大势所趋&#xff0c;不可阻挡。随着生成式AI的迅猛发…

Linux进程控制——Linux进程等待

前言&#xff1a;接着前面进程终止&#xff0c;话不多说我们进入Linux进程等待的学习&#xff0c;如果你还不了解进程终止建议先了解&#xff1a; Linux进程终止 本篇主要内容&#xff1a; 什么是进程等待 为什么要进行进程等待 如何进程等待 进程等待 1. 进程等待的概念2. 进…

收藏:如何轻松建立CRM系统的帮助中心

大家好&#xff0c;今天咱们来聊聊怎么给公司的CRM系统建个帮助中心。为什么CRM系统需要建立帮助中心呢&#xff1f;很简单&#xff0c;就是为了让客户、员工在遇到问题时能有个快速找到答案的地方&#xff0c;提升咱们的服务质量和内部工作效率。 一、为什么需要建立CRM系统的…

瑞友科技质量改进服务事业部总经理张力受邀为第十三届中国PMO大会演讲嘉宾

全国PMO专业人士年度盛会 北京瑞友科技股份有限公司质量改进服务事业部总经理张力先生受邀为PMO评论主办的2024第十三届中国PMO大会演讲嘉宾&#xff0c;演讲议题为“PMO如何对接战略成为企业IT投资成功的有效保障”。大会将于6月29-30日在北京举办&#xff0c;敬请关注&#x…

Python接口自动化测试之动态数据处理

在前面的知识基础上介绍了在接口自动化测试中&#xff0c;如何把数据分离出来&#xff0c;并且找到它的共同点&#xff0c;然后依据这个共同点来找到解决复杂问题的思想。我一直认为&#xff0c;程序是人设计的&#xff0c;它得符合人性&#xff0c;那么自动化测试的&#xff0…

Github新手入门使用方法

**存在问题&#xff1a;**新手如何快速入门github&#xff0c;能够下载开源文件&#xff0c;并且修改后更新远程github仓库&#xff1b; 解决方案&#xff1a; 参考&#xff1a; http://www.360doc.com/content/24/0301/12/60419_1115656653.shtml https://blog.csdn.net/gongd…

一个不知名的开源项目可以带来多少收入

起源 2020 年新冠疫情开始蔓延&#xff0c;当时我在同时经营 3 个不同的公司。除了其中的体育赛事平台因为疫情关门大吉之外&#xff0c;另外两个公司并没有受影响&#xff0c;营收和利润反而都持续增加。但是连续几个月不能出远门&#xff0c;也不能随便见朋友和客户&#xff…

大语言模型的RAG:综述

23年12月同济大学和复旦大学的综述论文“Retrieval-Augmented Generation for Large Language Models: A Survey”。 大语言模型&#xff08;LLM&#xff09;展示了强大的功能&#xff0c;但在实际应用中仍然面临挑战&#xff0c;如幻觉、知识更新缓慢以及答案缺乏透明度。检索…

分布式搜索-elaticsearch基础 安装es

这里是在虚拟机的Linux系统里安装es的教程: 1.创建网络 在Finashell终端输入指令 docker network create es-net 2.将es.tar安装包放入tmp的目录下 输入指令加载镜像&#xff1a;docker load -i es.tar 3.再运行docker 命令 docker run -d \--name es \-e "ES_JAVA_O…

触摸播放视频,并用iframe实现播放外站视频

效果&#xff1a; html: <div:style"{ height: homedivh }"class"rightOne_content_div_div"mouseenter"divSeenter(i)"mouseleave"divLeave(i)"click"ItemClick(i)"><!-- isUser是否是用户上传 --><divv-if…

NodeJS编写后端接口

技术栈 1.express&#xff1a;Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建 各种 Web 应用&#xff0c;和丰富的 HTTP 工具&#xff0c;使用 Express 可以快速地搭建一个完整功能的网站。 2.mysql&#xff1a;用于操作MySQL数据库 3.bod…

HarmonyOS应用模型Stage基本介绍

文章目录 <font colorcoral> HarmonyOS应用模型概况<font colorcoral> Stage模型基本概念<font colorcoral> Stage模型UIAbiliry的生命周期<font colorcoral> Stage模型的配置文件<font colorcoral> 写在后面的话<font colorcoral>Referen…

Grafana(CVE-2021-43798)、Apache Druid 代码执行漏洞

文章目录 一、Grafana 8.x 插件模块目录穿越漏洞&#xff08;CVE-2021-43798&#xff09;二、Apache Druid 代码执行漏洞&#xff08;CVE-2021-25646&#xff09; 一、Grafana 8.x 插件模块目录穿越漏洞&#xff08;CVE-2021-43798&#xff09; Grafana是一个系统监测工具。 利…

Spring的核心概念

目录 1、控制反转&#xff08;IoC&#xff09; 什么是控制反转 IoC与IoC容器的关系 Spring框架的控制反转 2、Bean 注解&#xff1a;​​​ 3、DI 4、总结 1、控制反转&#xff08;IoC&#xff09; 什么是控制反转 IoC&#xff08;Inversion of Control&#xff0c;控…