- 博客(529)
- 问答 (3)
- 收藏
- 关注
RSS订阅原创 Vue3 ref数组对象更新不及时的解决办法
但是，当我直接将新的数组赋值给arr.value时，Vue 无法拦截到这个操作，因为这实际上是直接改变了arr.value这个对象引用指向的地址，而不是改变了这个对象的某个属性。Vue 只能监测到通过arr.value获取的值的变化，而无法监测到arr.value本身的变化。使用展开操作符[...data]创建了一个新的数组实例，然后将这个新数组实例赋值给了arr.value，这样就相当于给arr.value这个对象添加了一个新的属性，并且 Vue 可以检测到这个属性的变化，从而触发页面重新渲染。
2025-07-18 21:17:25
219
原创 element-plus 二次开发奇淫技巧
本文详细介绍了Vue项目中封装第三方UI组件库的最佳实践。主要内容包括：1）保持原有组件接口的原则，通过$attrs实现属性透传；2）处理事件和插槽的继承方法，Vue3中$attrs整合了事件监听；3）暴露组件方法的技巧；4）v-model的双向绑定实现及避免单向数据流问题的解决方案；5）处理多表单组件的Proxy代理方案；6）封装useVModel工具函数复用逻辑。文章通过具体代码示例展示了Vue2和Vue3的不同实现方式，为组件封装提供了完整的技术方案。
2025-06-19 13:23:00
115
原创 vite + vue3 + ts 实现移动端(h5)模版
本文介绍了基于Vue3构建移动端H5项目的完整技术方案。主要内容包括： 项目采用flex+vw的响应式布局方案，使用postcss-px-to-viewport插件实现px到vw的自动转换 详细的项目目录结构设计，包含api、components、router等模块化组织 配置了完整的TypeScript支持，包括多个tsconfig文件的分工 集成Vant4移动端组件库，实现按需加载和主题切换功能 提供图标解决方案，支持SVG图标、Iconify在线图标和本地图标 实现了Pinia状态管理......
2025-06-19 13:16:11
308
原创 关键词高亮组件
本文介绍了一个基于Vue3和TypeScript实现的关键词高亮组件，该组件支持多种高亮场景，包括单关键词、多关键词、正则表达式匹配以及部分匹配等。组件提供丰富的可定制选项，如自定义高亮颜色、背景色、CSS类名等，并内置HTML转义功能防止XSS攻击。通过计算属性优化渲染性能，支持点击事件和hover效果。组件采用模块化设计，可以全局注册使用，适用于各种需要文本高亮的应用场景。使用示例展示了不同场景下的配置方法，体现了组件的灵活性和实用性。
2025-06-15 00:53:11
180
原创 el-table 自定义配置列
本文展示了两套Vue表格列配置方案：基础版实现了简单的列显示/隐藏功能，通过下拉菜单切换列显示状态；进阶版添加了全选/取消、确定/取消按钮、必选列禁用等功能，使用Element UI组件实现更完整的交互。两套方案都包含100条模拟数据和40个可配置列，通过计算属性动态过滤可见列。进阶版还处理了表格布局重排和必选项逻辑，提供了更完善的用户体验。
2025-06-15 00:51:04
103
原创 仿飞书部门选择器
本文实现了一个基于Vue3的多级部门选择器组件，包含树形结构展示、选择功能、面包屑导航和搜索模块。主要特点包括：1）采用Teleport组件实现模态框，支持滚动锁定；2）树形组件支持无限层级展开和父子节点联动选择；3）搜索功能实现跨层级模糊匹配并保留路径信息；4）组件化设计，分离为Dialog、SearchBox、Breadcrumb、TreeList和SelectedList等子组件；5）通过Vue3的组合式API管理状态，实现数据响应式更新。该组件提供完整的部门选择和展示功能，适用于各类组织架构选
2025-06-14 13:31:52
499
原创 el-checkbox实现全选反选
这里我们选中后直接打印的就是城市的名称。但是在实际工作中可能需要我们传递给后端的是当前选中的id或者是城市的code。以上这里我们反选功能的选中状态跟全选保持的是一致的。那么显然上面这种方式就实现不了，需要我们进行微调。下面我们实现的是反选状态与全选状态不保持一致。ok，那么下面我们就加上 反选 功能。官网给了一个简单的实例，代码如下。比如现在我们将数据格式变为如下。我们先来看看原生实现法。
2025-05-17 01:16:24
370
原创 父子组件双向绑定
后缀的属性给子组件，然后子组件可以直接通过更新该属性来实现双向绑定。修饰符时，父组件可以通过一个修饰符来传递一个带有。修饰符，它可以简化父子组件之间的双向绑定。似乎是不可以的，但是我们可以通过其他方式实现。，其他地方在使用这个组件时，是否也可以。
2025-05-02 21:42:48
323
原创 el-tree 实现树形菜单子级取消选中后父级选中效果不变
这种树形菜单的实现方案突破了传统树形组件的交互局限，为复杂的数据展示和权限管理提供了更灵活的解决方案。通过自定义节点选中逻辑，我们实现了更加精细和可控的用户交互体验。递归处理节点自定义选中规则灵活的节点状态管理。
2025-04-09 21:39:30
315
原创 二次封装 el-tooltip
再一个就是对于我们要展示的内容过长时 el-tooltip 对所展示的内容也不会换行显示，而是会显示在一行，这样就会出现会有很长一个 el-tooltip 提示，体验效果不是很友好。该组件不管你当前展示的内容有没有超出都会显示 el-tooltip 的内容，这样的话对用户的体验其实不是很好。对于 el-tooltip 的使用一般是当内容过长超出时鼠标移动上去才会显示 el-tooltip 的内容。但是对于 element-ui 来说。对上面的代码可以稍微优化一下下。
2025-03-22 15:39:47
254
原创 实现滚动组件
通过分析不能发现，我们不用去管里面到底是什么内容，我们只需关注最外层的滚动区域，然后将其抽离成一个滚动组件即可。：实现一个水平滚动视图，左右两侧有箭头按钮，可以根据内容动态调整滚动位置，同时在滚动到两端时隐藏相应的按钮。对于滚动这里我们利用css3的transform的translate来实现在x轴上进行滚动。这种效果就是只有但左或者右有足够的数据/元素时，就会出现箭头，点击点头后会进行切换。这里的样式我们用的是 styled-components 样式库。那么有了上面的基础后，下面我们就来着手实现了。
2024-12-11 10:15:56
188
原创 左右切换滚动组件封装
那么对于文章开头的那些效果就可以实现了，我们这里只是封装一个滚动容器组件，至于里面的内容是怎样的这就是由具体的业务去决定了。通过分析不能发现，我们不用去管里面到底是什么内容，我们只需关注最外层的滚动区域，然后将其抽离成一个滚动组件即可。：实现一个水平滚动视图，左右两侧有箭头按钮，可以根据内容动态调整滚动位置，同时在滚动到两端时隐藏相应的按钮。这种效果就是只有但左或者右有足够的数据/元素时，就会出现箭头，点击点头后会进行切换。注意：这里的 “左”、“右” 指的是左右切换的箭头，我们这里就用文字替代了。
2024-12-11 10:13:02
267
原创 vue3-基于element-plus实现定制化动态表单及校验
实现思路动态表单结构每个被保人用一个对象表示，包含基础信息（如姓名、证件类型、手机号等）和动态字段（如出生日期、通行证号等）。表单数据存储在reactive的数组中，每个对象表示一个被保人。字段动态显示使用v-show控制表单项的显示逻辑，例如切换 Tab 后显示不同的内容。根据IDType的选择动态添加或删除额外的表单字段。表单校验基于的el-form和，动态设置校验规则。校验规则根据字段类型和业务逻辑实时更新。动态新增与删除提供新增按钮动态添加被保人表单项。
2024-11-21 15:38:14
562
原创 vue3--自定义复选框
唯一的区别就是在vue3中没有this了，响应式数据需要用ref或者reactive去替代，在一个就是computed的使用方式不同。以下vue3版的代码是基于上面 vue2版的 div实现方式进行调整的。这里就直接给出代码了。
2024-10-30 12:30:54
259
原创 鸿蒙--页面跳转
基于Stage模型下的UIAbility开发，实现UIAbility内页面间的跳转和数据传递。页面路由：提供通过不同的url访问不同的页面，包括跳转到应用内的指定页面、用应用内的某个页面替换当前页面、返回上一页面或指定的页面等。
2024-10-21 13:43:23
337
原创 鸿蒙--进度条通知
主要介绍如何使用通知能力和基础组件，实现模拟下载文件，发送通知的案例。├──entry/src/main/ets // 代码区│ ├──common│ │ ├──constants│ │ │ └──CommonConstants.ets // 公共常量类│ │ └──utils│ │ ├──Logger.ets // 日志工具类│ │ ├──NotificationUtil.ets // 通知工具类│ │ └──ResourseUtil.ets // 资源文件工具类│ ├──entryability│ │
2024-10-21 12:45:23
459
原创 vue3--实现瀑布流-长列表-懒加载
在这一章我们主要学习：瀑布流、长列表、懒加载等功能瀑布流是一个比较复杂的通用组件，因为我们要尽量做到 普适，所以就需要考虑到各种场景下的处理方案，尽量可以满足日常开发的场景，所以这就在原本就复杂的前提下，让这个功能变得更加复杂了。
2024-10-21 09:26:20
1720
4
原创 鸿蒙--应用首次启动
基于自定义弹框、首选项和页面路由实现一个模拟应用首次启动的案例。实现四个页面，启动页、隐私协议页、广告页和应用首页。实现自定义隐私协议弹窗，点击协议可查看隐私协议具体内容。页面间的路由跳转。相关概念首选项：首选项为应用提供Key-Value键值型的数据处理能力，支持应用持久化轻量级数据，并对其修改和查询。数据存储形式为键值对，键的类型为字符串型，值的存储数据类型包括数字型、字符型、布尔型以及这3种类型的数组类型。自定义弹窗： 通过CustomDialogController类显示自定义弹窗。
2024-10-21 09:18:08
458
原创 鸿蒙--自定义系统级弹层
自定义常量封装// Thousandth：比例或者进度条// 数字常量// list space：列表项之间的间距// navigation title：导航标题export const ADD_TASK_TITLE: string = '添加任务';export const EDIT_TASK_TITLE: string = '编辑任务';// prompt message：提示信息。
2024-10-16 09:22:30
507
原创 uniapp-uniapp + vue3 + pinia 搭建uniapp模板
pnpm 跟 npm 和 yarn 的差距就是把原来每个项目安装 modules 放到统一的文件夹中，通过符号链接(软连接)和硬链接，注意项目要和 pnpm 统一存依赖的 modules 同盘，不然就等于丢失了 pnpm 的优势。首先，执行 npx tailwindcss init -p 命令会给我们自动生成 tailwind.config.js 文件在项目根目录下。这里首先需要在 static 目录下新建，style子目录，并在该子目录下新建 tailwind.css 文件。
2024-10-15 12:43:50
3445
1
原创 鸿蒙--设置项布局
我们将使用List组件Toggle组件以及Router接口，实现一个简单的设置页，点击将跳转到对应的详细设置页面。"color": [},},},},},},},},},},},},},},},},},},"value": "早起"},"value": "喝水"},"value": "吃苹果"},"value": "每日微笑"},"value": "每日刷牙"},"value": "早睡"},"value": "已开启"},
2024-10-15 11:16:30
610
原创 vue3--echarts基础封装和大屏封装（附源码）
在日常开发中，我们可能会用到 echarts ，但是如果每次使用都像下面这样去引入的话会导致最终项目打包体积变大echarts在vue或者react中使用存在的问题每个图表需要从头到尾写一遍完整的option配置，十分冗余在同一个项目中，各类图表设计十分相似，甚至是相同，没必要一直做重复工作窗口缩放时的适应问题在项目中如何按需引入echarts图表 减少打包体积的大小所以我们可以对echarts实现按需引入，也就是用到了哪些模块，哪些图表我们手动按需导入优化点就在于。
2024-10-15 11:12:03
943
原创 vue3--通用 popover 气泡卡片组件实现
当我们的鼠标移动到，触发弹层的视图和展示弹出层视图中展示的内容之间的空白区域时，会发现此时气泡会消失，这个很容易理解，因为当移到这个间隙的时候就会触发mouseleave事件，那么此时isVisable就会变回false。等等，我们不难发现这些前台项目(官网)等，它们的风格是不同的，那么这个时候可能一些组件库就无法满足我们的设计要求和一些炫酷的效果了，就需要我们自己去自定义一些通用的组件。这些对于一些后台管理系统来说是最好的选择，因为后台管理系统其实都是大同小异的，包括功能、布局结构等。
2024-10-14 08:54:53
660
原创 vue3--通用 button 组件实现
那么我们一般的做法就是使用 import xxx from "@/lib/Button/index.vue" ，但是如果要是每个都去这样引入使用，属实有些麻烦了，那么有没有一种方法可以简化呢？等等，我们不难发现这些前台项目(官网)等，它们的风格是不同的，那么这个时候可能一些组件库就无法满足我们的设计要求和一些炫酷的效果了，就需要我们自己去自定义一些通用的组件。这里我们的通用组件都放在了src下的lib目录下，作为一个通用的物料库。一般对于这种通用型的组件，就说明在一个系统中会很频繁的用到。
2024-10-14 08:45:44
453
原创 vue3--Tailwind CSS 安装和使用
这里首先需要在 assets 目录下新建，style子目录，并在该子目录下新建 tailwind.css 文件。：用于将 CSS 转换为 JavaScript 插件的工具，允许使用插件来处理 CSS 文件。：初始化生成 tailwind.config.js 文件。来解析和处理 Tailwind 的 CSS 指令。最后需要在 main.js 里引入该文件。：安装 tailwindcss 插件。
2024-10-14 08:29:32
529
原创 鸿蒙--商品列表
"color": [},},},},..."value": "精选"},"value": "手机"},"value": "服饰"},"value": "穿搭"},"value": "家居"},"value": "【新品上市】畅乐冰晶绿低脂新品"},"value": "【新品上市】奶茶自然清新亲近自然"},"value": "重磅推荐，MD新品试用中！},"value": "6662人评价 95%好评"},},},},},
2024-10-12 17:56:59
679
原创 vue3--vite通用组件自动化注册
在实际开发中，我们可能会遇见在一个项目中会很平凡的使用一个或者多个通用组件，那么我们一般采取的做法就是写一个公共的index.js页面，然后将所有的通用组件引入进去，再利用app.component一个一个去注册，最后在main.js中注册插件。defineAsyncComponent：创建一个按需加载的异步组件。Glob：帮助我们在文件系统重导入多个模块。通过以上就可以实现通用组件的自动化注册了。这里我们就举一个简单的示例来演示一下。通过以上方式就可以帮助我们完成了。
2024-10-12 16:30:05
565
原创 鸿蒙--WaterFlow 实现商城首页
2.停止滚动，是否触底了触底了才加载数据，反之不加载数据；，该自定义组件内部UI结构固定，仅与使用方进行数据传递，开发者可以将重复使用的UI元素抽象成一个方法，在build方法里调用。触底了--只有触底了才会进行数据加载，这里会出现加载两次的情况，因此在这里不适合进行数据的请求操作。│ │ │ └──CommonConstants.ets // 公共常量类。└──entry/src/main/resources // 资源文件目录。注册三个事件，开始滚动，滚动结束，滚动至列表尾部(触发两次，滚动至+回弹)
2024-10-11 16:17:25
556
原创 vue3--通用组件 popup 封装
在业务场景中，假设这里我们要实现点击 汉堡 后，会有一个自下而上的popup弹出层。因此这里我们需要先实现这样的一个公共的popup弹出层。到这里这个组件也就轻松的实现啦~
2024-10-11 08:31:12
720
原创 鸿蒙--下拉刷新+上拉加载
Refresh组件支持下拉刷新，包裹list组件，下拉事件中更新列表这里我们需要提前了解一下@Builder装饰器的基本用法ArkUI提供了一种轻量的UI元素复用机制@Builder，该自定义组件内部UI结构固定，仅与使用方进行数据传递，开发者可以将重复使用的UI元素抽象成一个方法，在build方法里调用。为了简化语言，我们将@Builder装饰的函数也称为“自定义构建函数”。文档中心在后面我们也会去详细的讲解 @Builder装饰器 的使用。
2024-10-10 09:11:05
654
原创 鸿蒙--播放器状态控制
各个页面共享同一个播放状态，而且可以互相控制，如果传递来传递去会非常的麻烦，但是他们都是Tabs组件内的，我们在index页面。创建两个子组件，一个是播放控制的子组件，一个是背景播放的子组件。一个状态，在各个组件。
2024-10-09 08:50:20
513
原创 鸿蒙--tabBar
此时，如果我们想实现将icon展示在title的上面类似于微信tabbar的效果，就需要使用自定义Builder来做，因为TabContent的tabBar属性支持CustomBuilder类型，CustomBuilder类型就是builder修饰的函数。
2024-10-08 15:56:16
123
原创 小程序和h5深度分析
你写过小程序/H5，那你知道他们的区别在哪里吗？为什么说小程序的性能通常优于 H5?小程序能访问到 DOM 对象吗？小程序的原理是什么？小程序和 H5 都是轻量级的、可直接在移动设备上运行的应用，但它们之间存在一些关键差异。
2024-10-08 13:21:57
506
原创 HarmonyOS 自定义 loading 效果
周期函数：在创建自定义组件的新实例后，在执行其build()函数之前执行。函数在自定义组件析构销毁之前执行，这里主要用来清除定时器。
2024-09-27 08:49:56
638
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人