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 ...
随机推荐
- MySql 远程连接的条件
1.首先看服务器防火墙 引用:http://www.cnblogs.com/silent2012/archive/2015/07/28/4682770.html CentOS 7.0默认使用的是fir ...
- 终于知道什么情况下需要实现.NET Core中的IOptions接口
自从接触 IOptions 之后,一直纠结这样的问题:自己定义的 Options 要不要实现 IOptions 接口. 微软有的项目中实现了,比如 Caching 中的 MemoryCacheOpti ...
- ubuntu登录时出现“一闪之后回到登录界面”的现象
ubuntu登录时出现“一闪之后回到登录界面”的现象 虚拟机vmware 12.5.6 build-5528349 操作系统ubuntu 18.04 问题:登录时出现一闪之后回到登录界面的现象 解决方 ...
- 常用css属性
一.常用css属性 (1) *block(区块) 行高 line-height:数值 | inherit | normal;字间距 letter-spacing: 数值 | inherit | nor ...
- kafka读书笔记《kafka权威指南》2018
1.有了分区,可以多个client消费一个topic,有了分区,可以将一个topic 分散在多个broker 2.kafka通过复制实现可靠,通过横向扩展提高性能(如增加分区.客户端.增加broker ...
- ini文件读写
//创建对象:iniFile:=TIniFile.Create(strFile); //写入procedure IEAddFavUrl(FURL, Title: string);var fPath: ...
- 20165213&20165225结对学习感想及创意照
20165213&20165225结对学习感想及创意照 会JAVA的大学生活好小组 团队感悟: 1+1>2还是1+1<2? 上述两个观点实际没有对错之分,取决点在于个人见解. 相信 ...
- centos7.2 mysql5.5编译安装
环境 centos7.2 源码包mysql5.5.38 mysql5.5开始,源码配置编译工具configure变成了cmake,所以先要去把cmake装上.并安装make,bison,cmake,g ...
- what's the python之if判断、while循环以及for循环
Python缩进原则 顶级代码必须顶行写,即如果一行代码本身不依赖于任何条件,那它必须不能进行任何缩进 同一级别的代码,缩进必须一致 官方建议缩进用4个空格 Python程序语言指定任何非0和非空的布 ...
- HTML中--定义header和footer高度中间自适应
<html> <head> <meta charset="utf-8" /> <title></title> <s ...