Switch 开关
开关选择器, 需要表示开关状态/两种状态之间的切换时。
基础用法
使用 tass-switch 标签, 创建开关
展开查看
vue
<template>
<div style="width:40px">
<tass-switch v-model="active1"></tass-switch>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const active1 = ref(false);
</script>
事件回调
通过 change 事件, 在操作后完成一些后续处理。
展开查看
vue
<template>
<div style="width:40px">
<tass-switch v-model="active2" @change="change"></tass-switch>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const active2 = ref(true);
const change = ( val )=> {
alert("当前值:" + val)
}
</script>
禁用状态
展开查看
vue
<template>
<div style="width:40px">
<tass-switch v-model="active3" :disabled="disabled"></tass-switch>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const active3 = ref(false);
const disabled = ref(true);
</script>
修改描述
通过 onswitch-text 与 unswitch-text 属性, 设置不同状态的描述文字。
白天
展开查看
vue
<template>
<div style="width:60px">
<tass-switch v-model="active4" onswitch-text="白天" unswitch-text="夜间"></tass-switch>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const active4 = ref(true);
</script>
图标插槽
通过 onswitch-icon 与 unswitch-icon 属性, 设置不同状态的展示图标。
😄
展开查看
vue
<template>
<div style="width:40px">
<tass-switch v-model="active5">
<template #onswitch-icon>😄</template>
<template #unswitch-icon>🤔</template>
</tass-switch>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const active5 = ref(true);
</script>
自定义值
通过 onswitch-value 与 unswitch-value 属性, 设置不同状态的值。
展开查看
vue
<template>
<div style="width:40px">
<tass-switch v-model="active6" onswitch-value="dark" unswitch-value="light"></tass-switch>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const active6 = ref('dark');
</script>
尺寸
通过 size 属性, 设置尺寸。
展开查看
vue
<template>
<div style='display:flex;align-items: flex-end;'>
<tass-switch v-model="active7" size='lg'></tass-switch>
<tass-switch v-model="active7" size='md' style='margin-left:10px'></tass-switch>
<tass-switch v-model="active7" size='sm' style='margin-left:10px'></tass-switch>
<tass-switch v-model="active7" size='xs' style='margin-left:10px'></tass-switch>
</div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const active7 = ref(true);
</script>