BreezeUI
  • 简体中文

    • Input 输入框

    显示表单输入字段或看起来像输入字段的组件。

    组件特性

    • 📏 多种尺寸：支持 xs、sm、md、lg、xl、2xl、default 尺寸规格。
    • 🖼️ 前后图标：通过插槽支持前缀和后缀图标。
    • ❌ 可清除：支持在有值时显示清除按钮。
    • 🔒 密码模式：支持密码可见性切换。
    • ⚠️ 错误状态：支持 error 属性显示错误状态。
    • 📝 只读/禁用：支持 readonly 和 disabled 属性。
    • 🎨 主题定制：基于 BrConfigProvider 支持全局主题配置和 TailwindCSS 局部覆盖。

    基础用法

    <script setup>
import { ref } from 'vue'
const inputValue = ref('')
</script>

<template>
  <div class="space-y-2">
    <BrInput v-model="inputValue" placeholder="Basic Input" />
    <p class="text-xs text-muted-foreground">Value: {{ inputValue }}</p>
  </div>
</template>

    禁用状态

    <template>
<div class="space-y-2">
  <BrInput disabled placeholder="Disabled Input" />
</div>
</template>

    只读状态

    <template>
<div class="space-y-2">
  <BrInput readonly model-value="Readonly Input" />
</div>
</template>

    尺寸

    <template>
<div class="space-y-2">
  <BrInput size="xs" placeholder="Extra Small Input" />
  <BrInput size="sm" placeholder="Small Input" />
  <BrInput size="default" placeholder="Default Input" />
  <BrInput size="lg" placeholder="Large Input" />
  <BrInput size="xl" placeholder="Extra Large Input" />
  <BrInput size="2xl" placeholder="2 Extra Large Input" />
</div>
</template>

    带图标

    <script setup>
import { Search, Mail } from 'lucide-vue-next'
</script>

<template>
  <div class="space-y-2">
    <BrInput placeholder="Search...">
      <template #prefix>
        <Search class="h-4 w-4" />
      </template>
    </BrInput>
    <BrInput placeholder="Email" autocomplete="off">
      <template #prefix>
        <Mail class="h-4 w-4" />
      </template>
    </BrInput>
  </div>
</template>

    可清除

    <script setup>
import { ref } from 'vue'
const inputValue = ref('')
</script>

<template>
  <div class="space-y-2">
    <BrInput v-model="inputValue" clearable placeholder="Type to clear..." />
  </div>
</template>

    密码输入

    <script setup>
import { ref } from 'vue'
const password = ref('')
</script>

<template>
  <div class="space-y-2">
    <BrInput v-model="password" type="password" show-password placeholder="Enter password" autocomplete="new-password" />
  </div>
</template>

    错误状态

    <template>
<div class="space-y-2">
  <BrInput error placeholder="Invalid input" />
</div>
</template>

    主题定制

    你可以使用 Tailwind CSS 类自定义输入框的外观，或者通过覆盖全局 CSS 变量。

    CSS 变量

    :root {
  --input: 214.3 31.8% 91.4%;
  --ring: 222.2 84% 4.9%;
  --radius: 0.5rem;
}

.dark {
  --input: 217.2 32.6% 17.5%;
  --ring: 212.7 26.8% 83.9%;
}

    Tailwind 定制

    你也可以使用 class 属性添加自定义样式：

    <BrInput class="border-blue-500 focus-visible:ring-blue-500" />

    API

    Props

    属性名类型默认值说明
    modelValuestring | number-输入框的值。
    defaultValuestring | number-输入框的默认值。
    typestringtextHTML input 类型属性。
    disabledbooleanfalse是否禁用输入框。
    readonlybooleanfalse是否只读。
    placeholderstring-占位文本。
    sizexs | sm | md | default | lg | xl | 2xldefault输入框尺寸。
    errorbooleanfalse是否显示错误状态。
    clearablebooleanfalse当有值时是否显示清除按钮。
    showPasswordbooleanfalse是否显示密码切换按钮（仅在 type="password" 时有效）。

    Slots

    名称说明
    prefix显示在输入文本之前的内容。
    suffix显示在输入文本之后的内容。

    Events

    名称参数说明
    update:modelValuestring | number当输入值变化时触发。
    clear-当点击清除按钮时触发。
    inputEvent当输入值变化时触发。
    changeEvent当输入值变化时触发（blur 或 enter）。
    focusEvent当输入框获得焦点时触发。
    blurEvent当输入框失去焦点时触发。