Skip to content

开关

基础用法

vue
<script setup lang="ts">
  import { ref } from 'vue';
  const value = ref(false);
</script>

<template>
  <HSwitch v-model:value="value"></HSwitch>
</template>
<script setup lang="ts">
  import { ref } from 'vue';
  const value = ref(false);
</script>

<template>
  <HSwitch v-model:value="value"></HSwitch>
</template>

设置大小

vue
<script setup lang="ts">
  import { ref } from 'vue';
  const value = ref(false);
</script>

<template>
  <HSwitch v-model:value="value" :size="24"></HSwitch>
  <HSwitch v-model:value="value" :size="36"></HSwitch>
</template>
<script setup lang="ts">
  import { ref } from 'vue';
  const value = ref(false);
</script>

<template>
  <HSwitch v-model:value="value" :size="24"></HSwitch>
  <HSwitch v-model:value="value" :size="36"></HSwitch>
</template>

设置主题颜色

vue
<script setup lang="ts">
  import { ref } from 'vue';
  const value = ref(false);
</script>

<template>
  <HSwitch v-model:value="value" theme="pink"></HSwitch>
  <HSwitch v-model:value="value" theme="#1989FA"></HSwitch>
</template>
<script setup lang="ts">
  import { ref } from 'vue';
  const value = ref(false);
</script>

<template>
  <HSwitch v-model:value="value" theme="pink"></HSwitch>
  <HSwitch v-model:value="value" theme="#1989FA"></HSwitch>
</template>