LamboMultiSelect 单选组件

介绍

LamboMultiSelect 是一个基于lamb-action-sheet和vant拓展的多选展示组件的表单组件，表单状态下的Cell点击触发actionSheet实现弹出框进行多选的操作。

引入

import Vue from 'vue';
import LamboMultiSelect from '@lambo-design-mobile/lambo-multi-select';
 
Vue.use(LamboMultiSelect);

代码演示

基础用法

<van-cell-group>
    <multi-select title="多选" :actions="multiActions" v-model="multiSelValue"></multi-select>
    <multi-select title="多选" :actions="multiActions" v-model="multiSelValue"></multi-select>
</van-cell-group>

import { CellGroup } from '@lambo-design-mobile/core'
export default {
    name: "index",
    components:{
        vanCellGroup:CellGroup
    },
    data() {
        return {
            multiActions: [{ key: '01', value: '第一项' }, { key: '02', value: '第二项' }, {
                key: '03',
                value: '第三项',
                disabled: true
            }, { key: '04', value: '第四项' }, { key: '05', value: '第五项' }, { key: '06', value: '第六项' }],
            multiSelValue: ['02', '04'],
        }
    },
    methods:{
    }
}

API

Props

| 参数 | 说明 | 类型 | 默认值 | 版本 | |------|------|------|------|------| | title | 左侧标题 | String | '' | - | | v-modal(value) | 单选结果（key） | String | '' | - | | readonly | 是否只读 | boolean | false | - | | must | 是否必填（*在标题后） | boolean | false | - | | actions | 单选的列表数据 | Array | [] | - |

actions 数据结构

| 参数 | 说明 | 类型 | 默认值 | 版本 | |------|------|------|------|------| | key | 单选项Key | String | '' | - | | value | 单选项Value | String | '' | - | | disabled | 是否不可用 | Boolean | false | - |

Events

| 事件名 | 说明 | 回调参数 | |------|------|------| | onOk | 确定按钮回调 | 选项的值（key） | | input | v-modal(value)变化回调 | v-modal(value)的值 |