nutui-uniapp

Appearance

Input 输入框 ​

介绍 ​

用户可以在文本框里输入内容。

基础用法 ​

可以通过 v-model 双向绑定输入框的值，通过 placeholder 设置占位提示文字。

html
<template>
  <nut-input v-model="text" placeholder="请输入文本"></nut-input>
</template>
typescript
const text = ref<string>('')

自定义类型 ​

根据 type 属性定义不同类型的输入框，默认值为 text。

html
<template>
  <nut-input v-model="text"
             placeholder="请输入文本"></nut-input>

  <nut-input v-model="text"
             type="password"
             placeholder="请输入密码"></nut-input>

  <nut-input v-model="text"
             type="number"
             placeholder="请输入数字"></nut-input>

  <nut-input v-model="text"
             type="digit"
             placeholder="请输入整数"></nut-input>
</template>

禁用和只读 ​

通过 readonly 将输入框设置为只读状态，通过 disabled 将输入框设置为禁用状态。

html
<template>
  <nut-input v-model="text"
             placeholder="输入框只读"
             readonly></nut-input>

  <nut-input v-model="text"
             placeholder="输入框已禁用"
             disabled></nut-input>
</template>

显示清除图标 ​

通过设置 clearable 在输入过程中展示清除图标。清除按钮，在失去焦点后将隐藏,可通过 show-clear-icon 设置失去焦点后继续展示清除按钮。

html
<template>
  <nut-input v-model="text"
             placeholder="显示清除图标"
             clearable
             clear-size="14"></nut-input>

  <nut-input v-model="text"
             placeholder="自定义清除图标"
             clearable
             clear-size="14"
             show-word-limit
             max-length="50"
             show-clear-icon>
    <template #clear>
      <nut-icon name="close"
                size="12"
                width="12"
                height="12"
                @click="clearValue"></nut-icon>
    </template>
  </nut-input>
</template>
typescript
const text = ref<string>('')

function clearValue() {
  text.value = ''
}

配合表单使用 ​

结合 nut-form 与 nut-form-item 使用

html
<template>
  <nut-form :model-value="form">
    <nut-form-item label="文本" label-align="center">
      <nut-input v-model="form.text" placeholder="请输入文本" :border="false"></nut-input>
    </nut-form-item>
  </nut-form>
</template>
typescript
const form = ref({
  text: ''
})

格式化输入内容 ​

通过 formatter 属性可以对输入的内容进行格式化，通过 format-trigger 属性可以指定执行格式化的时机。例如只允许输入非数字的字符：

html
<template>
  <nut-input v-model="text1"
             placeholder="在输入时执行格式化"
             :formatter="formatter"
             format-trigger="onChange"></nut-input>

  <nut-input v-model="text2"
             placeholder="在失焦时执行格式化"
             :formatter="formatter"
             format-trigger="onBlur"></nut-input>
</template>
typescript
const text1 = ref<string>('')
const text2 = ref<string>('')

function formatter(value: string) {
  return value.replace(/\d/g, '')
}

显示字数统计 ​

设置 max-length 和 show-word-limit 属性后会在底部显示字数统计。

html
<template>
  <nut-input v-model="text"
             placeholder="请输入留言"
             max-length="50"
             show-word-limit></nut-input>
</template>

无边框 ​

通过 border 属性可以设置输入框的边框。

html
<template>
  <nut-input v-model="text1"
             placeholder="输入框无边框"
             :border="false"></nut-input>

  <nut-input v-model="text2"
             placeholder="输入框无边框"
             :border="false"></nut-input>
</template>

事件演示 ​

html
<template>
  <nut-input v-model="text"
             placeholder="事件演示"
             clearable
             @clear="onClear"
             @click-input="onInputClick"></nut-input>

  <nut-toast v-model:visible="show" :msg="message" type="text" />
</template>
typescript
const text = ref<string>('')

const show = ref<boolean>(false)
const message = ref<string>('')

function showToast(msg: string) {
  message.value = msg
  show.value = true
}

