vue项目如何实现剪切板功能--vue-clipboard2
2023-09-11 14:19:55 时间
一、vue项目利用vue-clipboard2实现剪切板的功能
1、安装vue-clipboard2插件:cnpm install --save vue-clipboard2
2、main.js添加
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)
3、copy组件:message绑定需要复制的文本/onCopy复制成功回调/onError复制失败回调
v-clipboard:copy="message"
v-clipboard:success="onCopy"
v-clipboard:error="onError"
二、原生js实现点击按钮,复制文本框中的的内容
<body>
<textarea cols="20" rows="10" id="test">用户定义的代码区域</textarea>
<input type="button" onClick="copyUrl2()" value="点击复制代码" />
</body>
<script type="text/javascript">
function copyUrl2(){
var Url2=document.getElementById("test");
Url2.select(); // 选择对象
document.execCommand("Copy"); // 执行浏览器复制命令
alert("已复制好,可贴粘。");
}
</script>
相关文章
- 使用Vue-cli 脚手架生成的项目使用Vetur+ Prettier + ESlint的配置设置代码规范和格式
- vue-router 的原理
- vue项目如何实现返回上一页
- vue项目如何实现返回上一页
- [Vue @Component] Simplify Vue Components with vue-class-component
- [Vue] Get up and running with vue-router
- Vue入门教程:node安装vue命令行工具及启动项目
- 【视频】vue单文件组件vue-cli
- vue商城项目开发:浏览器自动访问、路由样式修改及定义和导入组件
- 使用Vue封装过组件吗?有哪些?讲一下他们是怎么实现的
- vue 中插槽共有几种,及插槽的作用
- Atitit 项目界面h5化静态html化计划---vue.js 把ajax获取到的数据 绑定到表格控件 v2 r33.docx
- Vue项目使用file-saver将html转word文件、把html内容下载保存导出到本地生成doc文件包括图片:前端下载利器FileSaver
- vue项目报错:warning Disallow self-closing on HTML void elements (<img/>)
- 计算机毕设项目 40个高质量SSM+VUE毕设项目分享【源码+论文】(六)
- Springboot+Vue实现将图片和表单一起提交到后端,同时将图片地址保存到数据库、再次将存储的图片展示到前端vue页面
- Mac中如何搭建Vue项目并利用VSCode开发
- 学会在Vue项目中插入高德地图JS API与地图的相关设置,看这一篇就够了~(保姆级精简教学)
- 解决vue-cli项目打包出现空白页和路径错误的问题
- vue-tour快速入门:VUE项目中如何使用vue-tour新手引导指引插件?怎样使用?包含具体实例
- Vue学习笔记——vue-router
- 小白的 Vue + Element-Ui 前端开发框架的构建