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