功能

点击按钮或指定位置后将数据复制到剪贴版,避免手动复制

核心方法是

document.execCommand("Copy");

但是这个是需要文字被选中时才可以复制成功

所以第二个方法就是创建一个input后再自动选择内容,实现复制功能

效果图

上代码(heam标签里面的依赖别忘记改路径)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--    element-ui导入--><link rel="stylesheet" href="../js/element-ui/lib/theme-chalk/index.css"><!--    index样式导入--><link rel="stylesheet" href="../css/index.css"><script src="../js/vue.js"></script><script src="../js/axios-0.18.0.js"></script><script src="../js/element-ui/lib/index.js"></script>
</head>
<style>.demo-table-expand {font-size: 0;}.demo-table-expand label {width: 90px;color: #99a9bf;}.demo-table-expand .el-form-item {margin-right: 0;margin-bottom: 0;width: 50%;}
</style>
<body><div id="div"><span>可用试试用鼠标选中我后复制(win+e查看剪贴版)</span><el-button type="primary" plain @click="selectCopy()">选中文字后复制</el-button><!--             复制密码按钮--><template><el-table:data="tableData"style="width: 100%"><el-table-column type="expand"><template slot-scope="props"><el-form label-position="left" inline class="demo-table-expand"><el-form-item label="复制商品"><span @click="copy(props.row.name)">{{ props.row.name }}</span></el-form-item><el-form-item label="复制店铺"><el-button type="text" @click="copy(props.row.shop)" >复制店铺</el-button></el-form-item></el-form></template></el-table-column><el-table-columnlabel="商品 ID"prop="id"></el-table-column><el-table-columnlabel="商品名称"prop="name"></el-table-column><el-table-columnlabel="描述"prop="desc"></el-table-column></el-table></template></div>
</body><script>new Vue({el: "#div",data: {tableData: [{id: '12987122',name: '好滋好味鸡蛋仔',category: '江浙小吃、小吃零食',desc: '荷兰优质淡奶，奶香浓而不腻',address: '上海市普陀区真北路',shop: '王小虎夫妻店',shopId: '10333'}, {id: '12987123',name: '好滋好味鸡蛋仔',category: '江浙小吃、小吃零食',desc: '荷兰优质淡奶，奶香浓而不腻',address: '上海市普陀区真北路',shop: '王小虎夫妻店',shopId: '10333'}],copyData: null},methods: {// 选中文字后复制selectCopy() {document.execCommand("Copy"); // 执行浏览器复制命令this.$message({message: '复制成功',type: 'success'});},// 点击复制copy(data) {let url = data;let oInput = document.createElement('input');oInput.value = url;document.body.appendChild(oInput);oInput.select(); // 选择对象;console.log(oInput.value)document.execCommand("Copy"); // 执行浏览器复制命令this.$message({message: '复制成功',type: 'success'});oInput.remove()}}})
</script>
</html>

Vue+element实现点击复制功能相关推荐

vue+element 实现点击左侧树形控件实现右侧滚动定位
树形控件实现定位+平滑滚动(左树形右内容) vue+element 实现点击左侧树形控件实现右侧滚动定位具体实现代码如下: <template><div class="d ...
vue element 的 el-cascade 组件如何实现多选点击确认提交操作
1. 实现效果做这个也是自己踩了好多坑,比如: 用第三方的 el-cascader-multi 多选组件,不能实现自己想要的效果,element 最新版 2.12.0 就已经有完善,不需要使用那个第 ...
element ui 图片控件排序_JAVA全栈面试前端基础之四 Vue+Element框架快速开发
本文主要包括以下4个内容什么是ElementUI Vue 中引入ElementUI Vue+elementUI构建后台管理系统开源项目推荐 1.什么是ElementUI 官网:https://el ...
超美观的 Vue+Element 开源后台管理 UI
点击上方蓝色"方志朋",选择"设为星标" 回复"666"获取独家整理的学习资料! EuiAdmin是基于Vue+Element等组件联合开发 ...
vue + element ui 的后台管理系统框架_从零开始搭建 VUE + Element UI后台管理系统框架...
点击右上方红色按钮关注"web秀",让你真正秀起来前言后台管理系统前端框架,现在很流行的形式都是,上方和左侧都是导航菜单,中间是具体的内容.比如阿里云.七牛云.头条号.百家号等 ...
超优 Vue+Element+Spring 中后端解决方案
今日推荐推荐一款开源 Java 版的视频管理系统推荐3个快速开发平台前后端都有项目经验又有着落了 14个项目转载:toutiao.com/i6911704074815767048 作者:we ...
介绍一款贼美的Vue+Element开源后台管理UI
点击上方好好学java ,选择星标公众号重磅资讯.干货,第一时间送达今日推荐:又一程序员进了ICU:压垮一个家庭,一张结算单就够个人原创100W+访问量博客:点击前往,查看更多前言 Eu ...
Vue + Element UI 实现登陆注册基本demo实例
Vue + Element UI 实现权限管理系统前端篇(二):Vue + Element 案例导入项目打开 Visual Studio Code,File --> add Folder ...
vue+element【后台案例 · 搜集 · 集锦】
案例一:https://github.com/taylorchen709/vue-admin cnblogs.com · 博客地址 CSDN · 博客地址简书 · 地址 github · 源码地址 ...

Vue+element实现点击复制功能

功能

效果图

上代码(heam标签里面的依赖别忘记改路径)

Vue+element实现点击复制功能相关推荐

最新文章

热门文章