Input 输入框 ​

<template>
  <w-radio-group v-model="size" aria-label="size control" class="mb-8">
    <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">
    <w-title>基础样式</w-title>
    <div class="flex gap-4">
      <w-input
        v-model="input"
        :size="size"
        style="width: 240px"
        placeholder="请输入"
      />
    </div>
  </div>
  <div>
    <w-title>禁用样式：通过 disabled 属性指定是否禁用 input 组件</w-title>
    <div class="flex gap-4 items-center">
      <w-input
        v-model="input1"
        :size="size"
        style="width: 240px"
        disabled
        placeholder="请输入"
        :suffix-icon="Search"
      />
      <w-input
        v-model="input2"
        :size="size"
        style="width: 240px"
        disabled
        placeholder="请输入"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Search } from '@win-design-next/icons-vue'

const input = ref('')
const input1 = ref('')
const input2 = ref('测试数据')

const size = ref('default')
</script>

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

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

const input = ref('')
const textarea = ref('')
</script>

<template>
  <div class="flex">
    <w-input
      v-model="input"
      plain
      :prefix-icon="User"
      style="width: 240px"
      placeholder="用户名/工号"
      clearable
    />

    <w-input
      v-model="input"
      class="ml-4"
      disabled
      plain
      style="width: 240px"
      :prefix-icon="User"
      placeholder="用户名/工号"
      clearable
    />
  </div>
  <div class="flex mt-4">
    <w-input
      v-model="psw"
      plain
      type="password"
      :prefix-icon="Lock"
      style="width: 240px"
      placeholder="密码"
      clearable
    />

    <w-input
      v-model="psw"
      class="ml-4"
      disabled
      plain
      type="password"
      :prefix-icon="Lock"
      style="width: 240px"
      placeholder="请输入密码"
      clearable
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Lock, User } from '@win-design-next/icons-vue'

const input = ref('')
const psw = ref('')
</script>

<template>
  <div class="flex gap-2" style="flex-direction: column">
    <w-input v-model="input" placeholder="请输入" clearable />
    <w-input
      v-model="input"
      placeholder="请输入"
      clearable
      :clear-icon="CircleClose"
    />
    <w-input
      v-model="textareaInput"
      placeholder="请输入"
      type="textarea"
      clearable
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { CircleClose } from '@win-design-next/icons-vue'

const input = ref('')
const textareaInput = ref('')
</script>

<template>
  <div class="flex gap-2" style="flex-direction: column">
    <w-input
      v-model="input"
      placeholder="请输入手机号"
      default-select
      style="width: 240px"
    />
    <w-input
      v-model="noSelect"
      placeholder="未开启 default-select（对照组）"
      style="width: 240px"
    />
  </div>
</template>

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

const input = ref('18812345678')
const noSelect = ref('18812345678')
</script>

<template>
  <w-input
    v-model="input"
    style="width: 240px"
    placeholder="请输入"
    :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('')
</script>

<template>
  <div class="flex gap-8" style="flex-direction: column">
    <w-input
      v-model="text"
      maxlength="10"
      placeholder="请输入"
      show-word-limit
      type="text"
    />
    <w-input
      v-model="text"
      maxlength="10"
      placeholder="请输入"
      show-word-limit
      word-limit-position="outside"
      type="text"
    />
    <w-input
      v-model="textarea"
      maxlength="30"
      placeholder="请输入"
      show-word-limit
      type="textarea"
    />
    <w-input
      v-model="textarea"
      maxlength="30"
      placeholder="请输入"
      show-word-limit
      word-limit-position="outside"
      type="textarea"
    />
  </div>
</template>

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

const text = ref('')
const textarea = ref('')
</script>

<template>
  <w-input
    v-model="value"
    :count-graphemes="countGraphemes"
    maxlength="10"
    show-word-limit
    placeholder="请输入"
    :prefix-icon="Search"
    style="width: 240px"
  />
  <w-input
    v-model="value"
    :count-graphemes="countGraphemes"
    maxlength="20"
    show-word-limit
    placeholder="请输入"
    :prefix-icon="Search"
    class="ml-4"
    style="width: 240px"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Search } from '@win-design-next/icons-vue'

const value = ref('')
// 按码点计数（而非 UTF-16 编码单元），
// 这样 👨‍👩‍👧 等由多个码点组成的 emoji 也能被正确统计
const countGraphemes = (str: string) => Array.from(str).length
</script>

<template>
  <w-input
    v-model="input"
    style="width: 240px"
    type="password"
    placeholder="请输入 password"
    show-password
  />
</template>

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

const input = ref('')
</script>

