Tag: Vue

All the articles with the tag "Vue".

• CSS Grid + nth-child：极简实现搜索表单展开收起

  6 Nov, 2023

  利用 CSS Grid 布局和 nth-child 选择器，无需复杂 JavaScript 即可实现表格查询表单的展开收起功能，代码简洁优雅。

• Vue3 + iframe 优雅通讯方案：基于 PostMessage 和 Mitt 的实现

  6 Jun, 2023

  封装 postMessage 通讯机制，结合 mitt 事件总线和 Promise 风格，在 Vue3 中打造类型安全、易于维护的 iframe 跨窗口通讯解决方案。

• Vue3 模板复用新思路：useReusableTemplate 实战

  24 May, 2023

  借鉴 Angular 的模板复用思想，通过自定义 Hook 在 Vue3 中实现无需封装组件即可复用模板代码，让代码更简洁、更灵活。

• Vue3 服务式组件设计：用 Composition API 打造优雅的 Toast

  8 Jul, 2022

  利用 Vue3 的 createVNode 和 render 函数实现服务式 Toast 组件，深入理解 Composition API 的强大能力和组件化的最佳实践。

• Vue3 与 Web Components 完美融合：defineCustomElement 深度实践

  30 Jun, 2022

  探索 Vue3 的 defineCustomElement API，学习如何将 Vue 单文件组件转换为标准 Web Components，实现跨框架的组件复用。

• Vite + Vue3 优雅使用 SVG 图标：自动化雪碧图方案

  26 Oct, 2021

  通过自定义 Vite 插件自动将 SVG 图标转换为雪碧图，配合 Vue3 组件封装，实现高性能、易维护的 SVG 图标解决方案。

• Vue2 电梯导航组件：基于 ElementUI 的锚点定位方案

  23 Jul, 2021

  结合 ElementUI 和 velocity-animate 打造流畅的电梯导航组件，支持点击跳转和滚动联动，完美解决长表单页面的导航需求。

• Vue2 自定义拖拽指令：优雅实现元素拖动功能

  25 Dec, 2020

  基于 Vue2 自定义指令和 CSS Transform 实现流畅的元素拖拽功能，支持边界检测和位置记忆，一个指令搞定所有拖动需求。

• Vue2 服务式组件开发：打造优雅的全局 Loading

  14 Dec, 2020

  从零实现 Vue2 服务式 Loading 组件，深入理解 Vue.extend、$mount 等核心 API，掌握函数式调用组件的设计模式，提升代码的优雅度和复用性。