2025年2月12日
color-picker完整版
摘要： 前面发过一版，漏了个最重要的代码文件color.js，现在补上。 以下是整个color-picker的完整版 由于UI需求，需要使用直接取色的取色器面板，有点类似于element-plus里的el-color-pick，但是不需要有展开的操作。于是模仿element-plus写了该组件。技术栈vue 阅读全文
posted @ 2025-02-12 14:41 YAY_tyy 阅读(9) 评论(0) 推荐(0) 编辑
diy-select-v2（新增多选功能）
摘要： 自定义select的v2版本，新增了多选功能。 技术栈：vue3.js+js+element-plus。 目录 使用方式： 主要代码： 成果展示： 使用方式： <template> <div> <!-- 单选示例 --> <DiySelect :options="options" v-model=" 阅读全文
posted @ 2025-02-12 12:04 YAY_tyy 阅读(8) 评论(0) 推荐(0) 编辑
2025年2月11日
diy-button（开箱即用）
摘要： 模仿element-plus里的el-upload实现自定义按钮样式。 技术栈：vue3+js 目录 使用方式： 主要代码：DiyButton.vue 成果展示： 使用方式： import DiyButton from "./DiyButton.vue"; <div> <DiyButton type 阅读全文
posted @ 2025-02-11 10:43 YAY_tyy 阅读(2) 评论(0) 推荐(0) 编辑
2025年2月10日
color-picker封装（开箱即用）
摘要： 目录 入口代码：index.vue 饱和度 - 明度（SV）面板代码：SvPanel.vue 调整颜色色相（hue 值）的滑块代码：HueSlider.vue 调整颜色透明度（alpha 值）的滑块代码：AlphaSlider.vue 工具代码：utils.js 使用示例： 由于UI需求，需要使用直 阅读全文
posted @ 2025-02-10 18:07 YAY_tyy 阅读(4) 评论(0) 推荐(0) 编辑
diy-upload（开箱即用）
摘要： 模仿element-plus里的el-upload实现自定义上传文件组件，实现了文件选择、文件类型验证、文件数量限制、文件移除等基本的文件上传功能，并且提供了自定义提示文字的功能。 技术栈：vue3+js 使用方式： <template> <DiyUpload multiple :limit="3" 阅读全文
posted @ 2025-02-10 15:24 YAY_tyy 阅读(4) 评论(0) 推荐(0) 编辑
2025年2月9日
DoubleSlider双向滑块
摘要： 实现了一个双滑块选择器。用户可以通过拖动左右两个滑块来选择一个区间，也可以点击选择器的条来整体移动所选区间。（后续会扩展更多功能如：鼠标直接选中某一区间） 技术栈：vue3、js 主要代码 DoubleSlider.vue <template> <div class="a_slider"> <div 阅读全文
posted @ 2025-02-09 00:15 YAY_tyy 阅读(4) 评论(0) 推荐(0) 编辑
2025年2月8日
diy-message-box（开箱即用）
摘要： 模仿element-plus里的ElMessage.confirm实现自定义消息确认弹窗 技术栈：vue3+js 使用方式： import DiyMessageBox from "./index.js"; DiyMessageBox.confirm("确认操作", "你确定要执行此操作吗？") .t 阅读全文
posted @ 2025-02-08 14:41 YAY_tyy 阅读(2) 评论(0) 推荐(0) 编辑
2024年12月17日
diy-select（开箱即用）
摘要： 自定义组件select，实现了一个自定义的下拉选择器功能。 <!-- 使用 --> <DiySelect v-model="state.searchInfo.streetName" placeholder="请选择街道" @change="changeStreet" :list="state.str 阅读全文
posted @ 2024-12-17 19:12 YAY_tyy 阅读(3) 评论(0) 推荐(0) 编辑
diy-input
摘要： 公共组件input，开箱即用 <!-- 使用 --> <DiyInput v-model="state.searchInfo.decisionNo" placeholder="请输入施工道路、申请部门或施工许可号" clearable @clear="confirmSearch" ></DiyInp 阅读全文
posted @ 2024-12-17 17:17 YAY_tyy 阅读(1) 评论(0) 推荐(0) 编辑
diy-switch
摘要： 公共组件Switch按钮，开箱即用 <!-- 使用 --> <div class="item" v-for="(item, index) in list" :key="index" > <span class="name">{{ item.name }}</span> <DiySwitch clas 阅读全文
posted @ 2024-12-17 17:16 YAY_tyy 阅读(1) 评论(0) 推荐(0) 编辑
点击右上角即可分享
微信分享提示