Switch 开关 ​

<template>
  <f-switch v-model="value1" />
  <f-switch v-model="value2" />
</template>

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

  const value1 = ref(true)
  const value2 = ref(false)
</script>

<template>
  <f-switch v-model="value3" size="large" />
  <f-switch v-model="value3" size="middle" />
  <f-switch v-model="value3" size="small" />
  <f-switch v-model="value3" size="mini" />
</template>

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

  const value3 = ref(true)
</script>

<template>
  <f-switch v-model="value4" disabled />
  <f-switch v-model="value5" disabled />
</template>

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

  const value4 = ref(true)
  const value5 = ref(false)
</script>

<template>
  <f-switch v-model="value4" loading />
  <f-switch v-model="value5" loading />
</template>

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

  const value4 = ref(true)
  const value5 = ref(false)
</script>

<template>
  <f-switch v-model="value6" square />
</template>

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

  const value6 = ref(true)
</script>

<template>
  <f-switch v-model="value7" close-color="red" active-color="skyblue" />
</template>

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

  const value7 = ref(true)
</script>

<template>
  <f-switch v-model="value8" close-text="关闭" active-text="开启" />
</template>

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

  const value8 = ref(true)
</script>

<template>
  <f-switch v-model="value9" :icon="FIconSnowflake" />
</template>

<script lang="ts" setup>
  import { FIconSnowflake } from '@fighting-design/fighting-icon'
  import { ref } from 'vue'

  const value9 = ref(true)
</script>