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 ...
随机推荐
- PAT甲级1139 First Contact
题目:https://pintia.cn/problem-sets/994805342720868352/problems/994805344776077312 题意: 有m对朋友关系,每个人用4为数 ...
- 手把手教你用Spring Cloud和Docker构建微服务
什么是Spring Cloud? Spring Cloud 是Pivotal提供的用于简化分布式系统构建的工具集.Spring Cloud引入了云平台连接器(Cloud Connector)和服务连接 ...
- hive优化之参数调优
1.hive参数优化之默认启用本地模式 启动hive本地模式参数,一般建议将其设置为true,即时刻启用: hive (chavin)> set hive.exec.mode.local.aut ...
- python-爬虫:取qq号中各分组成员信息存入数据库,并将qq头像下载保存到文件夹,图片命名为qq号(实例3)
import requestsimport pymongoimport requestsimport os class QqGroup:#三个接口url 获取 qq组号 获取每组成员信息 获取qq头像 ...
- linux 记录所有用户bash操作日志
记录所有用户登录系统的任何操作日志,以便有据可查. 1.编辑 /etc/profile文件. 1 # vim /etc/profil 2. 在其后添加如下内容 1 2 3 4 5 6 7 8 ...
- 终于碰到iOS对象集合深拷贝的坑
从原始数组,拆分排列组合成新数组,同时给新的数组中的模型元素追加字段,数组的容量翻倍,如果不用深拷贝,后面追加的值就把前面的值覆盖了 UnitModel *model1 = [UnitModel ne ...
- delphi inttohex 整型到十六进制
inttohex from delphi help: Returns the hex representation of an integer. Unit SysUtils Category nume ...
- Nessus离线安装及升级插件
最近做客户的内网主机漏洞扫描,申请了一台内网主机做扫描服务器,安装Nessus.由于客户严格限制内网主机不能开通外网访问权限,折腾了一下Nessus离线激活和离线更新漏洞插件,详细过程截图记录. 一. ...
- LeetCode 429 N-ary Tree Level Order Traversal 解题报告
题目要求 Given an n-ary tree, return the level order traversal of its nodes' values. (ie, from left to r ...
- redis分布式锁(转)
add by zhj: 如果不考虑键的删除,而是让他过期后自动失效,那用set就可以实现锁了 原文:http://www.cnblogs.com/yjf512/archive/2017/03/22/6 ...