背景:公司项目要求全部换成 vue3 ,而且也没有应用像 element-ui 一类的UI组件,用到的公共组件都是根据项目需求封装的,下面是使用vue3实现简单的tabs组件,我只是把代码分享出来,实现思路如果有需要等我项目不忙了在更,希望大家多提些建议,共同学习共同进步. tab-group.vue <template> <div class="tab-group"> <!-- tabRef 这块本来是用来实现下划线动态切换特效的,暂时没有写效果 --&…

由于业务需求(组件封装),需要在获取el-table下面的el-table-column实例 在 vue2.x 当中直接使用this.$children就可以获取到该实例 但是 vue3.x 弃用了$children,官方建议使用$ref获取子组件实例,由于el-table-column是通过插槽形式插入,且当el-table-column数过多时,不可能专门为每一个el-table-column都添加ref,在网上搜索之后发现有人建议使用$slot获取插入的组件实例,但是获取到的实例信息不足,…

各种UI库的功能都是非常强大的,尤其对于我这种不会 css 的人来说,就更是帮了大忙了. 只是嘛,如果再封装一下的话,那么用起来就会更方便了. 那么如何封装呢? 封装三要素 -- 属性.插槽.事件.方法 可以封装,但是原生UI库提供的强大功能不能给封装没了吧,吃了回扣可是不好滴. 那么如何做到不遗漏呢?先做一个合格的传声筒. 传递属性 先看看 el-input 提供的属性: 太长了,这里只截了一半. 这么多的属性,如果一个一个都弄到 props 里面,然后再一个一个绑定上去,这就太麻烦了. 我们…

本文分别使用 SFC(模板方式)和 tsx 方式对 Element Plus el-menu 组件进行二次封装,实现配置化的菜单,有了配置化的菜单,后续便可以根据路由动态渲染菜单. 1 数据结构定义 1.1 菜单项数据结构 使用 element-plus el-menu 组件实现菜单,主要包括三个组件: el-menu:整个菜单: el-sub-menu:含有子菜单的菜单项: el-sub-menu:没有子菜单的菜单项(最末级): 结合菜单的属性和展示效果,可以得到每个菜单项包括:菜单名称.菜单…

使用了2种方法去封装input组件(.vue与.jsx) 代码如下 父组件: <template> <div> <h1>input组件封装</h1> <Input v-model:val="val"></Input> <InputJsx v-model:valJsx="valJsx"></InputJsx> <button @click="getVal&q…

[vue3]封装自定义全局插件 原vue2方法 main.js import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' import plugin from './···/plugin/index' //安装自定义的插件 Vue.use(plugin); new Vue({ router, store, render: h => h(Ap…

前言 如果是经验不够多的同志在学习Vue的时候,在最开始会接触到Vue传统的方式(选项式API),后边会接触到Vue3的新方式 -- 组合式API.相信会有不少同志会陷入迷茫,因为我第一次听到新的名词时也陷入了困扰,所以,到底什么是组合式API呢? 选项式API的坏处 代码碎片化 通常在维护和开发一个组件时,分为 data.methods.computed.props 等.假如有一些业务在选项 API 的 data.methods.computed 中进行操作.把要关注的相同视角分别用不同颜色的…

方便基础业务开发封装的一套组件,基于vue2.5.x和element-ui,可以通过配置自动生成表格展示,表格新增.编辑功能.分页.筛选项.自定义显示表格数据等功能. 先上演示图片 ---------------------------------- 筛选部分 ----------------------------------------------------------- 自定义按钮部分 -------------------------------- 表格主体部分 -----------…

基于vue3+electron11跨端仿制QQ桌面应用实战Vue3ElectronQchat. 使用vue3+electron+vuex4+ant-design-vue+v3scroll+v3layer等技术构建跨平台模仿QQ|TIM界面聊天应用.实现了发送富文本消息.图片/视频/链接预览.拖拽发送图片.调用dll截图.朋友圈等功能.支持多开窗口|父子modal窗口.换肤等操作. 一.技术栈 编码工具:vscode 框架技术:vue3.0+electron11.2.3+vuex4+vue-rou…

前情回顾 基于 el-form 封装一个依赖 json 动态渲染的表单控件 Vue3 封装第三方组件(一)做一个合格的传声筒 功能 使用 vue3 + element-plus 封装了一个查询控件,专为管理后台量身打造,支持各种查询需求: 多种查询方式 快捷查询 更多查询 自定义查询 支持防抖 清空每个查询条件 依赖 json 动态创建 有些控件自带清空功能,有些没有自带清空功能,那么就需求我们手动加上清空的功能. 技术栈 Vite2 Vue3 element-plus 查询控件设计 [自我感觉…