![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
文章平均质量分 64
缓次郎
这个作者很懒,什么都没留下…
展开
-
[Vue3] 对象的双向绑定
Vue2 和 Vue3 实现对象的双向绑定的思路不同,需要注意二者之间的区别。如果监听的不是对象,则可以直接用 computed 的方式实现双向绑定。原创 2023-08-18 17:10:35 · 397 阅读 · 0 评论 -
ElementUI Table 布局的调试
ElTable 提供了很多自定义表格属性的回调函数,但是官方文档中并没有什么例子。实际开发中,需要结合实际的 DOM 来调试,同时也要清楚 ElTable 的每个元素的作用,这样才能少走弯路。原创 2022-10-21 10:29:44 · 631 阅读 · 0 评论 -
[js] 实现侧边菜单可用鼠标拖动调整大小的功能
element-ui 提供了一个 nav-menu 组件,默认情况下该组件没有拖动调整大小的功能。下面通过代码为 nav-menu 添加这个功能。原创 2022-10-20 14:34:35 · 1003 阅读 · 0 评论 -
ElementUI 组件设置全局默认值
最近碰到个需求,要求把管理系统的所有 `el-select` 元素都添加 `clearable` 属性。整个管理系统估计有几百个页面,`el-select` 的数量更是不计其数,如果用传统方法一个一个的找然后添加属性,绝对是不现实的。下面介绍另一种更加方便的方法。原创 2022-10-19 18:02:51 · 2081 阅读 · 0 评论 -
【Vue】Vue 判断插槽内容是否加载完成
判断插槽内容是否加载完成,实现显示占位内容等功能原创 2022-10-04 11:27:11 · 2540 阅读 · 0 评论 -
ElMessage 组件实现
源码在线预览功能分析参考 ElementPlus 官网给出的例子,我们的 Message 组件至少需要:自定义各种类型的 Message(error、info、success 等)提供静态方法调用,如 Message.success()进入、退出动画;Message 消失后上移动画Message 组件样式方面 Messge 组件非常简单,就是个 fixed 居中的 div,而进入、退出动画可以通过 transition 实现,消失可以通过 props 调用回调通知调用者。<tem原创 2022-05-25 17:18:55 · 5974 阅读 · 0 评论 -
实现 ElementPlus 的 MessageBox
ElementPlus 的 MessageBox 主要功能分析提供一个函数用来展示消息框,这个函数提供如标题、内容等配置参数消息框出现和消失时有动画使用 Promise 获取消息框的结果基本思路Vue 中动态显示一个组件,无非就是通过 h 函数创建 VNode,并且把这个 VNode 挂载在 DOM 树上。这里有两种挂载的方式:createApp在 main.js 中创建 Vue 实例用的就是这种方法,这也是 Vue3 中代替 Vue2 的 Vue.extend 的方法,简单使用案例如下:原创 2022-05-25 10:53:19 · 2627 阅读 · 0 评论 -
【Vue3】实现 el-tab 的基本功能
这次我们要实现两个组件:Tab.vue 和 TabItem.vue,其中 TabItem 是 Tab 的插槽内容。实际上不用封装组件也能达到类似的效果,但是考虑到语义化和可复用性等要求,封装一个 Tabs 组件还是有必要的。根据 Vue 的风格指南,组件名需为两个以上的单词,以避免和原生 HTML 的标签冲突,这里为了简单起见不实现这个要求。在线体验Tabs 的基本功能<Tab :active-index="activeIndex"> <TabItem v-f原创 2022-04-20 17:47:42 · 2359 阅读 · 1 评论 -
v-lazy自定义指令实现图片懒加载(非IntersectionObserver方案)
看了 ElImage 的源码后,改进了之前用 IntersectionObserver 实现的图片懒加载指令。在我的实现中 IntersectionObserver 的主要问题是不支持 rootMargin,只能在图片进入视口时加载。而 ElImage 的实现方案是判断图片是否进入滚动容器,在这个基础上我们略加配置即可实现 topMargin 预加载的功能。import { useThrottleFn, useEventListener} from '@vueuse/core'functio原创 2022-04-08 20:23:16 · 814 阅读 · 0 评论 -
ElementPlus 源码学习之 el-image 的基本实现思路
el-image 的基本功能有:加载中占位加载失败占位加载成功显示图片图片懒加载先考虑加载占位的情况,我们不难发现加载有成功、失败、加载中这三种状态,由于加载成功这个状态可以视为其他两种状态的排除,所以实际上我们只需要定义两个状态:// 默认为加载中状态loading = ref(true);// 默认加载没有出错error = ref(false); 然后提供插槽让用户可以自定义加载中和出错的图片占位:<template> <slot v-if="load原创 2022-04-05 16:08:21 · 6332 阅读 · 0 评论 -
【Vue】Element-Plus 源码学习笔记——实现一个基本的 ElMessage 组件
先贴下 Element-Plus ElMessage 源码的网址。我们需要实现的效果类似 ElMessage,即能够显示多个消息、上一个消息消失下面的消息会自动往上移动、进入移出动画、自定义消息和持续时间。其他选项这里不考虑。大体思路我们的 ElMessage 组件通过函数调用动态显示,无需事先在页面中放入组件,这样能更灵活也更方便。实现的基本思路是使用函数动态渲染组件到页面上。createVNode 和 render实际上 createVNode 是 h 函数的别名,这两个函数的功能是创建一个 V原创 2022-04-04 14:41:48 · 3022 阅读 · 2 评论 -
【Vue】Vue-Router 差缺补漏
最近看了 vue-router 的官网,学到了不少新东西,现记录如下404 匹配const routes = [ { path: '/:pathMatch(.*)*', component: () => import('NotFound.vue') }]其中 pathMatch 是 $route.params 的 key 的名字,可以任意。后面跟的是正则表达式.*,表示匹配任意路径。到这里实际上 404 匹配前端路由这部分就完成了,如果你想把匹配的值分开,可以在匹配正则后面再.原创 2022-03-07 15:32:39 · 807 阅读 · 0 评论 -
【Vue3】ref那些事
名词响应式引用: ref(xx) 的返回值响应式对象: reactive(xx) 的返回值ref 相关const num = ref(0);console.log(num.value);为什么要使用 refJS中 number、string 等原始数据类型是值传递的,而对象是引用传递。如果我们把一个原始数据传入一个函数,那么传入函数中使用的这个数据已经不是原先传入的数据了,这会导致响应式丢失的问题。用 ref 创建响应式引用则统一了传参为引用传递,用 .value 统一了获取原始值的方式,原创 2022-03-03 15:57:20 · 665 阅读 · 0 评论 -
Vue3 源码学习之实现 mini-vue
总的来说实现 mini-vue 需要实现以下几个部分。渲染部分创建 VNode 函数首先需要搞清楚 VNode 是什么。VNode 的 全称叫 Virtual Node,顾名思义,指的是虚拟 Node(DOM)。在 JavaScript 中,VNode 实际就是一个 JS 对象。这个对象通过 mount 函数转换成真实 DOM,挂载在 DOM 树中。分析 VNode 需要的属性VNode 转换为真实 DOM 所对应的标签名VNode 的本身属性VNode 的 children 结点(这些节点原创 2022-01-05 21:18:13 · 755 阅读 · 0 评论 -
webpack5 + vite2 入门
Webpack笔记从使用 webpack 的角度来说,搞清楚 webpack 的配置即可安装需要 node 14+ 和 npm(安装 node 时自动安装)。全局安装npm install webpack webpack-cli -g局部安装(推荐)npm init -y-D 表示安装的开发依赖。加不加并不影响,但是推荐加,这样项目 package.json 会整洁些。npm install webpack webpack-cli -D基本使用在新建项目的时候使用 webpack原创 2021-12-31 20:26:55 · 1043 阅读 · 0 评论 -
Vue3 + Typescript 写个简单但是功能完善的 todo app
vue3 入门实践实现的功能todo 分类部分添加todo分类、重命名todo分类、删除todo分类todo列表部分编辑todo、添加todo、删除todo、筛选todo状态、标记todo状态源码:https://github.com/magicFeirl/Vue3Todo线上地址:http://vue3-todo-nine.vercel.app/...原创 2021-07-23 21:57:36 · 108 阅读 · 0 评论