GenshinUI

使用用例

该页面组件用于处理数字输入问题

数字输入框

使用v-model来绑定数据，当外部数据变化时，组件会根据约束重新为数据赋值。双边按钮支持长按和长按步幅。
<template>
  <div style="background: var(--font-light-gray); padding: 10px;">
  
  <GInputNumber v-model="num"/>
  <GInputNumber v-model="num" :step="2" :longStep="5" :size="30" />
  </div>
</template>
<script setup>
  import { ref } from 'vue'
  const num = ref(0)
</script>

验证输入

每次数据变动都会调用一次validate函数，函数可以返回一个number类型的值来更新值，或者返回一个boolean类型的值来通过或者阻止本次更新。注意！当多个组件控制同一个值时，根据组件先后顺序，顺位较后的组件检查自身约束时，可能会覆盖前一个组件的约束，导致值无法满足所有组件的约束。
<template>
  <div style="background: var(--font-light-gray); padding: 10px;">
  <GInputNumber v-model="num" :validate="validateValue" />
  <GInputNumber v-model="num" :min="0" :max="50" :step="2" :longStep="5" />
  </div>
</template>
<script setup>
  import { ref } from 'vue'
  const num = ref(0)
  
  const validateValue = (n) => {
    return !(n % 3 === 0)
  }
</script>

滑动输入组件

0
100
0
100
使用v-model来绑定数据。支持点击滑轨和拖动滑块修改数值。双边按钮支持长按和长按步幅。
<template>
  <div class="colored-bg">
    <GInputNumberSlider v-model="num" :min="0" :max="100" :step="1" style="width: 300px;height: 30px" />
    <GInputNumberSlider v-model="num2" :min="0" :max="100" :step="10" theme="dark" style="width: 300px" />
  </div>
</template>
<script setup>
  import { ref } from 'vue'
  const num = ref(0)
  const num2 = ref(0)
</script>

参数定义

NumberInputCommon

参数说明类型是否可选默认值
v-model数据绑定number必须-
step点击按钮的递增(减)步数number可选1
size按钮大小number可选20
min最小值number可选-Infinity
max最大值number可选Infinity
longStep长按的跳跃步数number可选10
validate验证函数(n: number) => number | boolean可选-

InputNumberSlider

参数说明类型是否可选默认值
theme主题'dark' | 'light'可选light
v-model数据绑定number必须-
step点击按钮的递增(减)步数number可选1
size按钮大小number可选20
min最小值number可选0
max最大值number可选100
longStep长按的跳跃步数number可选1
validate验证函数(n: number) => number | boolean可选-