cui

Appearance

cuixingjian
1469
7.3m

Input 输入框 ​

通过鼠标或键盘输入字符。

基础用法 ​

基础的输入框用法。

vue
<template>
  <div class="input-demo">
      <c-input v-model="basicValue" placeholder="请输入内容" />
  </div>
</template>

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

const basicValue = ref("")
</script>

禁用状态 ​

通过 disabled 属性指定是否禁用 input 组件。

vue
<template>
  <div class="input-demo">
    <div class="input-row">
      <c-input v-model="disabledValue" placeholder="请输入内容" disabled />
    </div>
  </div>
</template>

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

const disabledValue = ref("")
</script>

只读状态 ​

通过 readonly 属性指定是否只读。

vue
<template>
  <div class="input-demo">
    <div class="input-row">
      <c-input v-model="readonlyValue" placeholder="只读输入框" readonly />
    </div>
  </div>
</template>

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

const readonlyValue = ref("这是只读内容")
</script>

可清空 ​

使用 clearable 属性即可得到一个可清空的输入框。

vue
<template>
  <div class="input-demo">
    <div class="input-row">
      <c-input v-model="clearableValue" placeholder="请输入内容" clearable />
    </div>
  </div>
</template>

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

const clearableValue = ref("")
</script>

密码框 ​

使用 show-password 属性即可得到一个可切换显示隐藏的密码框。

vue
<template>
  <div class="input-demo">
    <div class="input-row">
      <c-input
        v-model="passwordValue"
        type="password"
        placeholder="请输入密码"
        show-password
      />
    </div>
  </div>
</template>

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

const passwordValue = ref("")
</script>

带图标的输入框 ​

可以通过 prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标，也可以通过 slot 来放置图标。

vue
<template>
  <div class="input-demo">
    <div class="input-row">
      <c-input v-model="iconValue1" placeholder="请输入内容">
        <template #prefix>
          <c-icon><Search /></c-icon>
        </template>
      </c-input>
    </div>
    <div class="input-row">
      <c-input v-model="iconValue2" placeholder="请输入内容">
        <template #suffix>
          <c-icon><Calendar /></c-icon>
        </template>
      </c-input>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue"
import { Search, Calendar } from "@vicons/ionicons5"

const iconValue1 = ref("")
const iconValue2 = ref("")
</script>

不同尺寸 ​

Input 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的输入框尺寸。

vue
<template>
  <div class="input-demo">
    <div class="input-row">
      <c-input v-model="sizeValue1" size="large" placeholder="大型输入框" />
    </div>
    <div class="input-row">
      <c-input v-model="sizeValue2" placeholder="默认输入框" />
    </div>
    <div class="input-row">
      <c-input v-model="sizeValue3" size="small" placeholder="小型输入框" />
    </div>
  </div>
</template>

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

const sizeValue1 = ref("")
const sizeValue2 = ref("")
const sizeValue3 = ref("")
</script>

复合型输入框 ​

可前置或后置元素，一般为标签或按钮。

Http://
.com
Http://
.com
vue
<template>
  <div class="input-demo">
    <div class="input-row">
      <c-input v-model="prependValue" placeholder="请输入内容">
        <template #prepend>Http://</template>
      </c-input>
    </div>
    <div class="input-row">
      <c-input v-model="appendValue" placeholder="请输入内容">
        <template #append>.com</template>
      </c-input>
    </div>
    <div class="input-row">
      <c-input v-model="bothValue" placeholder="请输入内容">
        <template #prepend>Http://</template>
        <template #append>.com</template>
      </c-input>
    </div>
  </div>
</template>

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

const prependValue = ref("")
const appendValue = ref("")
const bothValue = ref("")
</script>

字数限制 ​

使用 maxlength 和 show-word-limit 属性，来控制输入长度。

0/10
vue
<template>
  <div class="input-demo">
    <div class="input-row">
      <c-input
        v-model="limitValue"
        type=""
        maxlength="10"
        placeholder="请输入内容"
        show-word-limit
      />
    </div>
  </div>
</template>

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

const limitValue = ref("")
</script>

Input API ​

Input Attributes ​

属性名说明类型可选值默认值
model-value绑定值string / number——
type类型stringtext / password / email / number / tel / url / searchtext
size输入框尺寸stringlarge / default / smalldefault
placeholder输入框占位文本string——
clearable是否可清空boolean—false
show-password是否显示切换密码图标boolean—false
disabled是否禁用boolean—false
readonly是否只读boolean—false
maxlength最大输入长度string / number——
minlength最小输入长度string / number——
show-word-limit是否显示输入字数统计，只在 type = "text" 时有效boolean—false
prefix-icon输入框头部图标string——
suffix-icon输入框尾部图标string——
name原生属性string——
autocomplete原生属性，自动补全string—off
autofocus原生属性，自动获取焦点boolean—false

Input Events ​

事件名说明回调参数
blur在 Input 失去焦点时触发(event: FocusEvent)
focus在 Input 获得焦点时触发(event: FocusEvent)
change仅当 modelValue 改变时，当输入框失去焦点时触发(value: string | number)
input在 Input 值改变时触发(value: string | number)
clear在点击由 clearable 属性生成的清空按钮时触发—

Input Slots ​

插槽名说明
prefix输入框头部内容，只对 type="text" 有效
suffix输入框尾部内容，只对 type="text" 有效
prepend输入框前置内容，只对 type="text" 有效
append输入框后置内容，只对 type="text" 有效

Input Exposes ​

方法名说明参数
blur使 input 失去焦点—
focus使 input 获取焦点—
select选中 input 中的文字—