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 ...
随机推荐
- linux 下安装 redis
https://redis.io/ 1.下载 $ cd /usr/local/ $ wget http://download.redis.io/releases/redis-4.0.7.tar.gz ...
- 分块+莫队||BZOJ3339||BZOJ3585||Luogu4137||Rmq Problem / mex
题面:P4137 Rmq Problem / mex 题解:先莫队排序一波,然后对权值进行分块,找出第一个没有填满的块,直接for一遍找答案. 除了bzoj3339以外,另外两道题Ai范围都是1e9. ...
- InputStream只能读取一次的解决办法 C# byte[] 和Stream转换
x 情景--->>> 导入文件的时候,前台传过来一个文件, 后台接到: HttpPostedFileBase file = Request.Files[];由于对这个文件后台处理比较 ...
- F#周报2018年第50期
新闻 Bolero: 用于WebAssembly的F#工具 Ionide-fsharp安装数量超过10万 WPF的Xaml.Behaviors类库开源 Visual Studio 2019预览版 .N ...
- Django url配置 正则表达式详解 分组命名匹配 命名URL 别名 和URL反向解析 命名空间模式
Django基础二之URL路由系统 本节目录 一 URL配置 二 正则表达式详解 三 分组命名匹配 四 命名URL(别名)和URL反向解析 五 命名空间模式 一 URL配置 Django 1.11版本 ...
- Codeforces 698A - Vacations - [简单DP]
题目链接:http://codeforces.com/problemset/problem/698/A 题意: 有 $n$ 天假期,每天有四种情况:0.体育馆不开门,没有比赛:1.体育馆不开门,有比赛 ...
- wpf(dispather调度者)
一.首先为什么要有dispather? wpf程序是有一个主线程多个子线程组成的.主线程负责创建ui界面,数据接收,处理事件,子线程负责处理消耗资源较多耗时的操作.然而子线程不能直接访问主线程那么这个 ...
- day-2 jmeter 操作mysql数据库
1) 导入jdbc的jar包,因为jmeter本身不能直接连接mysql,所以需要导入第三方的jar包,来连接mysql 2) 创建数据库连接配置,mysql的url.端口号.账号.密码 ...
- idea tomcat控制台system.out.println是乱码
配置一下tomcat的信息.然后设置VM options.添加:-Dfile.encoding=UTF-8
- 20165225《Java程序设计》第八周学习总结
20165225<Java程序设计>第八周学习总结 1.视频与课本中的学习: 第十二章学习总结 1.继承Thread类创建线程,程序中如果想要获取当前线程对象可以使用方法:Thread.c ...