Switch 开关

用于在打开和关闭状态之间进行切换。

引入

通过 easycom 自动引入，无需手动注册。

代码演示

基础用法

通过 v-model 绑定开关的选中状态，true 表示开，false 表示关。

<zq-switch v-model="checked" />

const checked = ref(false)

禁用状态

通过 disabled 属性禁用开关。

<zq-switch v-model="checked" disabled />

加载状态

通过 loading 属性设置开关为加载状态。

<zq-switch v-model="checked" loading />

自定义大小

支持 small、normal、large 三种尺寸。

<zq-switch v-model="checked" size="small" />
<zq-switch v-model="checked" size="normal" />
<zq-switch v-model="checked" size="large" />

自定义颜色

通过 active-color 和 inactive-color 属性自定义开关颜色。

<zq-switch v-model="checked" active-color="#07c160" inactive-color="#ee0a24" />

自定义值

通过 active-value 和 inactive-value 属性自定义开关的值。

<zq-switch v-model="value" active-value="on" inactive-value="off" />

const value = ref('off')

搭配 Cell 使用

<zq-cell title="开关" center>
  <template #default>
    <zq-switch v-model="checked" />
  </template>
</zq-cell>

API

Props

参数	说明	类型	默认值
v-model	开关选中状态	boolean | string | number	false
active-value	打开时对应的值	boolean | string | number	true
inactive-value	关闭时对应的值	boolean | string | number	false
active-color	打开时的背景色	string	''
inactive-color	关闭时的背景色	string	''
disabled	是否禁用	boolean	false
loading	是否为加载状态	boolean	false
size	开关尺寸	'small' | 'normal' | 'large'	'normal'

Events

事件名	说明	回调参数
update:modelValue	开关状态切换时触发	value: boolean | string | number
change	开关状态切换时触发	value: boolean | string | number

主题定制

变量名	说明
--color-primary	打开时默认背景色
--color-border	关闭时默认背景色