m0_72065108的博客

滚轮选择器是数字界面中常见的交互控件，适用于时间选择、数值调节等场景。本文将基于 Vue3 Composition API，实现一个支持鼠标滚轮拖拽滑动动态适配的高性能滚轮选择器组件。该组件具备以下功能：🖱️滚轮操作：滚动鼠标滚轮逐项切换👆拖拽滑动：按住拖拽实现快速滑动🚀快捷跳转：顶部/底部按钮一键定位首尾项💡视觉反馈：居中高亮 + 渐变透明 + 动态过渡。

该自定义滚轮选择器组件允许用户通过鼠标滚轮、鼠标点击、鼠标拖动或者点击顶部和底部按钮来选择列表中的选项。组件支持动态更新选项列表，并通过v-model实现数据的双向绑定，同时提供了选中项改变的事件通知。本文详细介绍了一个自定义的 Vue 滚轮选择器组件，通过对组件的模板、脚本和样式部分的分析，我们了解了其实现原理和使用方法。该组件通过鼠标滚轮、鼠标拖动和按钮点击等多种方式实现了选项的选择，同时支持动态更新选项列表和数据的双向绑定。希望本文对读者理解和使用 Vue 组件开发有所帮助。

此自定义表格组件基于 Vue 3 和 ElementPlus 组件库开发，提供一个易于定制的表格解决方案。表格具备表头和表格数据展示功能，支持表头点击和行点击事件，同时可根据列定义动态生成表格内容，并能添加 tooltip 提示信息。技术栈：Vue3+JavaScript+element-plus。

前面发过一版，漏了个最重要的代码文件color.js，现在补上。以下是整个color-picker的完整版由于UI需求，需要使用直接取色的取色器面板，有点类似于element-plus里的el-color-pick，但是不需要有展开的操作。于是模仿element-plus写了该组件。技术栈vue3.js + javascript用于调整颜色透明度（alpha 值）的滑块。

自定义select的v2版本，新增了多选功能。技术栈：vue3.js+js+element-plus。

模仿element-plus里的el-upload实现自定义按钮样式。主要代码：DiyButton.vue。技术栈：vue3+js。

由于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。

模仿element-plus里的el-upload实现自定义上传文件组件，实现了文件选择、文件类型验证、文件数量限制、文件移除等基本的文件上传功能，并且提供了自定义提示文字的功能。技术栈：vue3+js。

实现了一个双滑块选择器。用户可以通过拖动左右两个滑块来选择一个区间，也可以点击选择器的条来整体移动所选区间。（后续会扩展更多功能如：鼠标直接选中某一区间）。技术栈：vue3、js。

模仿element-plus里的ElMessage.confirm实现自定义消息确认弹窗。DiyMessageBox.vue(该组件可以自由发挥，实现任何样式)。技术栈：vue3+js。

自定义组件select，开箱即用。

【代码】diy-switch。

【代码】diy-input。