function onClear() {
  showToast('clear')
}

function onInputClick() {
  showToast('clickInput')
}

插槽演示 ​

html
<template>
  <nut-input v-model="text"
             placeholder="插槽演示"
             clearable>
    <template #left>
      <nut-icon name="ask"></nut-icon>
    </template>

    <template #right>
      <nut-button type="primary" size="small">获取验证码</nut-button>
    </template>
  </nut-input>
</template>

API ​

Props ​

参数说明类型默认值
v-model输入值，双向绑定string | number-
type输入框类型 有效值stringtext
input-mode H5 App输入框模式 是一个枚举属性，它提供了用户在编辑元素或其内容时可能输入的数据类型的提示 有效值stringtext
input-style 1.7.3输入框自定义样式StyleValue-
input-class 1.7.3输入框自定义类名ClassType-
placeholder输入框为空时占位符string-
placeholder-style指定 placeholder 的样式string-
placeholder-class指定 placeholder 的样式类stringinput-placeholder
input-align输入框内容对齐方式，可选值 left、center、rightstringleft
required是否显示必填字段的标签旁边的红色星号booleanfalse
border是否显示下边框booleantrue
disabled是否禁用booleanfalse
readonly是否只读booleanfalse
autofocus是否自动获得焦点，iOS 系统不支持该属性booleanfalse
max-length限制最长输入字符string ｜ number-
clearable展示清除 Iconbooleanfalse
show-clear-icon是否在失去焦点后，继续展示清除按钮，在设置 clearable 时生效booleanfalse
clear-size清除图标的 font-size 大小string14
show-word-limit是否显示限制最长输入字符，需要设置 max-length 属性booleanfalse
error是否标红booleanfalse
formatter输入内容格式化函数(val: string) => string-
format-trigger格式化函数触发的时机，可选值为 onChange、onBlurstringonChange
confirm-type键盘右下角按钮的文字，仅在type='text'时生效,可选值 send：发送、search：搜索、next：下一个、go：前往、done：完成stringdone
adjust-position键盘弹起时，是否自动上推页面booleantrue
always-system是否强制使用系统键盘和 Web-view 创建的 input 元素。为 true 时，confirm-type、confirm-hold 可能失效booleanfalse
cursor-spacing指定光标与键盘的距离，取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离number0
always-embed强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效)booleanfalse
confirm-hold点击键盘右下角按钮时是否保持键盘不收起booleanfalse
cursor指定focus时的光标位置number-
selection-start光标起始位置，自动聚集时有效，需与selection-end搭配使用number-1
selection-end光标结束位置，自动聚集时有效，需与selection-start搭配使用number-1
hold-keyboardfocus时，点击页面的时候不收起键盘booleanfalse

Events ​

事件名说明回调参数
update:model-value输入框内容变化时触发(value: string, event?: BaseEvent)
focus输入框聚焦时触发(event: InputOnFocusEvent)
blur输入框失焦时触发(event: InputOnBlurEvent)
clear点击清除按钮时触发``
click点击组件时触发(event: BaseEvent)
click-input点击输入区域时触发(event: BaseEvent)
confirm点击完成按钮时触发(event: InputOnConfirmEvent)
input键盘输入时触发(value: string, event: InputOnInputEvent)

Slots ​

名称说明
clear自定义输入框尾部清除按钮
left自定义输入框左侧插槽内容
right自定义输入框右侧插槽内容

主题定制 ​

样式变量 ​

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

名称默认值
--nut-input-padding 1.7.910px 25px
--nut-input-font-sizevar(--nut-font-size-2)
--nut-input-line-height 1.7.920px
--nut-input-border-bottom#eaf0fb
--nut-input-disabled-color#c8c9cc
--nut-input-required-colorvar(--nut-required-color)
--nut-input-limit-font-size 1.7.9var(--nut-font-size-1)
--nut-input-limit-color 1.7.9#808080

MIT Licensed

版权所有 © 2023 年-至今 yang1206 贡献者