hare-ui

Appearance

Return to top
On this page

Switch 开关

基本使用

基本使用
<template>
  <div class="margin--every">
    <h-switch
      v-model="active1"
    ></h-switch>
    <h-switch
      width="50px"
      v-model="active2"
    ></h-switch>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const active1 = ref(true)
const active2 = ref(true)
</script>

<style scoped lang="scss">
.margin--every * {
  margin: 5px 5px;
}
</style>

加入字体选项

关闭开启
加入字体选项
<template>
  <div class="margin--every">
    <h-switch
      v-model="active"
      active-text="开启"
      inactive-text="关闭"
    ></h-switch>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const active = ref(true)
</script>

<style scoped lang="scss">
.margin--every * {
  margin: 5px 5px;
}
</style>

改变激活颜色

关闭开启
未选中背景色#ff4949选中背景色#ff4949
改变激活颜色
<template>
  <div class="margin--every">
    <h-switch
      active-text-color="#ff4949"
      v-model="active1"
      active-text="开启"
      inactive-text="关闭"
    ></h-switch>
    <h-switch
      v-model="active2"
      active-color="#13ce66"
      inactive-color="#ff4949"
      active-text="选中背景色#ff4949"
      inactive-text="未选中背景色#ff4949"
    ></h-switch>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const active1 = ref(true)
const active2 = ref(true)
</script>

<style scoped lang="scss">
.margin--every * {
  margin: 5px 5px;
}
</style>

组件 API

Attributes 属性

参数说明类型可选值默认值
valueswitch 的状态boolean--
active-textswitch 被选中时的文字string--
inactive-textswitch 未被选中时的文字string--
widthswitch 的宽度string-40px
active-colorswitch 被选中的背景色string-#00008B
inactive-colorswitch 未被选中时的背景色string-#4169E1
nameswitch 对应的 name 属性string--
activeTextColoractive-text 的颜色string-#228B22