Vue 实现复制功能,不需要任何结构内容直接复制方式


Posted in Javascript onNovember 09, 2019

介绍:

在做复制文档功能时,考虑到是个不太会复用的小功能,最后选择直接用 document.execCommand 方法实现。

在查阅资料时候,发现其他人都需要在页面上写上结构、ID。然后捕捉某个ID获取内容,感觉很不方便。

使用:

methods: {
  copyShaneUrl(shareLink){
    var input = document.createElement("input");   // 直接构建input
    input.value = shareLink;  // 设置内容
    document.body.appendChild(_input);    // 添加临时实例
    input.select();   // 选择实例内容
    document.execCommand("Copy");   // 执行复制
    document.body.removeChild(_input); // 删除临时实例
  }
 }

方法代码如上,然后绑定需要执行当前方法的按钮

<li v-for="(item, index) in meetingList">
  <button @click="copyShaneUrl(item.shareUrl)">复制分享链接</button>
</li>

以上这篇Vue 实现复制功能,不需要任何结构内容直接复制方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一些实用的jQuery代码片段收集
Jul 12 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
Feb 13 Javascript
jQuery实现字符串按指定长度加入特定内容的方法
Mar 11 Javascript
js+html5绘制图片到canvas的方法
Jun 05 Javascript
JavaScript继承学习笔记【新手必看】
May 10 Javascript
微信小程序 MD5加密登录密码详解及实例代码
Jan 12 Javascript
JavaScript、C# URL编码、解码总结
Jan 21 Javascript
bootstrapValidator 重新启用提交按钮的方法
Feb 20 Javascript
echarts学习笔记之图表自适应问题详解
Nov 22 Javascript
详解Chai.js断言库API中文文档
Jan 31 Javascript
详解webpack自定义loader初探
Aug 29 Javascript
ES6小技巧之代替lodash
Jun 07 Javascript
Vue实现点击按钮复制文本内容的例子
Nov 09 #Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
Nov 09 #Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
Nov 09 #Javascript
js实现的在本地预览图片功能示例
Nov 09 #Javascript
vue 取出v-for循环中的index值实例
Nov 09 #Javascript
Vue v-for循环之@click点击事件获取元素示例
Nov 09 #Javascript
Vue实现页面添加水印功能
Nov 09 #Javascript
You might like
基于php实现长连接的方法与注意事项的问题
2013/05/10 PHP
php调用KyotoTycoon简单实例
2015/04/02 PHP
PHP大文件分块上传功能实例详解
2019/07/22 PHP
你真的了解JavaScript吗?
2007/02/24 Javascript
jQuery学习2 选择器的使用说明
2010/02/07 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
2014/06/20 Javascript
javascript自定义in_array()函数实现方法
2015/08/03 Javascript
js实现Form栏显示全格式时间时钟效果代码
2015/08/19 Javascript
js弹出对话框方式小结
2015/11/17 Javascript
Bootstrap表单布局
2016/07/19 Javascript
AngularJS表单验证中级篇(3)
2016/09/28 Javascript
ES6新特性一: let和const命令详解
2017/04/20 Javascript
基于Vue中点击组件外关闭组件的实现方法
2018/03/06 Javascript
微信小程序实现上传多张图片、删除图片
2020/07/29 Javascript
vue过滤器实现日期格式化的案例分析
2020/07/02 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
2020/08/07 jQuery
node.js如何根据URL返回指定的图片详解
2020/10/21 Javascript
[01:03:00]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第一局
2016/02/25 DOTA
浅谈Python中用datetime包进行对时间的一些操作
2016/06/23 Python
CentOS下Python3的安装及创建虚拟环境的方法
2018/11/28 Python
PyCharm汉化安装及永久激活详细教程(靠谱)
2020/01/16 Python
PyCharm配置anaconda环境的步骤详解
2020/07/31 Python
浅谈html5与APP混合开发遇到的问题总结
2018/03/20 HTML / CSS
DAWGS鞋官方网站:鞋,凉鞋,靴子
2016/10/04 全球购物
法国发饰品牌:Alexandre De Paris
2018/12/04 全球购物
资产评估专业大学生求职信
2013/09/29 职场文书
大学校园活动策划书
2014/02/04 职场文书
煤矿机修工岗位职责
2014/02/07 职场文书
《一个小村庄的故事》教学反思
2014/04/13 职场文书
中学生秋季运动会广播稿
2014/09/21 职场文书
社会工作专业自荐信
2014/09/26 职场文书
2014年党建工作总结
2014/11/11 职场文书
保研推荐信格式
2015/03/25 职场文书
情况说明书格式及范文
2019/06/24 职场文书
历史名人教你十五个读书方法,赶快Get起来!
2019/07/18 职场文书
mysql 8.0.24 安装配置方法图文教程
2021/05/12 MySQL