ETU组件库

Appearance

Return to top
On this page

Switch 开关

表示两种相互对立的状态间的切换。

基础用法

我们可以直接使用，或者使用v-model为他绑定一个布尔值，后续点击开关切换状态就可以完成布尔值的切换。

<template>
  <etu-switch />
  <etu-switch class="ml-2" v-model="value2" />
</template>

<script lang="ts" setup>
import { ref } from "vue";

const value2 = ref(true);
</script>

<template>
  <etu-switch />
  <etu-switch class="ml-2" v-model="value2" />
</template>

<script lang="ts" setup>
import { ref } from "vue";

const value2 = ref(true);
</script>

背景颜色

我们可以使用bgColor属性来设置背景色，默认是让人比较舒服的dodgerblue色。

<template>
  <etu-switch v-model="switch1"></etu-switch>
  <etu-switch bgColor="crimson" v-model="switch1" class="ml-2"></etu-switch>
  <etu-switch bgColor="limegreen" v-model="switch1" class="ml-2"></etu-switch>
</template>
<script setup lang="ts">
import { ref } from "vue";

const switch1 = ref(true);
</script>

<template>
  <etu-switch v-model="switch1"></etu-switch>
  <etu-switch bgColor="crimson" v-model="switch1" class="ml-2"></etu-switch>
  <etu-switch bgColor="limegreen" v-model="switch1" class="ml-2"></etu-switch>
</template>
<script setup lang="ts">
import { ref } from "vue";

const switch1 = ref(true);
</script>

大小

我们可以使用size属性来指定开关的尺寸，我们提供了large,normal和small三种可选值。

<template>
  <etu-switch size="small" v-model="switch1"></etu-switch>
  <etu-switch bgColor="crimson" v-model="switch1" class="ml-2"></etu-switch>
  <etu-switch
    bgColor="limegreen"
    size="large"
    v-model="switch1"
    class="ml-2"
  ></etu-switch>
</template>
<script setup lang="ts">
import { ref } from "vue";

const switch1 = ref(true);
</script>

<template>
  <etu-switch size="small" v-model="switch1"></etu-switch>
  <etu-switch bgColor="crimson" v-model="switch1" class="ml-2"></etu-switch>
  <etu-switch
    bgColor="limegreen"
    size="large"
    v-model="switch1"
    class="ml-2"
  ></etu-switch>
</template>
<script setup lang="ts">
import { ref } from "vue";

const switch1 = ref(true);
</script>

更多的值

我们也可以通过activeValue和inactiveValue自定义两种不同的状态对应值,同时让v-model的值为其中一个。

<template>
  <etu-switch
    v-model="demo"
    @change="showDemo"
    activeValue="1000"
    inactiveValue="0"
  ></etu-switch>
</template>
<script setup lang="ts">
import { ref } from "vue";

const demo = ref("1000");
function showDemo(v) {
  console.log(v);
}
</script>

<template>
  <etu-switch
    v-model="demo"
    @change="showDemo"
    activeValue="1000"
    inactiveValue="0"
  ></etu-switch>
</template>
<script setup lang="ts">
import { ref } from "vue";

const demo = ref("1000");
function showDemo(v) {
  console.log(v);
}
</script>

禁用

设置disabled属性来禁用switch

<template>
  <etu-switch disabled/>
  <etu-switch class="ml-2" v-model="value2" disabled/>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const value2 = ref(true);
</script>

<template>
  <etu-switch disabled/>
  <etu-switch class="ml-2" v-model="value2" disabled/>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const value2 = ref(true);
</script>

Drawer 属性

参数名可选值描述
bgColorcrimson,limegreen,dodgerblue,mediumpurple设置背景色
sizelarge,normal,small设置开关的大小尺寸
activeValue绑定值开关为 true 时的值，不指定默认为 true
inactiveValue绑定值开关为 false 时的值，不指定默认为 false
disabledtrue , false是否禁用,默认为 false，不禁用

Drawer 事件

事件名说明回调参数
changeswitch 状态发生变化时的回调函数val

Drawer 插槽

名称说明
Title自定义的标题
-自定义任意 content