vue中实现浏览器的复制功能

点击复制,就可以实现copy
<p class="inline-block">
<span >{{fenxiao.appSecret}}</span>
<span style="color: #0000FF;cursor: pointer" @click="copyAppSecret">复制</span>
</p>
copyAppSecret() {
let createInput = document.createElement("input");
createInput.value = this.fenxiao.appSecret;
document.body.appendChild(createInput);
createInput.select(); // 选择对象
document.execCommand("Copy"); // 执行浏览器复制命令
createInput.style.display = "none";
this.$message({ message: "复制成功", type: "success" });
},
网上说的那种
let tt=document.getElementById("xxxx")
tt.select(); // 选择对象
document.execCommand("Copy"); // 执行浏览器复制命令
文本是没有select方法的,input才有 所以要先创建input元素,在添加值,在赋值,
亲测有效,换成el-input就能行
vue中实现浏览器的复制功能的更多相关文章
- Vue中结合clipboard实现复制功能
首先现在Vue中引入clipboard npm install clipboard --save 在需要使用的组件中import 引入clipboard import Clipboard from ' ...
- vue中npm run dev运行项目不能自动打开浏览器! 以及 webstorm跑vue项目jshint一直提示错误问题的解决方法!
vue中npm run dev运行项目不能自动打开浏览器!以及 webstorm跑vue项目jshint一直提示错误问题的解决方法! 1.上个项目结束就很久没有使用vue了,最近打算用vue搭建自己的 ...
- Vue中浏览器的的前进和后退
项目开发的时候,有时候可能需要我们来对页面后退和前进,这个东西跟浏览器自带的前进后退功能很像,下面来大致讲一下在vue中浏览器的前进和后退 一.后退功能 vue中的后退有好多种方法可以使用,使用这些方 ...
- vue中解决chrome浏览器自动播放音频 和MP3语音打包到线上
一.vue中解决chrome浏览器自动播放音频 需求 有新订单的时候,页面自动语音提示和弹出提示框: 问题 chrome浏览器在18年4月起,就在桌面浏览器全面禁止了音视频的自动播放功能.严格地来说, ...
- Vue中comoputed中的数据绑定
Vue中的数据实现响应式绑定是在初始化的时候利用definePrototype的定义set和get过滤器,在进行组件模板编译时实现water的监听搜集依赖项,当数据发生变化时在set中通过调用dep. ...
- Vue中应用CORS实现AJAX跨域,及它在 form data 和 request payload 的小坑处理
基本概念部分(一):理解CORS 说道Vue的跨域AJAX,我想先梳理一遍CORS跨域,"跨域资源共享"(Cross-origin resource sharing),它是一个W3 ...
- axios在vue中的简单配置与使用
一.axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征:https://hzzly.github.io/2017/03/12/ ...
- vue中引入babel步骤
vue中引入babel步骤 vue项目中普遍使用es6语法,但有时我们的项目需要兼容低版本浏览器,这时就需要引入babel插件,将es6转成es5. 1.安装babel-polyfill插件 npm ...
- vue中的路由的跳转的参数
vue中的路由跳转传参 params 与 query this.$router.push({ name:"detail", params:{ name:'nameValue', c ...
随机推荐
- 游标SQL Cursor 基本用法
http://www.cnblogs.com/Gavinzhao/archive/2010/07/14/1777644.html 1 table1结构如下 2 id int 3 name va ...
- CH 4401/Luogu 4168 - 蒲公英 - [分块]
题目链接:传送门 题目链接:https://www.luogu.org/problemnew/show/P4168 题解: 经典的在线求区间众数的问题,由于区间众数不满足区间可加性,所以考虑分块,假设 ...
- SCSS快速入门
SCSS快速入门 1. 使用变量sass引入了变量.通过变量名来引用它们,使用$符号来标识变量.且在CSS中并无他用,不会导致与现存或未来的css语法冲突. 1-1. 变量声明sass变量的声明和cs ...
- Vue SSR 配合Java的Javascript引擎j2v8实现服务端渲染3配置webpack支持ssr
安装 cross-env yarn add -D cross-env 安装 html-webpack-plugin yarn add -D html-webpack-plugin 安装 webpack ...
- selec2组件使用方法
select2组件是一款代搜索功能的html下拉框辅助组件,官方 demo以及文档:http://select2.github.io/examples.html => 最简单的使用方法(前期绑定 ...
- take a cpu core offline
[root@vrouter1 ~]# cat /sys/devices/system/cpu/online -,,- [root@vrouter1 ~]# cat /sys/devices/syste ...
- 内部排序->插入排序->其它插入排序->表插入排序
文字描述 和之前的插入排序比,表插入排序可以保证排序过程中不移动记录:因此表插入排序所用的存储结构和之前的顺序存储不同,表插入排序采用静态链表类型作为待排记录序列的存储结构,设数组中下标0的分量为表头 ...
- python摸爬滚打之day07----基本数据类型补充, 集合, 深浅拷贝
1.补充 1.1 join()字符串拼接. strs = "阿妹哦你是我的丫个哩个啷" nw_strs = "_".join(strs) print(nw_s ...
- 那些年读过的书《Java并发编程的艺术》一、并发编程的挑战和并发机制的底层实现原理
一.并发编程的挑战 1.上下文切换 (1)上下文切换的问题 在处理器上提供了强大的并行性就使得程序的并发成为了可能.处理器通过给不同的线程分配不同的时间片以实现线程执行的自动调度和切换,实现了程序并行 ...
- css权重计算规则
1.第一等:代表内联样式,如 style=" ",权值为1000: 2.第二等:代表ID选择器,如 #content,权值为0100: 3.第三等:代表类,伪类和属性选择器,如 . ...