Input Number 数字输入框 ​

<template>
  <w-radio-group v-model="size" class="mb-8" aria-label="size control">
    <w-radio-button value="large">large</w-radio-button>
    <w-radio-button value="default">default</w-radio-button>
    <w-radio-button value="small">small</w-radio-button>
    <w-radio-button value="mini">mini</w-radio-button>
  </w-radio-group>
  <div class="mb-4 flex gap-4">
    <w-input-number
      v-model="num1"
      :size="size"
      :min="1"
      :max="10"
      @change="handleChange"
    />
    <w-input-number v-model="num2" :size="size" :disabled="true" />
    <w-input-number
      v-model="num7"
      :size="size"
      placeholder="请输入"
      :disabled="true"
    />
  </div>
</template>

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

const size = ref('default')
const num1 = ref(1)

const num2 = ref(1)
const num7 = ref(null)

const handleChange = (value: number | undefined) => {
  console.log(value)
}
</script>

<template>
  <w-input-number v-model="num" :step="2" />
</template>

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

const num = ref(5)
</script>

<template>
  <w-input-number v-model="num" :step="2" step-strictly />
</template>

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

const num = ref(2)
</script>

<template>
  <w-input-number v-model="num" :precision="2" :step="0.1" :max="10" />
</template>

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

const num = ref(1)
</script>

<template>
  <div class="flex gap-4">
    <div class="mb-4">
      <w-title>默认补零（precision=2）</w-title>
      <div>
        <w-input-number v-model="num1" :precision="2" :step="0.1" />
      </div>
    </div>
    <div class="mb-4">
      <w-title>去除末尾零（auto-pad-zero=false）</w-title>
      <div>
        <w-input-number
          v-model="num2"
          :precision="2"
          :step="0.1"
          :auto-pad-zero="false"
        />
      </div>
    </div>
  </div>
</template>

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

const num1 = ref(1.4)
const num2 = ref(1.4)
</script>

<template>
  <div class="flex gap-4">
    <div class="mb-4">
      <w-title>键盘上下键可用（默认）</w-title>
      <div>
        <w-input-number v-model="num1" />
      </div>
    </div>
    <div class="mb-4">
      <w-title>禁用键盘上下键（keyboard=false）</w-title>
      <div>
        <w-input-number v-model="num2" :keyboard="false" />
      </div>
    </div>
  </div>
</template>

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

const num1 = ref(1)
const num2 = ref(1)
</script>

<template>
  <w-input-number
    v-model="input"
    style="width: 200px"
    :formatter="(value) => `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
    :parser="(value) => value.replace(/\$\s?|(,*)/g, '')"
  />
</template>

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

const input = ref(10000)
</script>

<template>
  <div class="flex gap-4 items-center mb-8">
    <w-input-number
      v-model="input"
      placeholder="请输入"
      clearable
      tips="文本提示"
    />
    <w-input-number
      v-model="input"
      status="success"
      tips="校验通过文本提示"
      placeholder="请输入"
      clearable
    />
    <w-input-number
      v-model="input"
      status="error"
      tips="校验存在严重问题文本提示"
      placeholder="请输入"
      clearable
    />
    <w-input-number
      v-model="input"
      status="danger"
      tips="校验存在严重问题文本提示"
      placeholder="请输入"
      clearable
    />
    <w-input-number
      v-model="input"
      status="warning"
      tips="校验不通过文本提示"
      placeholder="请输入"
      clearable
    />
  </div>
</template>

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

const input = ref(1)
</script>

<template>
  <w-input-number
    v-model="num"
    :min="1"
    :max="10"
    controls-position=""
    size="large"
    @change="handleChange"
  />
  <w-input-number
    v-model="num"
    class="mx-4"
    :min="1"
    :max="10"
    controls-position=""
    @change="handleChange"
  />
  <w-input-number
    v-model="num"
    :min="1"
    class="mr-4"
    disabled
    :max="10"
    size="small"
    controls-position=""
    @change="handleChange"
  />
  <w-input-number
    v-model="num"
    :min="1"
    disabled
    :max="10"
    size="mini"
    controls-position=""
    @change="handleChange"
  />
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const num = ref(1)
const handleChange = (value: number | undefined) => {
  console.log(value)
}
</script>

<template>
  <w-space direction="vertical">
    <w-space>
      <w-input-number v-model="num" />
      <w-input-number v-model="num">
        <template #decrease-icon>
          <w-icon>
            <ArrowDown />
          </w-icon>
        </template>
        <template #increase-icon>
          <w-icon>
            <ArrowUp />
          </w-icon>
        </template>
      </w-input-number>
    </w-space>
    <w-space>
      <w-input-number v-model="num" controls-position="right" />
      <w-input-number v-model="num" controls-position="right">
        <template #decrease-icon>
          <w-icon>
            <Minus />
          </w-icon>
        </template>
        <template #increase-icon>
          <w-icon>
            <Plus />
          </w-icon>
        </template>
      </w-input-number>
    </w-space>
  </w-space>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ArrowDown, ArrowUp, Minus, Plus } from '@win-design-next/icons-vue'

const num = ref(1)
</script>

<template>
  <w-space>
    <w-input-number v-model="num" :min="1" :max="10">
      <template #prefix>
        <span>￥</span>
      </template>
    </w-input-number>
    <w-input-number v-model="num" :min="1" :max="10">
      <template #suffix>
        <span>RMB</span>
      </template>
    </w-input-number>
  </w-space>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const num = ref(1)
</script>