bz-select 下拉选择器

基本用法

当用户需要从一组同类数据中选择一个或多个时，可以使用下拉选择器，点击后选择对应项。 1.0.1 版本开始支持此组件。

支持宽屏差异

扫码预览

用BoosHi扫码或PC端点击

<template>
    <view class="demo-ui-page">
        <view class="demo-content">
            <view class="demo-title">bz-select 下拉选择器</view>
            <demo-cell :title="`单选: ${value}`">
                <bz-select
                    v-model="value"
                    :options="params.options"
                ></bz-select>
            </demo-cell>
            <demo-cell
                :title="`多选: ${value2}`"
                subTitle="multiple"
            >
                <bz-select
                    style="width: 280px; height: 32px"
                    v-model="value2"
                    :options="params.options"
                    multiple
                ></bz-select>
            </demo-cell>
            <demo-cell :title="`调试: ${value3}`">
                <bz-select
                    v-bind="params"
                    v-model="value3"
                ></bz-select>
            </demo-cell>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            value: 0,
            value2: [],
            value3: '',
            params: {
                color: '#5D68E8',
                placeholder: '请选择',
                multiple: false,
                disabled: false,
                bordered: true,
                isRight: false,
                closeable: true,
                options: [
                    { value: 0, label: '篮球' },
                    { value: 1, label: '足球' },
                    { value: 2, label: '游泳', disabled: true },
                    { value: 3, label: '赛跑' },
                    { value: 4, label: '篮球' },
                    { value: 5, label: '足球' },
                    { value: 6, label: '游泳', disabled: true },
                    { value: 7, label: '赛跑' },
                    { value: 8, label: '篮球' },
                    { value: 9, label: '足球' },
                    { value: 10, label: '游泳', disabled: true },
                    { value: 11, label: '赛跑' }
                ]
            }
        }
    }
}
</script>

展开 刷新 关闭

属性说明

属性名	类型	说明	默认值
color	String	主题颜色	#1890ff
value(v-model)	String(单选) ｜ Array(多选)	选中 value	-
options	SelOption[]	选项列表	-
multiple	Boolean	是否多选	false
placeholder	String	内容框的默认提示文本	请选择
disabled	Boolean	是否禁用	false
bordered	Boolean	是否需要边框	true
isRight	Boolean	结果是否右对齐	false
search	Boolean	是否需要搜索选择	false
closeable	Boolean	是否展示清除按钮	true
closeableItem	Boolean	多选场景时，是否可以单独关闭子项	true
appendRoot 1.0.2	Boolean	是否挂载到根节点	true
@change	value: String ｜ Array	选择完成触发事件	-
@visibleChange	visible: Boolean	显示隐藏事件	-
@searchChange	searchText: String	搜索框文本改变事件	-

• SelOption 类型

属性名	类型	说明
label	string	标题内容
value	string ｜ number	内容 value