uniapp select组件

1.前言

• 官方的picker组件不能禁用某个下拉项，所以就有了这个下拉组件
• 组件只适配了宽屏模式，效果参照element-ui的select组件
• demo地址：lianlizhou / ep-select

2.封装思路

• 此组件使用了字体图标，素材来源于iconfont
• 组件分为3个部分：输入框容器，下拉容器，蒙版容器
• 输入框容器：展示已选中的选项，点击则展示下拉容器和蒙版容器
• 下拉容器：使用绝对定位，展示备选下拉项，以及相应的点击事件
• 蒙版容器：使用fixed定位，全屏覆盖，点击隐藏下拉容器和自身

3.基本用法

• 父组件调用方法

<template>
	<view class="content">
        <view style="display: flex;justify-content: center;padding:10px;">
            <ep-select :disabled="false" v-model="select" :options="options" @change="change"></ep-select>
        </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				select: '',
                options:[
                    {value:"1",label:"上海"},{value:"2",label:"深圳"},{value:"3",label:"广州",disabled:true}
                ]
			}
		},
		onLoad() {

		},
		methods: {
            change(e){
                console.log('select = ',this.select)
            }
		}
	}
</script>

• 效果
  
  

4.参数说明

• 参数说明

参数	类型	默认值	说明
value	String，Number	''	当前选中项的支持v-model
options	Array	[]	下拉选项列表，disabled属性代表当前项禁用
value_key	String	value	指定 Object 中 key 的值作为选择器选中内容，以此同步给value属性
label_key	String	label	指定 Object 中 key 的值作为选择器展示内容

• 事件说明

参数	类型	默认值	说明
change	EventHandle	-	下拉选择切换事件

5.完整代码

<template>
    <view class="ep-picker-box">
        <!-- 蒙版区域 开始 -->
        <view class="ep-mask-box" v-show="show" @click="show=false"></view>
        <!-- 蒙版区域 开始 -->

        <!-- 输入框区域 开始 -->
        <view class="ep-input-box" @click="openOptions" :class="{'disabled':disabled}">
            <view style="display: flex;align-items: center;min-height: 36px;">{{showLabel}}</view>
            <text v-if="!show" class="iconfont icon-xiala"></text>
            <text v-else class="iconfont icon-xialashang"></text>
        </view>
        <!-- 输入框区域 结束 -->

        <!-- 弹出的下拉区域 开始 -->
        <view v-show="show" class="ep-picker-content-wrap">
            <scroll-view class="ep-picker-content" :scroll-y="true">
                <!-- 展示下拉项列表 开始 -->
                <view v-for="item in options" :key="item[value_key]"
                :class="{'disabled':item.disabled,'active':value==item[value_key]}"
                class="option-item"
                @click="itemClick(item)"
                >{{item[label_key]}}</view>
                <!-- 展示下拉项列表 结束 -->

                <!-- 下拉列表为空 开始 -->
                <view v-if="options.length==0" class="option-no-data">无数据</view>
                <!-- 下拉列表为空 结束 -->
            </scroll-view>
            <text class="triangle"></text>
        </view>
        <!-- 弹出的下拉区域 结束 -->
    </view>
</template>

<script>
    export default{
        data(){
            return {
                show: false,
                left: 0,

            }
        },
        props:{
            value:{
                type:[String,Number],
                default:""
            },
            options:{
                type: Array,
                default: function(){
                    return []
                }
            },
            value_key:{
                type:String,
                default:"value"
            },
            label_key:{
                type:String,
                default:"label"
            },
            disabled:{
                type:Boolean,
                default:false
            }
        },
        model:{
            prop:'value',
            event:"valChange"
        },
        methods:{
            //点击选中选项
            itemClick(item){
                if(item.disabled) return

                //关闭
                this.show = false
                //修改v-model的值
                this.$emit('valChange',item[this.value_key])
                //将事件通知父组件
                this.$emit('change',item[this.value_key])
            },
            //展开选项
            openOptions(){
                if(!this.disabled){
                    this.show  = true
                }
            }
        },
        computed:{
            showLabel(){
                var index = this.options.findIndex(item=>{
                    return item[this.value_key] == this.value
                })
                if(index != -1){
                    return this.options[index][this.label_key]
                }else if(!this.value){
                    return "请选择"
                }else{
                    return this.value
                }
            }
        }
    }
</script>

<style scoped>
    /* 引入字体图标 */
    @import './iconfont.css';

    .ep-picker-box{
        width:100%;
        box-sizing: border-box;
        position: relative;
        font-size: 14px;
        color: #333;
        max-width: 300px;
    }
    .ep-mask-box{
        position: fixed;
        z-index: 999;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        background:none;
    }
    .ep-input-box{
        border: 1px solid rgb(229, 229, 229);
        border-radius: 4px;
        padding-left:10px;
        position: relative;
        cursor: pointer;
    }
    /* 整个下拉组件禁用样式 */
    .ep-input-box.disabled{
        cursor:not-allowed;
        background-color: #f5f7fa;
        color: #999;
    }
    /* 展开收起箭头样式 */
    .ep-input-box .iconfont{
        position: absolute;
        top: 50%;
        right: 5px;
        font-size: 20px;
        transform: translateY(-50%);
        color:#B8B8B8;
    }
    /* 下拉容器样式 外层 */
    .ep-picker-content-wrap{
        width: 100%;
        position: absolute;
        top: 45px;
        left: 0;
        z-index: 9999;
        padding-top:6px;
    }
    /* 下拉容器样式 内层 */
    .ep-picker-content-wrap .ep-picker-content{
        background-color: #fff;
        padding:3px 0;
        box-shadow: 0 0 20px 5px rgb(0 0 0 / 30%);
        border-radius: 5px;
        max-height:181px;
    }
    /* 下拉项通用样式 */
    .ep-picker-content-wrap .ep-picker-content .option-item{
        padding: 8px 18px;
        cursor: pointer;
    }
    /* 无下拉项数据时样式 */
    .ep-picker-content-wrap .ep-picker-content .option-no-data{
        padding: 8px 18px;
        cursor: text;
        color:#999;
        text-align: center;
    }
    /* 鼠标移入下拉项样式 */
    .ep-picker-content-wrap .ep-picker-content .option-item:hover{
        background-color: #f5f7fa;
    }
    /* 已选中的下拉项样式 */
    .ep-picker-content-wrap .ep-picker-content .option-item.active{
        color:#007AFF;
    }
    /* 禁用的下拉项样式 */
    .ep-picker-content-wrap .ep-picker-content .option-item.disabled{
        color:#c0c4cc;
    }
    .ep-picker-content-wrap .ep-picker-content .option-item.disabled:hover{
        cursor:not-allowed;
    }

    /* 下拉容器指示箭头样式 */
    .ep-picker-content-wrap .triangle{
        width: 0;
        height: 0;
        border-top: 6px solid rgba(0,0,0,0);
        border-right: 6px solid rgba(0,0,0,0);
        border-bottom: 6px solid #fff;
        border-left: 6px solid rgba(0,0,0,0);
        position: absolute;
        top:-6px;
        left:50%;
        transform: translateX(-50%);
        box-sizing: content-box;
    }

</style>