Switch 开关

用于两种状态之间切换，表达两种不同的状态。 ——该组件泛用性一般，对策性极强 (中杯)

基本使用

使用v-model双向绑定，可以通过activeText和inactiveText传入提示文本，不传则默认不显示提示文本

基本使用

开

当前switchValue：y

<!-- 开关基础使用 -->
<script setup>
// 导入路径请参考安装部分
import { UtpSwitch } from '@will1919/utopia-ui';
import { ref } from 'vue';

const switchValue = ref('y')
</script>

<template>
  <div class="switch-box">
    <utp-switch v-model="switchValue" active-text="开" inactive-text="关" active-value="y"
      in-active-value="n"></utp-switch>
    <i class="dips">当前switchValue：{{switchValue}}</i>
  </div>
</template>

<style scoped>
.switch-box {
  display: flex;
  align-items: center;
  .dips {
    margin-left: 10px;
    font-weight: bold;
    font-size: 14px;
  }
}
</style>

三种大小

开关组件有三种不同的大小

不同大小

<!-- 开关不同大小 -->
<script setup>
// 导入路径请参考安装部分
import { UtpSwitch } from '@will1919/utopia-ui';
import { ref } from 'vue';

const smallValue = ref(false)
const switchValue = ref(false)
const bigValue = ref(false)
</script>

<template>
  <div class="switch-box">
    <utp-switch class="switch-item" v-model="smallValue" size="small"></utp-switch>
    <utp-switch class="switch-item" v-model="switchValue"></utp-switch>
    <utp-switch class="switch-item" v-model="bigValue" size="big"></utp-switch>
  </div>
</template>

<style scoped>
.switch-item {
  margin-right: 10px;
}
</style>

禁用开关

通过disabled属性对开关实现禁用

禁用

当前switchValue：true

<!-- 开关禁用 -->
<script setup>
// 导入路径请参考安装部分
import { UtpSwitch } from '@will1919/utopia-ui';
import { ref } from 'vue';

const switchValue = ref(true)
</script>

<template>
  <div class="switch-box">
    <utp-switch v-model="switchValue" disabled></utp-switch>
    <i class="dips">当前switchValue：{{switchValue}}</i>
  </div>
</template>

<style scoped>
.switch-box {
  display: flex;
  align-items: center;
  .dips {
    margin-left: 10px;
    font-weight: bold;
    font-size: 14px;
  }
}
</style>

Switch API

属性

属性	说明	类型	默认值
modelValue	设置开关双向绑定值	boolean | string | number	—
activeValue	设置开关激活value	boolean | string | number	true
inActiveValue	设置开关未激活value	boolean | string | number	false
disabled	禁用开关	boolean	false
activeText	设置开关激活提示文本	string	—
inactiveText	设置开关未激活提示文本	string	—
name	设置开关表单提交名称	number	—
size	设置开关大小	number	—

事件

事件名称	说明	事件类型
change	开关状态切换回调函数	(switchValue: boolean | string | number) => void