Vue实现点击按钮复制功能

Vue实现点击按钮复制功能

因为之前做过一个项目,有网关标识和场景标识,都是32个长度的随机字符串,后期需要用到这两个标识,以前用户可以手动复制过去用,但是随着数据的增多,这两个标识可能太长会被隐藏掉一部分,用户就复制不了了,所以加一个按钮,可以让用户需要复制的时候,点击按钮,前端自动实现复制操作。复制操作是基于input输入框的,所以得事先生成一个输入框来存放需要复制的文本数据。

copyText(){
   var input = document.createElement("input");   // js创建一个input输入框
   input.value = this.text;  // 将需要复制的文本赋值到创建的input输入框中
   document.body.appendChild(input);    // 将输入框暂时创建到实例里面
   input.select();   // 选中输入框中的内容
   document.execCommand("Copy");   // 执行复制操作
   document.body.removeChild(input); // 最后删除实例中临时创建的input输入框,完成复制操作
},

posted @   叫我+V  阅读(4851)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
阅读排行:
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 零经验选手,Compose 一天开发一款小游戏!
· 一起来玩mcp_server_sqlite,让AI帮你做增删改查!!
点击右上角即可分享
微信分享提示