Switch 开关
选中值的开关
基础用法
<template>
<LiSwitch v-model="val"></LiSwitch>
<LiSwitch v-model="val" type="primary"></LiSwitch>
<LiSwitch v-model="val" type="success"></LiSwitch>
<LiSwitch v-model="val" type="danger"></LiSwitch>
<LiSwitch v-model="val" type="warning"></LiSwitch>
<LiSwitch v-model="val" type="info"></LiSwitch>
</template>
<script setup lang="ts">
import { ref } from "vue";
const val = ref(false);
</script>收起
禁用状态
使用disabled控制禁用状态
<template>
<LiSwitch disabled v-model="val"></LiSwitch>
<LiSwitch disabled v-model="val" type="primary"></LiSwitch>
<LiSwitch disabled v-model="val" type="success"></LiSwitch>
<LiSwitch disabled v-model="val" type="danger"></LiSwitch>
<LiSwitch disabled v-model="val" type="warning"></LiSwitch>
<LiSwitch disabled v-model="val" type="info"></LiSwitch>
</template>
<script setup lang="ts">
import { ref } from "vue";
const val = ref(false);
</script>收起
自定义值
使用enable-val、disable-val控制禁用状态
关
关
关
关
关
关
<template>
<LiSwitch v-model="val" enable-val="开" disable-val="关"></LiSwitch>
<LiSwitch
v-model="val"
enable-val="开"
disable-val="关"
type="primary"
></LiSwitch>
<LiSwitch
v-model="val"
enable-val="开"
disable-val="关"
type="success"
></LiSwitch>
<LiSwitch
v-model="val"
enable-val="开"
disable-val="关"
type="danger"
></LiSwitch>
<LiSwitch
v-model="val"
enable-val="开"
disable-val="关"
type="warning"
></LiSwitch>
<LiSwitch
v-model="val"
enable-val="开"
disable-val="关"
type="info"
></LiSwitch>
</template>
<script setup lang="ts">
import { ref } from "vue";
const val = ref(false);
</script>收起
插槽
使用checked获取当前值
false
<template>
<LiSwitch v-model="val">
<template #default="{ checked }">
{{ checked }}
</template>
</LiSwitch>
</template>
<script setup lang="ts">
import { ref } from "vue";
const val = ref(false);
</script>收起
Input Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| disabled | 禁用 | boolean | false | |
| disable-val | 关值 | string | ||
| enable-val | 开值 | string | ||
| type | 类型 | string | default / primary / success / warning / info / danger | default |
Input Slots
| 插槽名 | 说明 |
|---|---|
| - | 默认, checked 为当前值 |
