Thalia___-优快云博客

原创从零封装 Vue3 组件库（五）：Message 消息提示与函数式调用

前四篇我们封装的 Button、Input、Dialog、Switch 都是组件式调用——写在模板里，通过v-model或 props 控制。但有一类组件，我们希望在任意地方// 希望在接口请求成功后，直接弹出一条提示Message.success('保存成功')这就是函数式调用。本篇封装 Message 消息提示组件，涉及动态创建组件、render()渲染函数、Teleport挂载到 body 等高级用法。要点一句话用 JS 动态创建组件实例，不依赖模板unmount()

2026-09-14 20:08:24 200

原创从零封装 Vue3 组件库（四）：Switch 开关组件与 before-change 钩子

本篇封装 Switch 开关组件，涉及v-model自定义绑定值（true-value）和切换前钩子。要点一句话true-value支持自定义任意类型的绑定值切换前校验，同步/异步都支持样式通过类控制背景和滑块位置。

2026-09-06 20:28:20 161

原创从零封装 Vue3 组件库（三）：Dialog 弹窗与 Teleport 传送门

本篇封装 Dialog 弹窗组件，涉及<Teleport>传送门、插槽（slot）、v-model控制显隐、以及动画。难度比 Button 和 Input 稍高，但代码量不大。

2026-08-30 20:26:55 166

原创列表动画中的 move 类到底有什么用？

在 Vue 动画系列的第二篇中，我们介绍了组件，可以实现列表的增删改动画。其中有一个关键但容易被忽略的类——.list-move。很多同学在写列表动画时，发现删除一个元素后，后面的元素确实是平滑移动上去的，但不知道为什么。还有的同学发现自己的列表删除后元素会"跳"上去，那是因为漏写了.list-move。今天这篇短文，专门来搞懂move类到底有什么用、怎么用。要点一句话总结move类的作用让列表元素位置变化时平滑过渡，而不是瞬间跳动关键代码原理Vue 自动计算新旧位置偏移量，用。

2026-08-16 12:25:56 206

原创从零封装 Vue3 组件库（二）：Input 组件与 v-model 双向绑定

上篇我们从零搭建了组件库项目，封装了第一个 Button 组件。通过props传参、emit抛事件，实现了不同样式和状态的按钮。但按钮本质上是一个「展示型」组件——它不持有数据，只负责触发事件。而Input 输入框则完全不同：它需要和父组件共享数据，用户输入时实时更新。本篇就来封装 Input 组件，核心是 v-model双向绑定的实现。核心要点一句话总结v-model本质是的语法糖Input 封装通过modelValueprop 接收值，通过抛出新值额外功能clearablesize。

2026-08-09 17:41:33 311

原创从零封装 Vue3 组件库（一）：项目搭建与 Button 组件

之前写完了 Vue 动画系列，对和有了深入理解。这次开启一个新系列——从零封装一个 Vue3 组件库。为什么写这个？因为学 Vue 也有一段时间了，但之前写的都是业务页面，从来没有试过自己封装一个完整的组件。Button、Input 这些天天在用的东西，看着简单，真要自己动手写的时候，反而不知道从哪里开始。我意识到一件事：只会调用现成的组件，和能手写出一个类似的组件，对 Vue 的理解深度是完全不同的。能写出来，才说明真的懂了。本文是系列第一篇，从项目搭建开始，封装第一个 Button 组件。

2026-08-02 10:50:45 361

原创 Vue 动画完全指南（四）：性能优化 + 第三方库

淡入淡出

2026-07-26 19:45:06 276

原创 Vue 动画效果：实战，弹窗、抽屉、列表页

前两篇我们分别掌握了和的核心用法，知道了类名怎么控制、列表动画怎么实现。但把这些知识点放到真实项目中，又会碰到新的问题：弹窗的遮罩层和内容层如何分别控制动画？抽屉菜单从左侧滑入和从右侧滑入有什么区别？列表页加载数据时如何加骨架屏动画？核心要点一句话总结弹窗动画遮罩层控制opacity，内容层控制transform，用 CSS 层级组合分开控制抽屉动画遮罩逻辑同弹窗，内容层用translateX控制滑入滑出列表页动画增删用，排序用move，初始加载用appear组件封装每个动画组件用独立的。

2026-07-19 00:42:54 322

原创 Vue 动画完全指南（二）：＜TransitionGroup＞列表动画与进阶用法

在上一篇中，我们掌握了组件的核心用法，实现了单个元素的进入/离开动画。但实际开发中，我们更多需要处理的是列表——增删改、排序、筛选……这些场景下，单个元素的过渡组件就不够用了。本篇将带你掌握组件，搞定列表场景的流畅过渡动画，让列表的每一个变化都流畅自然。核心概念一句话总结vs单元素用前者，多元素列表用后者tag 属性控制渲染成什么标签move 类元素位置变化时的过渡动画，关键代码 transition: transform 0.3s列表 key 规则。

2026-07-12 12:47:48 324

原创 VUE动画效果（一）：基础篇，＜Transition＞组件的 6 个过渡类名和基本用法

本文是《Vue 动画效果》系列的第一篇，聚焦于最核心的组件，带你搞懂它的 6 个过渡类名、name 属性、duration 属性以及与 v-if/v-show 的配合。掌握这些，你就能写出流畅的进入/离开动画了。核心概念一句话总结6个过渡类名进入/离开各 3 个阶段，配合 name 前缀控制样式name 属性类名的前缀，默认是 v-，建议总是自定义duration 属性控制动画时长，可统一或分别设置v-if 与 v-showv-if 有完整动画，v-show 只有进入。

2026-07-05 17:11:07 253

原创 SQL 语句六个阶段

SQL 语句六个阶段FROM（包括 JOIN）→ WHERE → GROUP BY → HAVING → SELECT（包括计算表达式、DISTINCT、TOP）→ ORDER BY1、FROM（含 JOIN）：确定数据源。执行 FROM 子句指定的表，如果存在 JOIN，则根据 ON 条件将左表和右表进行笛卡尔积（或匹配）并合并，生成一个虚拟的中间结果集（VT1）。（核心：确定数据来源，把要用到的表关联起来，拼成一张“大宽表”。2、WHERE：对 FROM 阶段生成的虚拟表应用 WHERE 条件。

2026-06-28 17:07:59 270

Thalia___的博客