LamboSingleSelect 单选组件

介绍

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

引入

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

代码演示

基础用法

<van-cell-group>
    <single-select title="单选" :actions="singleActions" v-model="singleSelValue"></single-select>
    <single-select title="单选" :actions="singleActions" v-model="singleSelValue"></single-select>
</van-cell-group>

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

API

Props

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

actions 数据结构

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

Events

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