Switch

基础用法

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

import { ref } from 'vue'

const checked = ref<boolean>(true)

禁用状态

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

import { ref } from 'vue'

const checked = ref<boolean>(true)

加载状态

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

import { ref } from 'vue'

const checked = ref<boolean>(true)

自定义大小

<pa-switch v-model="checked" size="18px" />

import { ref } from 'vue'

const checked = ref<boolean>(true)

异步控制

<pa-switch :model-value="checked" :loading="loading" @change="onChange" />

import { ref } from 'vue'
import type { SwitchValue } from '../..'

const checked = ref<boolean>(true)
const loading = ref<boolean>(false)

const onChange = (value: SwitchValue) => {
  loading.value = true
  setTimeout(() => {
    checked.value = value as boolean
    loading.value = false
  }, 2000)
}

自定义颜色

<pa-switch v-model="checked" active-color="#ee0a24" inactive-color="#aaa" />

import { ref } from 'vue'

const checked = ref<boolean>(true)

自定义值

<pa-switch v-model="checked" active-value="开" inactive-value="关" />
<text class="ml-40">{{ checked }}</text>

import { ref } from 'vue'

const checked = ref<string>('开')

Switch Props

参数	说明	类型	默认值
modelValue	开关状态	SwitchValue	false
activeValue	打开时组件的值	SwitchValue	true
inactiveValue	关闭组件的值	SwitchValue	false
activeColor	打开时的背景颜色	CSSProperties['background-color']	-
inactiveColor	关闭时的背景颜色	CSSProperties['background-color']	-
loading	禁用状态	boolean	-
disabled	加载状态	boolean	-
size	开关尺寸	string	-

Switch Event

事件名	参数
update:modelValue	(value: SwitchValue)
change	(value: SwitchValue)

Switch Slot

名称	说明

样式变量

名称	默认值
--pa-switch-size	24px