Skip to content

Latest commit

 

History

History
190 lines (147 loc) · 5.01 KB

swap.md

File metadata and controls

190 lines (147 loc) · 5.01 KB
Raw

Swap 切换

精致的切换组件

基本使用

需要使用 v-model 绑定一个值

icon-on 和 icon-off 分别控制切换的不同图标

::: demo

<template #source> 

<template>
  <f-swap v-model="value1" :icon-on="FIconSun" :icon-off="FIconMoon" />
  <f-swap v-model="value2" :icon-on="FIconSun" :icon-off="FIconMoon" />
</template>

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

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

:::

不同尺寸

size 属性可配置不同的尺寸

::: demo

<template #source> 

<template>
  <f-swap
    v-model="value5"
    :size="50"
    :icon-on="FIconFaceSmile"
    :icon-off="FIconFaceFrown"
  />
  <f-swap v-model="value6" size="30px" :icon-on="FIconEye" :icon-off="FIconEyeSlash" />
</template>

<script lang="ts" setup>
  import {
    FIconFaceFrown,
    FIconFaceSmile,
    FIconEye,
    FIconEyeSlash
  } from '@fighting-design/fighting-icon'
  import { ref } from 'vue'

  const value3 = ref(true)
  const value4 = ref(true)
</script>

:::

不同动画

type 属性可以配置不同的动画类型

::: demo

<template #source> 

<template>
  <f-swap v-model="value5" :icon-on="FIconEye" :icon-off="FIconEyeSlash" />
  <f-swap v-model="value6" type="sound" :icon-on="FIconSun" :icon-off="FIconMoon" />
  <f-swap
    v-model="value7"
    type="swap"
    :icon-on="FIconFaceSmile"
    :icon-off="FIconFaceFrown"
  />
</template>

<script lang="ts" setup>
  import {
    FIconSun,
    FIconMoon,
    FIconFaceSmile,
    FIconFaceFrown,
    FIconEye,
    FIconEyeSlash
  } from '@fighting-design/fighting-icon'
  import { ref } from 'vue'

  const value5 = ref(true)
  const value6 = ref(true)
  const value7 = ref(true)
</script>

:::

Attributes

参数 说明 类型 可选值 默认值
v-model 绑定值 boolean —— false
size 组件尺寸 string / number —— 40
type 动画类型 SwapType sound swap ——
icon-on 打开展示的图标 FightingIcon —— ——
icon-off 关闭展示的图标 FightingIcon —— ——
on-change 当绑定值发生改变时触发的回调 SwapChange —— ——

Interface

组件导出以下类型定义：

import type { SwapInstance, SwapProps, SwapType, SwapChange } from 'fighting-design'

SwapType

type SwapType = 'sound' | 'swap'

SwapChange

type SwapChange = (value: boolean, evt: MouseEvent) => void

Contributors

<script lang="ts" setup> import { FIconSoundUp, FIconSoundMute, FIconSun, FIconMoon, FIconFaceSmile, FIconFaceFrown, FIconEye, FIconEyeSlash } from '@fighting-design/fighting-icon' import { ref } from 'vue' const value1 = ref(true) const value2 = ref(false) const value3 = ref(true) const value4 = ref(true) const value5 = ref(true) const value6 = ref(true) const value7 = ref(true) </script> <style scoped> .f-swap { margin: 5px; } </style>