基于uView组件库的二次封装多功能下拉组件

最新推荐文章于 2024-07-31 14:35:30 发布

Hacker吕小布

最新推荐文章于 2024-07-31 14:35:30 发布

阅读量4.8k

点赞数 5

分类专栏： uniapp 技术文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_45391874/article/details/125762564

版权

github地址:https://github.com/1205093639/uView-select

放入项目中的components中使用 demo : <mySelect :list="下拉列表" v-model="绑定值" type="action"></mySelect>

效果图

action操作菜单

在这里插入图片描述

picker滚动选择框

在这里插入图片描述

checkbox多选

在这里插入图片描述

search搜索选择框

在这里插入图片描述

scan扫码验证框

在这里插入图片描述

属性事件

属性	说明
disabled	是否禁用
scanAbled	是否能够扫码
clearabled	是否可以清空
getFirst	是否得到数据后自动选取第一条
placeholder	占位文字
apiName	获取搜索框数据或者验证扫码的方法名
labelName	展示的值对应字段名
valueName	唯一值对应字段名
titleName	额外值值对应字段名
type	action:操作菜单 picker:滚动选择框 checkbox:多选 search:搜索选择框 scan:扫码验证框
list	选项数组
value	对应item
otherData	接口需要的其他数据

事件	说明
confirm	清空和确认选择事件
clear	清空事件
open	打开事件
close	关闭事件

源码

记得searchPopup组件也需要引入基于uView组件库

<template>
    <div class='mySelect'>
        <u-input :placeholder="placeholder" :value="Array.isArray(value[labelName])?value[labelName].toString():value[labelName] " :disabled="disabled" suffixIcon="arrow-down" readonly @click.native="showTpye">
            <u-icon slot="suffix" name="arrow-down"></u-icon>
            <u-icon slot="prefix" v-show="value[labelName]&&!disabled&&clearabled&&type!=='checkbox'" name="close-circle" @click.stop.native="clear"></u-icon>
        </u-input>
        <!-- 操作菜单 -->
        <u-action-sheet @select="actionConfirm" :actions="list" cancelText='取消' :show="actionShow" closeOnClickOverlay @close="actionShow=false" :round="10"></u-action-sheet>
        <!-- 滚动选择框 -->
        <u-picker :defaultIndex="[list.findIndex(e=>e[valueName]==value[valueName])==-1?0:list.findIndex(e=>e[valueName]==value[valueName])]" @confirm="pickerConfirm" :show="pickerShow" :keyName="labelName" closeOnClickOverlay @close="pickerShow=false" @cancel="pickerShow=false" :columns="[list]"></u-picker>
        <!-- 多选 -->
        <u-popup :show="checkboxShow" @close="checkboxShow=false" :round="10" closeOnClickOverlay>
            <div class="checkbox">
                <u-checkbox-group size='27' borderBottom iconSize='18' iconPlacement='right' v-model="checkedList" placement="column">
                    <u-checkbox :customStyle="{marginBottom: '8px'}" :checked="checkedList.some(e=>e[labelName]==item[labelName])" v-for="(item, index) in list" :key="index" :label="item[labelName]" :name="item">
                    </u-checkbox>
                </u-checkbox-group>
                <div class="btnList">
                    <u-button class="btn" type="primary" color="#909399" text="清空选择" @click="checkedList=[]"></u-button>
                    <u-button type="primary" color="#0ab99c" text="确定" @click="checkboxConfirm"></u-button>
                </div>
            <<