GenshinUI

使用用例

开关切换

隐藏细节
隐藏细节
基本用法, 使用v-model来绑定数据，在动画执行期间无法再次切换。
<template>
  <div class="colored-bg pl-100">
    <GSwitch style="margin: 10px" />
    <GSwitch style="margin: 10px" :defaultValue="true" />
    <GSwitch
      style="margin: 10px"
      v-model="switchValue"
      on-text="显示细节"
      off-text="隐藏细节"
    />
    <GSwitch
      style="margin: 10px"
      v-model="switchValue"
      on-text="显示细节"
      off-text="隐藏细节"
      text-side="right"
    />
  </div>
</template>
<script setup>
  import { ref } from 'vue'
  const switchValue = ref(false)
</script>

事件处理

隐藏细节
隐藏细节
@change事件会在组件值改变时调用，@click事件会在组件被点击时调用。@click事件提供一个回调函数，通过调用回调函数来更新组件值。如果回调函数传入空值，组件会对当前值取反。
<template>
  <div class="colored-bg pl-100">
    <GSwitch
      style="margin: 10px"
      v-model="switchValue"
      on-text="显示细节"
      off-text="隐藏细节"
      @change="() => Message.info('change')"
    />
    <GSwitch
      style="margin: 10px"
      v-model="switchValue"
      on-text="显示细节"
      off-text="隐藏细节"
      text-side="right"
      @click="switchFallback"
    />
  </div>
</template>
<script setup>
  import { ref } from 'vue'
  import { Message } from '@shi-zhong/genshin-ui'
  const switchValue = ref(false)
  const switchFallback = (n, f) => {
    // 模拟异步操作
    new Promise((r) => {
      setTimeout(() => {
        r(void 0)
      }, 1000)
    }).then(() => {
      f()
    })
  }
</script>

参数定义

参数说明类型是否可选默认值
v-model绑定值boolean可选-
onText激活文字string可选-
offText非激活文字string可选-
textSide文字陈列方向'left' | 'right'可选left
disable是否禁用boolean可选false
size大小number可选20
defaultValue默认值boolean可选false

事件说明

事件名说明回调参数
click点击组件触发(n: boolean) => void
change状态更新触发(n: boolean, switchValue: (n?: boolean) => void): void