Switch

Introduction

The switch component is used for users to toggle between two states. mengyue-components has encapsulated this component and conducted vitest testing. You can use <MYSwitch></MYSwitch> or <MYSwitch /> to implement a switch.

Basic Usage

Use v-model to bind the switch state.

Code Demo

<template>
  <MYSwitch v-model='value1' />
</template>

展开代码

Switch with Text

Use text to define the text displayed on the switch.

Code Demo

T

<template>
  <MYSwitch v-model='value2' text='T' />
</template>

展开代码

Custom Text Content

Use slots to customize the text content of the switch.

Code Demo

Custom Text

<template>
  <MYSwitch v-model='slotValue'>
    Custom Text
  </MYSwitch>
</template>

展开代码

Sizing

Use size to define the size, with multiple sizes provided by mengyue-components.

Code Demo

SSMLXLXLXL

<template>
  <div style='display: flex; flex-direction: column; gap: 15px; align-items: flex-start;'>
    <MYSwitch v-model='sizeMini' size='mini' text='S' />
    <MYSwitch v-model='sizeSupersmall' size='supersmall' text='S' />
    <MYSwitch v-model='sizeSmall' size='small' text='M' />
    <MYSwitch v-model='sizeMedium' size='medium' text='L' />
    <MYSwitch v-model='sizeLarge' size='large' text='XL' />
    <MYSwitch v-model='sizeBiglarge' size='biglarge' text='XL' />
    <MYSwitch v-model='sizeSuperlarge' size='superlarge' text='XL' />
  </div>
</template>

展开代码

Disabled State

Disabled Switch

Use disabled to disable the switch.

Code Demo

<template>
  <div style='display: flex; gap: 20px;'>
    <MYSwitch v-model='disabledValue1' disabled />
    <MYSwitch v-model='disabledValue2' disabled :modelValue='true' />
  </div>
</template>

展开代码

API Reference

Props

Parameter	Description	Type	Options	Default
modelValue	Switch state value	boolean	—	false
value	Custom value	boolean | string | number	—	false
size	Size	string	mini/supersmall/small/medium/large/biglarge/superlarge	—
text	Text	string	—	—
disabled	Disabled state	boolean	—	false

Events

Event Name	Description	Parameters
update:modelValue	Triggered when state changes	(value: boolean)

Type Definitions

interface SwitchProps {
  modelValue?: boolean;
  value?: boolean | string | number;
  size?: string;
  text?: string;
  disabled?: boolean;
}