Switch开关
基础用法
绑定 v-model 到一个 Boolean 类型的变量。 可以使用 --hx-switch-on-color
属性与 --hx-switch-off-color
属性来设置开关的背景色。
<script setup>
import { ref } from 'vue'
import Switch from '@com/Switch/Switch.vue'
const test = ref(false)
</script>
<template>
<Switch v-model="test" />
</template>
禁用状态
设置 disabled
属性,接受一个 boolean,设置true即可禁用。
禁用:
<script setup>
import { ref } from 'vue'
import Switch from '@com/Switch/Switch.vue'
const test = ref(false)
const test2 = ref(false)
</script>
<template>
正常:<Switch v-model="test" /> <br />
禁用:<Switch v-model="test2" disabled />
</template>
不同尺寸
设置 size
属性,接受large
/ small
,呈现不同的尺寸。
<script setup>
import { ref } from 'vue'
import Switch from '@com/Switch/Switch.vue'
const test = ref(false)
</script>
<template>
<div class="switch-size-container">
<Switch v-model="test" size="small" />
<Switch v-model="test" />
<Switch v-model="test" size="large" />
</div>
</template>
<style scoped>
.switch-size-container {
display: flex;
align-items: center;
.hx-switch {
margin-right: 10px;
}
}
</style>
支持自定义 value 类型
你可以设置 active-value
和 inactive-value
属性, 它们接受 boolean
| string
| number
类型的值。
model-value: right
<script setup>
import { ref } from 'vue'
import Switch from '@com/Switch/Switch.vue'
const test = ref('right')
</script>
<template>
<Switch v-model="test" activeValue="right" inactiveValue="wrong" />
<h4>model-value: {{ test }}</h4>
</template>
文字描述
使用 active-text
属性与 inactive-text
属性来设置开关的文字描述。
OFF
<script setup>
import { ref } from 'vue'
import Switch from '@com/Switch/Switch.vue'
const test = ref(false)
</script>
<template>
<Switch v-model="test" activeText="ON" inactiveText="OFF" />
</template>
APIs
属性
名称 | 描述 | 类型 | 默认值 |
---|---|---|---|
v-model | 绑定值 | string | boolean | number | false |
disabled | 是否禁用 | boolean | false |
active-text | 打开时的文字描述 | string | |
inactive-text | 关闭时的文字描述 | string | |
acitve-value | 状态为on的值 | string |boolean |number | true |
inactive-value | 状态为off的值 | string |boolean |number | false |
name | 对应的name值 | string | |
id | input的id | string |
事件
名称 | 描述 | 类型 |
---|---|---|
change | 状态发生变化的回调 | (e: 'string' | 'boolean' | 'number' ) => void |