<template>
  <div class="flex gap-4 flex-wrap">
    <w-input
      v-model="textarea"
      style="width: 240px"
      :rows="2"
      type="textarea"
      placeholder="请输入"
    />

    <w-input
      v-model="textarea"
      disabled
      style="width: 240px"
      :rows="2"
      type="textarea"
      placeholder="请输入"
    />

    <w-input
      v-model="textarea1"
      disabled
      style="width: 240px"
      :rows="2"
      type="textarea"
      placeholder="请输入"
    />
  </div>
  <div class="flex gap-4 flex-wrap mt-4">
    <w-input
      v-model="textarea2"
      style="width: 240px"
      :textarea-height="32"
      type="textarea"
      placeholder="请输入"
    />

    <w-input
      v-model="textarea3"
      style="width: 240px"
      :textarea-height="32"
      type="textarea"
      autosize
      placeholder="请输入"
    />
  </div>
</template>

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

const textarea = ref('')
const textarea1 = ref('测试')
const textarea2 = ref('通过 textarea-height 设置高度')
const textarea3 = ref('通过 textarea-height 设置高度')
</script>

<template>
  <w-input
    v-model="textarea1"
    style="width: 240px"
    autosize
    type="textarea"
    placeholder="请输入"
  />
  <div style="margin: 20px 0" />
  <w-input
    v-model="textarea2"
    style="width: 240px"
    :autosize="{ minRows: 2, maxRows: 4 }"
    type="textarea"
    placeholder="请输入"
  />
</template>

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

const textarea1 = ref('')
const textarea2 = ref('')
</script>

<template>
  <div class="flex gap-4 mb-4">
    <span>使用属性</span>
    <w-input
      v-model="input1"
      style="width: 240px"
      placeholder="选择日期"
      :suffix-icon="Date"
      clearable
    />
    <w-input
      v-model="input2"
      style="width: 240px"
      placeholder="输入关键字搜索"
      :prefix-icon="Search"
    />
    <!-- 2.0 字体图标 class：经 w-icon 自动兼容 -->
    <w-input
      v-model="inputFont"
      style="width: 240px"
      placeholder="字体图标前缀"
      prefix-icon="w-icon-search"
    />
  </div>
  <div class="flex mb-4 gap-4 flex-wrap">
    <span>使用插槽</span>
    <w-input v-model="input3" style="width: 240px" placeholder="选择日期">
      <template #suffix>
        <w-icon class="w3-input__icon"><Date /></w-icon>
      </template>
    </w-input>
    <w-input v-model="input4" style="width: 240px" placeholder="输入关键字搜索">
      <template #prefix>
        <w-icon class="w3-input__icon"><search /></w-icon>
      </template>
    </w-input>
  </div>
  <div class="flex gap-4 flex-wrap">
    <span>删除位置</span>
    <w-input
      v-model="input4"
      clearable
      style="width: 240px"
      placeholder="输入关键字搜索"
    >
      <template #prefix> <span>前缀</span> </template>
      <template #suffix> <span>后缀</span> </template>
    </w-input>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Date, Search } from '@win-design-next/icons-vue'

const input1 = ref('')
const input2 = ref('')
const inputFont = ref('')
const input3 = ref('')
const input4 = ref('测试')
</script>

<template>
  <div>
    <w-input v-model="input1" style="max-width: 600px" placeholder="请输入">
      <template #prepend>Http://</template>
    </w-input>
  </div>
  <div class="mt-4">
    <w-input v-model="input2" style="max-width: 600px" placeholder="请输入">
      <template #append>.com</template>
    </w-input>
  </div>
  <div class="mt-4">
    <w-input
      v-model="input3"
      style="max-width: 600px"
      placeholder="请输入"
      class="input-with-select"
    >
      <template #prepend>
        <w-select v-model="select" placeholder="Select" style="width: 115px">
          <w-option label="Restaurant" value="1" />
          <w-option label="Order No." value="2" />
          <w-option label="Tel" value="3" />
        </w-select>
      </template>
      <template #append>
        <w-button :icon="Search" />
      </template>
    </w-input>
  </div>
  <div class="mt-4">
    <w-input
      v-model="input3"
      style="max-width: 600px"
      placeholder="请输入"
      class="input-with-select"
    >
      <template #prepend>
        <w-button :icon="Search" />
      </template>
      <template #append>
        <w-select v-model="select" placeholder="Select" style="width: 115px">
          <w-option label="Restaurant" value="1" />
          <w-option label="Order No." value="2" />
          <w-option label="Tel" value="3" />
        </w-select>
      </template>
    </w-input>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Search } from '@win-design-next/icons-vue'

const input1 = ref('')
const input2 = ref('')
const input3 = ref('')
const select = ref('')
</script>

<style>
.input-with-select .w3-input-group__prepend {
  background-color: var(--w3-fill-color-blank);
}
</style>