Stepper 步进器 #

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

const value = ref(1)
</script>

<template>
  <vi-stepper v-model="value" />
</template>

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

const value = ref(1)
</script>

<template>
  <vi-stepper v-model="value" disabled />
</template>

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

const value = ref(0)
</script>

<template>
  <vi-stepper v-model="value" :step="3" />
</template>

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

const value1 = ref(0)
const value2 = ref(0)
</script>

<template>
  <vi-flex align="center" gap="8px">
    <span>仅使用 min：</span>
    <vi-stepper v-model="value1" :min="1" />
    <span>一起使用：</span>
    <vi-stepper v-model="value2" :min="1" :max="3" />
  </vi-flex>
</template>

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

const value1 = ref(1)
const value2 = ref(1)
const value3 = ref(1)
</script>

<template>
  <vi-flex gap="18px">
    <vi-stepper v-model="value1" :to-fixed="1" />
    <vi-stepper v-model="value2" :to-fixed="2" :step="0.3" />
    <vi-stepper v-model="value3" :to-fixed="3" :step="0.03" />
  </vi-flex>
</template>

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

const value1 = ref(1)
const value2 = ref(1)
</script>

<template>
  <vi-flex gap="18px">
    <vi-stepper v-model="value1" position="left" :min="1" :max="5" />
    <vi-stepper v-model="value2" position="right" :min="1" :max="5" />
  </vi-flex>
</template>

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

const value1 = ref(1)
const value2 = ref(1)
const value3 = ref(1)
</script>

<template>
  <vi-flex gap="18px">
    <vi-stepper v-model="value1" icon-size="22px" />
    <vi-stepper v-model="value2" position="left" icon-size="16px" />
    <vi-stepper v-model="value3" position="right" icon-size="16px" />
  </vi-flex>
</template>