LamboFieldSwitch 开关

介绍

LamboFieldSwitch是一个基于vant拓展的开关的表单组件，支持表单状态下开关组件的开启和关闭。

引入

import Vue from 'vue';
import LamboFieldSwitch from '@lambo-design-mobile/lambo-field-switch';
 
Vue.use(LamboFieldSwitch);

代码演示

基础用法

<van-cell-group>
    <lambo-field-switch title="开关" v-model="switch"/>
    <lambo-field-switch title="开关只读" :readonly v-model="readonlySwitch" @input="inputChange"/>
</van-cell-group>

import { Toast } from '@lambo-design-mobile/core'
import { CellGroup } from '@lambo-design-mobile/core'
export default {
    name: "index",
    components:{
        vanCellGroup:CellGroup
    },
    data(){
        return{
            switchValue:"0",
            readonlySwitchValue:"1"
        }
    },
    methods:{
        inputChange(value){
            Toast({
                message:value?'开启了':'关闭了'
            })
            console.log(value?'开启了':'关闭了')
        }
    }
}

API

Props

| 参数 | 说明 | 类型 | 默认值 | 版本 | |------|------|------|------|------| | title | 左侧标题 | String | '' | - | | v-model (value) | 当前输入的值 | number/String | - | - | | must | 是否必填 | Boolean | false | - | | readonly | 是否只读 | Boolean | false | - | | border | 是否展示内边框 | Boolean | true | - |

Events

| 事件名 | 说明 | 回调参数 | |------|------|------| | input | 开关变化时触发 | value: string ('1':开启了；'0'：关闭了) |