用于切换开关状态的组件。
绑定 value 来切换 Switch 的状态。
Tulip<template>
<tu-switch v-model:value="value" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
const value = ref(false)
</script>
可以使用命名插槽添加内容描述。
<template>
<tu-switch v-model:value="value">
<template #checked>我开启了</template>
<template #unchecked>我关闭了</template>
</tu-switch>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const value = ref(false)
</script>
有三种大小。
<template>
<tu-switch v-model:value="value" size="small" />
<tu-switch v-model:value="value" />
<tu-switch v-model:value="value" size="large" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
const value = ref(false)
</script>
可以自定义开关的值。
<template>
<tu-switch
v-model:value="value"
:checked-value="1"
:unchecked-value="0"
/>
<tu-switch
v-model:value="value2"
checked-value="hi"
unchecked-value="hello"
/>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const value = ref(1)
const value2 = ref('hi')
</script>
可以设置为方形。
<template>
<tu-switch v-model:value="value" />
<tu-switch v-model:value="value" square />
</template>
<script setup lang="ts">
import { ref } from 'vue'
const value = ref(false)
</script>
| 名称 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| value | 开关的状态 | string | number | boolean | false |
| size | 开关的大小 | large' | 'medium' | 'small' | 'medium' |
| checked-value | 开启时的默认值 | string | number | boolean | false |
| unchecked-value | 关闭时的默认值 | string | number | boolean | false |
| square | 是否为方形 | boolean | false |
| 名称 | 说明 | 参数 |
|---|---|---|
| checked | 开关开启时内容 | () |
| unchecked | 开关关闭时内容 | () |