SpicyRabbit

Appearance

On this page

Switch ​

实例 ​

不同主题 ​

html
<MtSwitch v-model="val1" theme="primary"/>
<MtSwitch v-model="val2" theme="danger"/>
<MtSwitch v-model="val3" theme="success"/>
<MtSwitch v-model="val4" theme="default"/>
<MtSwitch v-model="val5" theme="error"/>
<MtSwitch v-model="val6" theme="info"/>
折叠

不同尺寸 ​

html
<MtSwitch v-model="val1" theme="primary" size="large"/>
<MtSwitch v-model="val2" theme="primary" size="middle"/>
<MtSwitch v-model="val3" theme="primary" size="small"/>
<MtSwitch v-model="val4" theme="primary" size="tiny"/>
折叠

非圆角 ​

html
<MtSwitch :round="false" v-model="val1" theme="primary"/>
<MtSwitch :round="false" v-model="val2" theme="danger"/>
<MtSwitch :round="false" v-model="val3" theme="success"/>
<MtSwitch :round="false" v-model="val4" theme="default"/>
<MtSwitch :round="false" v-model="val5" theme="error"/>
<MtSwitch :round="false" v-model="val6" theme="info"/>
折叠

文字提示 ​

开
😆
html
<MtSwitch v-model="val1" theme="primary">
    <template v-slot:default="{ active }">
        {{active ? '开': '闭'}}
    </template>
</MtSwitch>
<MtSwitch v-model="val2" theme="primary">
    <template v-slot:default="{ active }">
        {{active ? '😆': '🙁'}}
    </template>
</MtSwitch>
折叠

Props ​

参数说明类型可选值默认值
theme标签主题ThemeType——primary success danger warning error default info
size标签尺寸SizeTypelarge middle small tinymiddle
round圆角风格booleantrue、falsetrue