-
uniapp和vue3+ts创建自定义下拉选择框组件
使用uniapp开发小程序的时候，使用了uview的ui组件，但是里面没有下拉选择组件，只有Picker 选择器，但是我们想要使用下拉选择的组件，所以需要自定义个一个下拉选择的自定义组件，我就只能自己动手创建这个自定义组件了，支持：多选，单选，下拉框在框内还是框外
实现的效果：
自定义组件源代码：Select.vue
- <view class="uni-select-dc" :style="{ 'z-index': zindex }">
- <view class="uni-select-dc-select" :class="{ active: active }" @click.stop="handleSelect">
- <view class="uni-disabled" v-if="disabled">view>
- <view class="close-icon close-postion" v-if="realValue.length && !active && !disabled && showClearIcon">
- <text @click.stop="handleRemove(null)">text>
- view>
- <view class="uni-select-multiple" v-show="realValue.length">
- <view class="uni-select-multiple-item" v-if="multiple" v-for="(item, index) in changevalue" :key="index">
- {{ item.text }}
- <view class="close-icon" v-if="showValueClear">
- <text @click.stop="handleRemove(index)">
- text>
- view>
- view>
- <view v-else class="single-text">
- {{ changevalue.length ? changevalue[0].text : "" }}
- view>
- view>
- <view v-if="realValue.length == 0 && showplaceholder">{{
- placeholder
- }}view>
- <view :class="{ disabled: disabled, 'uni-select-dc-icon': !downInner, 'uni-select-dc-inner': downInner }">
- <text>text>
- view>
- view>
- <scroll-view class="uni-select-dc-options" :scroll-y="true" v-show="active">
- <template>
- <view class="uni-select-dc-item" :class="{ active: realValue.includes((item as any)[svalue]) }"
- v-for="(item, index) in options" :key="index" @click.stop="handleChange(index, item)">
- {{ (item as any)[slabel] }}
- view>
- template>
- scroll-view>
- view>
- template>
父组件调用：
- <view class="arena-main">
- 自定义下拉选择组件：
- <Select :value="monIndex" downInner :options="options" @change="changeValue">
- Select>
- view>
- <script setup lang="ts">
- import Select from "@/components/select/index.vue"
- import { reactive } from "vue";
- let monIndex = reactive([1]);
- const changeValue = (item: any, value: any) => {
- console.log("父组件接收到选中的值", item, value);
- monIndex = value;
- };
- const options = [
- { value: 0, text: "测试1" },
- { value: 1, text: "测试2" },
- { value: 2, text: "测试3" },
- { value: 3, text: "测试4" },
- { value: 4, text: "测试5" },
- ];
- script>
- <style lang="scss" scoped>
- .arena-main {
- padding: 10px;
- }
- style>
使用参数说明：
- monIndex：选中的值列表
- options：可选项列表
- multiple：是否为多选
- downInner：下拉箭头是否在选择框内
- showValueClear：是否显示单个删除
- disabled：是否禁用
- placeholder：占位符
- slabel：label标签展示某项
- svalue：value选中的值
-
相关阅读:
Hive SQL常用函数
linux性能优化--性能追踪建议
CVE-2022-39227jwt伪造
多尺度retinex图像去雾算法matlab仿真
MicroExpSTCNN and MicroExpFuseNet-基于三维时空卷积神经网络的自发面部微表情识别
C#应用的欢迎界面窗体方案 - 开源研究系列文章
超级菜鸟怎么学习数据分析？
MySQL知识详细汇总
WinHex(二)
Linux Ubuntu中安装MySQL
- 原文地址：https://blog.csdn.net/weixin_44786530/article/details/134516432
