- 博客(13)
- 收藏
- 关注
RSS订阅原创 自定义 Vue3 滚轮选择器组件：实现与原理详解
滚轮选择器是数字界面中常见的交互控件，适用于时间选择、数值调节等场景。本文将基于 Vue3 Composition API，实现一个支持鼠标滚轮拖拽滑动动态适配的高性能滚轮选择器组件。该组件具备以下功能：🖱️滚轮操作：滚动鼠标滚轮逐项切换👆拖拽滑动：按住拖拽实现快速滑动🚀快捷跳转：顶部/底部按钮一键定位首尾项💡视觉反馈：居中高亮 + 渐变透明 + 动态过渡。
2025-03-05 12:03:25
470
原创 自定义 Vue 滚轮选择器组件：实现与原理详解
该自定义滚轮选择器组件允许用户通过鼠标滚轮、鼠标点击、鼠标拖动或者点击顶部和底部按钮来选择列表中的选项。组件支持动态更新选项列表，并通过v-model实现数据的双向绑定，同时提供了选中项改变的事件通知。本文详细介绍了一个自定义的 Vue 滚轮选择器组件，通过对组件的模板、脚本和样式部分的分析，我们了解了其实现原理和使用方法。该组件通过鼠标滚轮、鼠标拖动和按钮点击等多种方式实现了选项的选择，同时支持动态更新选项列表和数据的双向绑定。希望本文对读者理解和使用 Vue 组件开发有所帮助。
2025-03-04 16:22:02
921
原创 diy-table（开箱即用）
此自定义表格组件基于 Vue 3 和 ElementPlus 组件库开发，提供一个易于定制的表格解决方案。表格具备表头和表格数据展示功能，支持表头点击和行点击事件，同时可根据列定义动态生成表格内容，并能添加 tooltip 提示信息。技术栈：Vue3+JavaScript+element-plus。
2025-02-13 11:56:37
696
原创 color-picker完整版
前面发过一版，漏了个最重要的代码文件color.js，现在补上。以下是整个color-picker的完整版由于UI需求，需要使用直接取色的取色器面板，有点类似于element-plus里的el-color-pick，但是不需要有展开的操作。于是模仿element-plus写了该组件。技术栈vue3.js + javascript用于调整颜色透明度（alpha 值）的滑块。
2025-02-12 14:41:16
567
原创 diy-select-v2（新增多选功能）
自定义select的v2版本，新增了多选功能。技术栈：vue3.js+js+element-plus。
2025-02-12 12:04:29
401
原创 diy-button（开箱即用）
模仿element-plus里的el-upload实现自定义按钮样式。主要代码：DiyButton.vue。技术栈：vue3+js。
2025-02-11 10:42:49
385
原创 color-picker封装（开箱即用）
由于UI需求，需要使用直接可以取色的取色器面板，有点类似于element-plus里的el-color-pick，但是不需要有展开的操作。代码实现包含：index.vue、SvPanel.vue、HueSlider.vue、AlphaSlider.vue、utils.js。调整颜色透明度（alpha 值）的滑块代码：AlphaSlider.vue。调整颜色色相（hue 值）的滑块代码：HueSlider.vue。饱和度 - 明度（SV）面板代码：SvPanel.vue。入口代码：index.vue。
2025-02-10 18:07:15
415
原创 diy-upload（开箱即用）
模仿element-plus里的el-upload实现自定义上传文件组件，实现了文件选择、文件类型验证、文件数量限制、文件移除等基本的文件上传功能，并且提供了自定义提示文字的功能。技术栈：vue3+js。
2025-02-10 15:24:11
298
原创 DoubleSlider双向滑块
实现了一个双滑块选择器。用户可以通过拖动左右两个滑块来选择一个区间，也可以点击选择器的条来整体移动所选区间。（后续会扩展更多功能如：鼠标直接选中某一区间）。技术栈：vue3、js。
2025-02-09 00:15:00
304
原创 diy-message-box（开箱即用）
模仿element-plus里的ElMessage.confirm实现自定义消息确认弹窗。DiyMessageBox.vue(该组件可以自由发挥，实现任何样式)。技术栈：vue3+js。
2025-02-08 14:41:20
497
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人