Chi-UI

Appearance

Input 输入框 ​

通过键入内容输入数据，是最基础的表单域的包装。

代码示例 ​

基础用法 ​

基础用法，可以使用 v-model:value 进行双向绑定。

Input Value: 

<template>
  <chi-input v-model:value="value" placeholder="基础用法" style="max-width: 300px"></chi-input>
  <p>Input Value: {{ value }}</p>
</template>

<script setup>
import { ref } from 'vue'

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

禁用状态 ​

添加 disabled 属性可以设置禁用状态。



<template>
  <chi-input placeholder="正常状态" style="max-width: 300px"></chi-input>
  <br />
  <br />
  <chi-input disabled placeholder="禁用状态" style="max-width: 300px"></chi-input>
</template>

可清空 ​

添加 clearable 属性可以使控件值可清空。

<template>
  <chi-input clearable style="max-width: 300px" v-model:value="value"></chi-input>
</template>

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

内嵌图标 ​

设置 prefix 和 suffix 的值或使用同名插槽，可以为输入框添加前置和后置图标。



<template>
  <chi-input placeholder="前置图标" style="max-width: 300px" :prefix="User"></chi-input>
  <br />
  <br />
  <chi-input placeholder="后置图标" clearable style="max-width: 300px" :suffix="Search"></chi-input>
</template>

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

改变尺寸 ​

设置 size 属性的值可以改变输入框的尺寸，目前一共提供了三种尺寸供选择。





<template>
  <chi-input
    size="small"
    placeholder="Small size"
    style="max-width: 300px"
    :prefix="User"
  ></chi-input>
  <br />
  <br />
  <chi-input placeholder="Medium size" style="max-width: 300px" :prefix="User"></chi-input>
  <br />
  <br />
  <chi-input
    size="large"
    placeholder="Large size"
    style="max-width: 300px"
    :prefix="User"
  ></chi-input>
</template>

<script setup>
import { User } from 'lucide-vue-next'
</script>

同步输入 ​

默认情况下双向绑定是基于 change 事件，添加了 sync 属性后将变为基于 input 事件。

Input Value: 

<template>
  <p>Input Value: {{ value }}</p>
  <chi-input clearable style="max-width: 300px" sync v-model:value="value"></chi-input>
</template>

<script setup>
import { ref } from 'vue'

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

前后置插槽 ​

使用 before 和 after 属性或插槽可以将一些内容与输入框组合。

如果你想要一个按钮、选择器或是其他控件，应该使用 before-action 和 after-action 插槽。

https://
.com
<template>
  <chi-space vertical>
    <chi-input before="https://" placeholder="chi-ui">
      <template #after>.com</template>
    </chi-input>
    <chi-input placeholder="chi-ui">
      <template #after-action>
        <chi-button type="primary" :icon-before="Search">搜索</chi-button>
      </template>
    </chi-input>
    <chi-input placeholder="chi-ui">
      <template #before-action>
        <chi-button>Before</chi-button>
      </template>
      <template #after-action>
        <chi-button>After</chi-button>
      </template>
    </chi-input>
  </chi-space>
</template>

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

密码 ​

将 type 属性设置为 'password' 可以开启密码输入。

在密码输入模式下添加 plain-password 属性可以打开切换密码明文的后缀按钮。

还可以通过 password 插槽自定义后缀按钮的图标。



<template>
  <chi-input type="password" plain-password style="max-width: 300px"></chi-input>
  <br />
  <br />
  <chi-input type="password" plain-password clearable style="max-width: 300px">
    <template #password="{ plain }">
      <chi-icon v-if="plain" :icon="Laugh"></chi-icon>
      <chi-icon v-else :icon="Frown"></chi-icon>
    </template>
  </chi-input>
</template>

<script setup>
import { Frown, Laugh } from 'lucide-vue-next'
</script>

加载状态 ​

通过 loading 属性可以控制输入框的加载状态。

如果你希望在加载中为只读，需要添加 loading-lock 属性。





Loading: true
<template>
  <chi-input placeholder="加载中可以编辑" :loading="loading"></chi-input>
  <br />
  <br />
  <chi-input loading-lock placeholder="加载中不可编辑" :loading="loading"></chi-input>
  <br />
  <br />
  Loading: {{ loading }}
</template>

<script setup>
import { ref } from 'vue'

const loading = ref(true)
</script>

不同状态 ​

通过 state 属性可以设置不同状态。







<template>
  <div style="max-width: 300px">
    <chi-input></chi-input>
    <br />
    <br />
    <chi-input state="success"></chi-input>
    <br />
    <br />
    <chi-input state="warning"></chi-input>
    <br />
    <br />
    <chi-input state="error"></chi-input>
  </div>
</template>

API ​

Input 属性 ​

名称类型说明默认值
afterstring设置输入框的后置内容
autocompleteboolean | string设置输入框的自动完成，布尔值将会被解析成 'on' 或 'off'false
beforestring设置输入框的前置内容
clearableboolean设置是否可以清空值false
disabledboolean设置是否禁用输入框false
loadingboolean设置是否为加载中false
loading-lockboolean设置在加载中时是否为只读false
placeholderstring设置输入框的占位符'请输入'
plain-passwordboolean设置是否显示查看明文密码的按钮false
prefixLucideIcon前缀图标名称，使用前缀插槽时无效
size'small' | 'medium' | 'large'输入框的大小'medium'
state'default' | 'success' | 'warning' | 'error'输入框的状态'default'
suffixLucideIcon后缀图标名称，使用后缀插槽时无效
syncboolean设置是否为同步输入模式
type'text' | 'password' | 'number'输入框类型
valuestring | number设置输入框的值，可以使用 v-model 双向绑定''

Input 事件 ​

名称说明参数
blur输入框失去焦点时触发(event: FocusEvent)
change输入框值改变时触发(value: string | number)
clear通过清空按钮清除值时触发
focus输入框聚焦时触发(event: FocusEvent)
input键入了值时触发(value: string | number)

Input 插槽 ​

名称说明参数
after后置内容的插槽，一般为文字内容
after-action后置控件的插槽
before前置内容的插槽，一般为文字内容
before-action前置控件的插槽
password查看明文密码按钮的插槽，一般为单个图标{plain: boolean}
prefix前缀内容的插槽，一般为单个图标
suffix后缀内容的插槽，一般为单个图标