使用clipboard实现复制到剪切板功能(超详细~~)

先看看效果:

 

1.页面中使用

// html
<Button type="primary" @click="clickCopy">复制</Button>// js
<script>import utils from '@/libs/utils'methods: {clickCopy (){utils.copy2clipboard('LALALAALA')//复制的内容},}  
</script>

2.复制黏贴的功能封装

import Clipboard from 'clipboard'
const utils = {copy2clipboard (str) {const oInput = document.createElement('input')// 把文字放进input中,供复制oInput.value = stroInput.id = 'copydom'document.body.appendChild(oInput)// 选中创建的inputoInput.select()// 执行复制方法, 该方法返回bool类型的结果,告诉我们是否复制成功const copyResult = document.execCommand('copy')// 根据返回的复制结果 给用户不同的提示if (copyResult) {instance.$Message.success('已复制到粘贴板')// 操作中完成后 从Dom中删除创建的inputdocument.body.removeChild(oInput)} else {// this.$Message.error('复制失败')let clipboard = new Clipboard('#copydom')clipboard.on('success', () => {instance.$Message.success('已复制到粘贴板')// 操作中完成后 从Dom中删除创建的inputdocument.body.removeChild(oInput)})clipboard.on('error', () => {instance.$Message.error('复制失败')// 操作中完成后 从Dom中删除创建的inputdocument.body.removeChild(oInput)})}}  
}
export default utils

以上便可以实现一个基本的复制功能,可根据自己的项目进行调整。

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

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

相关文章

还用老套路分析财务数据?这3种财务分析方法,你一定得看看

如果问你一个问题&#xff1a;如何分析一家企业&#xff1f;很多人都会回答&#xff1a;从财务分析入手&#xff0c;但是这个好难&#xff0c;不是专业人员做不出来&#xff0c;就是专业的财务人员&#xff0c;做这个也不是一件容易的事情。 其实财务分析并不难&#xff0c;关…

财务分析真不难!无需代码,一个模板直接复用,碾压上千Excel表

我是某国企的一名老财务&#xff0c;说起来也工作了好几年了&#xff0c;但感觉每天都在做重复的事情&#xff1a;在最美好的年纪终日面对着各式各样的数据&#xff0c;对&#xff0c;是各式各样&#xff0c;不同阿拉伯数字组成不同的报表。 周末不加班&#xff0c;枉为财务人…

从只用Excel做报表,到可视化报表工具真香,他经历了什么

2020年了&#xff0c;很多人&#xff0c;乃至于很多企业做报表都还在用Excel&#xff0c;埋头苦干一天整出下面这个玩意&#xff1a; 你的辛苦领导都看在眼里&#xff0c;但是这做的实在是太差了&#xff0c;一点都不能反映数字与数字之间的关系&#xff0c;于是领导回复了你一…

财报不是难题,三分钟学会制作超简单的资产负债表

​对于财会人来说&#xff0c;财务报表就是吃饭的家伙事&#xff0c;会计做报表、审计审报表。可以说&#xff0c;财会人和财报待在一起的时间比对象都多。然而&#xff0c;财报有三表&#xff0c;分别是资产负债表、利润表和现金流量表&#xff0c;其中资产负债表是最最最常见…

这样的财务报表分析软件谁不爱!帮你轻松搞定财务问题~

作为财务人员&#xff0c;做各种财务报表已成家常便饭。小编以前也是用传统报表软件excel&#xff0c;使用简单&#xff0c;上手快&#xff0c;但是不久后发现一遇到数据量大的时候就完全不够用了&#xff0c;会出现更新麻烦、备份复杂&#xff0c;电脑桌面杂乱不堪的情况&…

50套可视化报表模板直接用,做报告不用愁了!快收藏

总有人头疼&#xff1a;报表怎么做&#xff1f;数据怎么展现给领导才是最合适的&#xff1f;年终总结怎么让人眼前一亮&#xff1f; 用Excel吧&#xff0c;太低端了&#xff0c;而且是真的丑&#xff0c;万一被pass不就惨了&#xff1f; 用python自动化吧&#xff0c;不会代码…

这才是老板爱看的人力资源分析报表,你只是在做“流水账”!

这篇从指标确认——图表搭建——数据分析来系统说下月度人力资源数据分析应该怎么做。 在做数据分析报表之前&#xff0c;得先知道月度人力资源数据分析包括哪些内容&#xff1a; 本月重点工作及上月工作总结在职人员结构分析月度人员异动分析月度招聘数据分析考勤绩效数据分析…

aj-report 编辑一个完整的大屏显示报表

接前两讲。 配置好数据源之后,我们就可以编写一个完整的大屏展示页面了。 我的目标页面如下: 虽然文字大小和排版没有最终调整,但是刚开始的时候我心里想的就是这么排版了。后面基本都是实现过程。 就刚开始使用的你来说,上面的这个排版界面其实你可以用excel先大略地排…

说出来你可能不信,我用excel就能做一张高端的统计报表

统计报表是指各级企事业、行政单位按规定的表格形式、内容、时间要求报送程序&#xff0c;自上而下统一布置&#xff0c;提供统计资料的一种统计调查方式。统计报表具有来源可靠、回收率高、方式灵活等特点&#xff0c;是各个基层企业或事业单位填报的报表&#xff0c;对企业而…

告别Excel!别人家高大上的财务数据分析,这才是老板的最爱

文末有超级多的财务干货~ 最近“大数据与数据可视化”确实火了一把&#xff0c;看看国外和国内的情况对比就知道&#xff0c;我们有能力也有决心通过大数据追踪到每一个人&#xff0c;这点着实让我佩服&#xff0c;同时我也很自豪&#xff0c;真的是发自内心的自豪。 这件事情过…

财务报表是用来排雷的-《手把手教你读财报》

财务报表是用来排雷的-《手把手教你读财报》 耳小月关注 0.122019.07.26 14:42:02字数 4,579阅读 206 这本书是作者一步一步按照财务报表的要素来解释和分析的&#xff0c;通过通俗的语言和真实的按理来手把手教我们分析的&#xff0c;比普通教科书式的财务分析书籍可读性强很…

被报表需求逼疯的银行数据人,是时候放弃用Excel做报表了

在银行干了几年数据分析&#xff0c;实在忍不住吐槽&#xff0c;这可以说是最没话语权&#xff0c;但脏活累活不断的部门。在银行&#xff0c;谁赚钱多谁就强势、嗓门大&#xff0c;赚钱多的业务部门基本上今天提业务指标需求&#xff0c;明天就得要做好分析。但科技人员响应需…

chatgpt赋能python:用什么软件编写Python文件?

用什么软件编写Python文件&#xff1f; Python 是一种流行的编程语言&#xff0c;许多人使用它来编写软件应用程序、数据分析工具以及自动化脚本。但是对于初学者来说&#xff0c;可能会感到迷茫&#xff0c;不知道应该用什么软件来编写并运行Python文件。本文将介绍几种非常流…

马斯克欲“放手”,终止收购 Twitter

整理 | 苏宓 出品 | CSDN&#xff08;ID&#xff1a;CSDNnews&#xff09; “网红”马斯克再现江湖。如果稍微留意一下&#xff0c;就会发现近段时间“马斯克”的名字似乎在各大科技网站的首页就没有下来过&#xff1a; 内部邮件被爆料&#xff0c;马斯克强制员工每周到岗 40 个…

H.264视频编解码的FPGA源码分析(二)帧内预测2

目录 intra_44帧内预测下左对角线模式INTRA4x4_DDL下右对角线模式INTRA4x4_DDR右垂直模式INTRA4x4_VR下水平模式INTRA4x4_HD左垂直模式INTRA4x4_VL上水平模式INTRA4x4_HU 变换编码为什么要使用Hadamard变换Rate Distortion Optimationlambda值的产生 前述文章链接在此 H.264视频…

2017CS231n笔记_S13生成模型

目录 S13.1Supervised vs Unsupervised Learning S13.2生成模型Generative Model S13.2.1Fully visible belief network S13.2.3变分编码器(Variational Autoencoders ,VAE) S13.2.4对抗生成网络(Generative Adversarial Networks ,GAN) S13.1Supervised vs Unsupervised…

使用Apache Spark进行预测性数据分析--数据准备篇

本文是Boutros El-Gamil的使用Apache Spark进行预测性数据分析系列文章的第二篇&#xff0c;http://www.data-automaton.com/2019/01/04/predictive-data-analytics-with-apache-spark-part-2-data-preparation/ 第一篇详见使用Apache Spark进行预测性数据分析--简介篇关于Wind…

王者服务器维护段位掉了,王者荣耀s13赛季段位掉段规则 s13段位重置掉段继承表[图]...

王者荣耀s13赛季段位会掉多少&#xff0c;新赛季开始的时候会重置到什么阶段呢&#xff1f;或许有的玩家朋友很好奇吧&#xff0c;下面是友情MT为大家带来的王者荣耀s13赛季段位掉段规则&#xff0c;s13段位重置掉段继承表&#xff0c;希望能帮助到大家&#xff01; 王者荣耀s1…

BRAUN A5S13B90-06速度传感器

向地球赎罪 美国加州有一个创业奇人名叫马修。 向地球赎罪少年时。他的梦想是“做爱迪生那样为世界带来光明的英雄”。 大学毕业后&#xff0c;他创办起圣诞灯制造厂&#xff0c;将美国的圣诞灯全面翻新&#xff0c;闪耀了整个美国&#xff0c;又将业务扩充到多种显示器&am…

倍福PLC标签导入威纶通触摸屏

使用到的软件TwinCAT2、威纶通EBpro V6.02.01.274 步骤1&#xff1a;编译PLC程序&#xff0c;生成后缀为".tpy"的文件。记住PLC程序路径 步骤2&#xff1a;打开威纶通EBpro&#xff0c;这里用到EBpro HMI版本是V6.02.01.274&#xff0c;和其他更高的版本大同小异。 …