首页 > 其他分享 >vue实现点击复制功能(无需安装库)

vue实现点击复制功能(无需安装库)

时间:2023-10-21 15:58:38浏览次数:33  
标签:function el 无需 vue textarea 点击 复制 copy document

 

1.标签

<button v-copy="text">复制文本</button>

text是要复制的内容,在data函数中

 

2.在main.js中注册copy指令

Vue.directive('copy', {
bind: function(el, binding) {
el.$copy = function() {
const textarea = document.createElement('textarea');
textarea.value = binding.value;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('Copy');
document.body.removeChild(textarea);
}
el.addEventListener('click', el.$copy);
},
unbind: function(el) {
el.removeEventListener('click', el.$copy);
}
});
完成!

 

标签:function,el,无需,vue,textarea,点击,复制,copy,document
From: https://www.cnblogs.com/shuhan-hou/p/17779072.html

相关文章

  • VUE
    在body标签中编写视图       ......
  • [Vue]键盘事件
    1.Vue中常用的按键别名:   回车=>enter   删除=>delete(捕获“删除”和“退格”键)   退出=>esc   空格=>space   换行=>tab(特殊,必须配合keydown使用)   上=>up   下=>down   左=>left  右=>right2.Vue未提供别名的按键,可以使用按键原始的key值去......
  • 基于Vue.js和Spring Boot的口罩自助售卖系统:设计、实现与技术深度解析
    本文介绍了一种基于Vue.js和SpringBoot的口罩自助售卖系统的设计与实现。该系统通过前端Vue.js框架和后端SpringBoot框架的结合,实现了用户注册登录、口罩浏览购买、订单管理等功能。通过详细的代码示例和技术深度的解析,读者能够全面了解系统的设计思路和实现方法。1.引言随着全......
  • 详解vue大文件视频切片上传的处理方法
    前端上传大文件、视频的时候会出现超时、过大、很慢等情况,为了解决这一问题,跟后端配合做了一个切片的功能,接下来就详细的给大家介绍一下vue大文件视频切片上传的处理方法,需要的朋友可以参考下 前端上传大文件、视频的时候会出现超时、过大、很慢等情况,为了解决这一问题,跟......
  • SpringBoot Vue3打造企业级一体化SaaS系统[最新版完结]
    点击下载:SpringBoot+Vue3打造企业级一体化SaaS系统     提取码:3ixbSpringBoot和Vue3是目前十分盛行的JavaWeb开发技术栈。SpringBoot能够快速构建Web应用程序,并提供许多有用的功用,如自动配置、快速开发、高效性能、易于部署等。Vue3是一种盛行的前端框架,它能够协助开发......
  • QT cmake工程使用QXlsx源码操作execl,无需编译QXlsx,也不需要下载其他东西,windows和ubu
    一、下载地址:链接二、进入下载好的QXlsx目录下,取出QXlsx目录和README.md待用三、用qt创建一个简单的cmake工程,将QXlsx目录和README.md文件放到cmakelists.txt所在目录 四、修改cmakelists.txt文件cmake_minimum_required(VERSION3.5)project(xlsxTestLANGUAGESCXX)......
  • Vue前端框架
    Vue渐进式javacript框架插件可选安装-谷歌访问助手这是一个谷歌浏览器上的插件安装必安插件(文件夹)下的google-access-helper-2.3.0(文件夹)复制到你想放的文件夹下(安装后不可以挪动位置)建议D盘下,弄一个专门按软件的文件夹打开谷歌浏览器-扩展程序-开......
  • Vue.js设计与实现 pdf电子版 霍春阳
    Vue.js设计与实现pdf电子版霍春阳作者: 霍春阳出版年: 2022-2-10ISBN: 9787115583864连接提取码:yfji干货密度极高,作者写技术文章确实有一套。既有API设计的背景分析,又有规范级别的细节讲解,看完后基本能从头写一个Vue3出来了。......
  • 6基于SpringBoot + Vue 的超市进销存系统-计算机毕业设计源码+LW文档
    摘 要 超市管理系统是指一种针对超市的信息化管理系统,它通过计算机技术和网络技术,对超市的采购、销售、库存等业务进行管理和控制。随着社会经济的发展和人们生活水平的提高,超市已经成为人们日常生活中必不可少的消费场所,而超市管理系统的出现则极大地提高了超市的经营效率和......
  • Vue3 typescript script setup获取范型组件的ref
    原博客地址:https://juejin.cn/post/7247433208437850169?from=search-suggest在typescript下,如果想获取带类型的组件模板引用,官方文档中说明了方式:https://cn.vuejs.org/guide/typescript/composition-api.html#typing-component-template-refsconstmodal=ref<InstanceTy......