Input 输入框

介绍

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

安装

import { createApp } from 'vue';
// vue
import { Input,Icon } from '@nutui/nutui';
// taro
import { Input,Icon } from '@nutui/nutui-taro';

const app = createApp();
app.use(Input);
app.use(Icon);

基础用法

:::demo

<template>
  <nut-input 
    v-model="state.text" 
    label="文本" 
    placeholder="文本" 
  />
</template>
<script lang="ts">
  import { reactive } from 'vue';
  export default {
    setup() {
      const state = reactive({
        text: ''
      });
      return {
        state
      };
    }
  }
</script>

:::

自定义类型

:::demo

<template>
  <nut-input 
    label="文本" 
    placeholder="文本" 
    v-model="state.text" 
  />
  <nut-input 
    label="密码" 
    placeholder="密码" 
    v-model="state.password" 
    type="password" 
  />
  <nut-input 
    label="数字" 
    placeholder="数字" 
    v-model="state.number" 
    type="number" 
  />
  <nut-input 
    label="整数" 
    placeholder="整数" 
    v-model="state.digit" 
    type="digit" 
  />
  <nut-input 
    label="手机号" 
    placeholder="手机号" 
    v-model="state.tel" 
    type="tel" 
  />
</template>
<script lang="ts">
  import { reactive } from 'vue';
  export default {
    setup() {
      const state = reactive({
        text: '',
        password: '',
        number: '',
        digit: '',
        tel: ''
      });
      return {
        state
      };
    }
  }
</script>

:::

禁用和只读

:::demo

<template>
  <nut-input 
    label="文本" 
    placeholder="只读" 
    v-model="state.readonly" 
    readonly 
  />
  <nut-input 
    label="文本" 
    placeholder="禁用" 
    v-model="state.disabled" 
    disabled 
  />
</template>
<script lang="ts">
  import { reactive } from 'vue';
  export default {
    setup() {
      const state = reactive({
        readonly: '',
        disabled: ''
      });
      return {
        state
      };
    }
  }
</script>

:::

显示图标

通过 left-icon 和 right-icon 配置输入框两侧的图标，通过设置 clearable 在输入过程中展示清除图标。需要引用 Icon 组件

:::demo

<template>
  <nut-input 
    v-model="state.showIcon" 
    label="文本" 
    placeholder="显示图标" 
    left-icon="dongdong" 
    right-icon="ask2" 
  />
  <nut-input 
    v-model="state.clear" 
    label="文本" 
    placeholder="显示清除图标" 
    clearable
    clearSize="14" 
  />
</template>
<script lang="ts">
  import { reactive } from 'vue';
  export default {
    setup() {
      const state = reactive({
        showIcon: '',
        required: '',
        clear:''
      });
      return {
        state
      };
    }
  }
</script>

:::

错误提示

:::demo

<template>
  <nut-input 
    v-model="state.required" 
    label="文本" 
    placeholder="必填项" 
    required 
  />
  <nut-input 
    v-model="state.error1" 
    label="文本" 
    placeholder="输入内容标红" 
    error 
  />
  <nut-input 
    v-model="state.error2" 
    label="文本" 
    placeholder="底部错误提示文案" 
    error-message="底部错误提示文案" 
  />
</template>
<script lang="ts">
  import { reactive } from 'vue';
  export default {
    setup() {
      const state = reactive({
        required: '',
        error1: '',
        error2: '',
      });
      return {
        state
      };
    }
  }
</script>

:::

插入按钮

:::demo

<template>
  <nut-input 
    v-model="state.buttonVal" 
    label="短信验证码"
    placeholder="请输入短信验证码"
    clearable 
    center 
  >
    <template #button>
      <nut-button size="small" type="primary">发送验证码</nut-button>
    </template>
  </nut-input>
</template>
<script lang="ts">
  import { reactive } from 'vue';
  export default {
    setup() {
      const state = reactive({
        buttonVal: ''
      });
      return {
        state
      };
    }
  }
</script>

:::

格式化输入内容

:::demo

<template>
  <nut-input 
    v-model="state.format1" 
    label="文本" 
    placeholder="在输入时执行格式化" 
    :formatter="formatter" 
  />
  <nut-input
    v-model="state.format2"
    label="文本"
    placeholder="在失焦时执行格式化"
    :formatter="formatter"
    format-trigger="onBlur"
  />
</template>
<script lang="ts">
  import { reactive } from 'vue';
  export default {
    setup() {
      const state = reactive({
        format1: '',
        format2: ''
      });
      const formatter = (value: string) => value.replace(/\d/g, '');
      return {
        state,
        formatter
      };
    }
  }
</script>

:::

显示字数统计

:::demo

<template>
  <nut-input
    v-model="state.textarea"
    label="留言"
    type="textarea"
    show-word-limit
    rows="2"
    max-length="50"
    placeholder="请输入留言"
  />
</template>
<script lang="ts">
  import { reactive } from 'vue';
  export default {
    setup() {
      const state = reactive({
        textarea: ''
      });
      return {
        state
      };
    }
  }
</script>

:::

对齐方式

:::demo

<template>
  <nut-input 
    v-model="state.align1" 
    label="文本" 
    label-align="right" 
    placeholder="文本内容对齐" 
  />
  <nut-input 
    v-model="state.align2" 
    label="文本" 
    input-align="right" 
    placeholder="输入框内容对齐"
   />
</template>
<script lang="ts">
  import { reactive } from 'vue';
  export default {
    setup() {
      const state = reactive({
        align1: '',
        align2: ''
      });
      return {
        state
      };
    }
  }
</script>

:::

无边框

:::demo

<template>
  <nut-input 
    v-model="state.noBorder1" 
    :border="false" 
    label="无边框" 
  />
  <nut-input 
    v-model="state.noBorder2" 
    :border="false" 
    label="无边框" 
  />
</template>
<script lang="ts">
  import { reactive } from 'vue';
  export default {
    setup() {
      const state = reactive({
        noBorder1: '',
        noBorder2: ''
      });
      return {
        state
      };
    }
  }
</script>

:::

点击事件

:::demo

<template>
  <nut-input
    v-model="state.event"
    label="点击"
    left-icon="dongdong"
    right-icon="ask2"
    clearable
    placeholder="点击"
    @update:model-value="change"
    @focus="focus"
    @blur="blur"
    @clear="clear"
    @click="click"
    @click-input="clickInput"
    @click-left-icon="clickLeftIcon"
    @click-right-icon="clickRightIcon"
  />
</template>
<script lang="ts">
  import { reactive } from 'vue';
  export default {
    setup() {
      const state = reactive({
        event: ''
      });
      const change = (value: string | number) => {
        console.log('change: ', value);
      };
      const focus = (value: string | number, event: Event) => {
        console.log('focus:', value, event);
      };
      const blur = (value: string | number, event: Event) => {
        console.log('blur:', value, event);
      };
      const clear = (value: string | number, event: Event) => {
        console.log('clear:', value, event);
      };
      const click = (value: string | number) => {
        console.log('click:', value);
      };
      const clickInput = (value: string | number) => {
        console.log('clickInput:', value);
      };
      const clickLeftIcon = (value: string | number) => {
        console.log('clickLeftIcon:', value);
      };
      const clickRightIcon = (value: string | number) => {
        console.log('clickRightIcon:', value);
      };

      return {
        state,
        change,
        blur,
        clear,
        focus,
        click,
        clickInput,
        clickLeftIcon,
        clickRightIcon
      };
    }
  }
</script>

:::

API

Props

参数	说明	类型	默认值
v-model	输入值，双向绑定	String	-
type	输入框类型，支持原生 `input` 标签的所有 `type` 属性，另外还支持 `textarea` `number` `digit`	String	`text`
placeholder	输入框为空时占位符	String	-
label	左侧文本	String	-
label-class	左侧文本额外类名	String	-
label-width	左侧文本宽度，默认单位为 `px`	String、Number	`80`
label-align	左侧文本对齐方式，可选值 `left`、`center`、`right`	String	`left`
input-align	输入框内容对齐方式，可选值 `left`、`center`、`right`	String	`left`
colon	是否在 label 后面添加冒号	Boolean	`false`
required	左侧*号是否展示	Boolean	`false`
border	是否显示下边框	Boolean	`true`
disabled	是否禁用	Boolean	`false`
readonly	是否只读	Boolean	`false`
autofocus	是否自动获得焦点，iOS 系统不支持该属性	Boolean	`false`
max-length	限制最长输入字符	String、Number	-
clearable	展示清除 Icon	Boolean	`false`
clear-icon	清除图标 Icon 名称或图片链接，可参考 Icon 组件的 name 属性	String	`mask-close`
clear-size	清除图标的 `font-size` 大小	String	`14`
left-icon	左侧 Icon 名称或图片链接，可参考 Icon 组件的 name 属性	String	-
right-icon	右侧 Icon 名称或图片链接，可参考 Icon 组件的 name 属性	String	-
left-icon-size	左侧 Icon 的 `font-size` 大小	String	`14`
right-icon-size	右侧 Icon 的 `font-size` 大小	String	`14`
show-word-limit	是否显示限制最长输入字符，需要设置 `max-length` 属性	Boolean	`false`
error	是否标红	Boolean	`false`
error-message	底部错误提示文案，为空时不展示	String、Number	-
error-message-align	底部错误提示文案对齐方式，可选值 `left`、`center`、`right`	String	-
formatter	输入内容格式化函数	`(val: string) => string`	-
format-trigger	格式化函数触发的时机，可选值为 `onChange`、`onBlur`	String	-
confirm-type	键盘右下角按钮的文字（`仅支持小程序`），仅在`type='text'`时生效,可选值 `send`：发送、`search`：搜索、`next`：下一个、`go`：前往、`done`：完成	String	`done`
adjust-position	键盘弹起时，是否自动上推页面，仅支持原生	Boolean	`true`

Events

名称	说明	回调参数
update:model-value	输入框内容变化时触发	val
focus	输入框聚焦时触发	val ,event
blur	输入框失焦时触发	val ,event
clear	点击清除按钮时触发	val ,event
click	点击组件时触发	val ,event
click-input	点击输入区域时触发	val ,event
click-left-icon	点击左侧图标时触发	val ,event
click-right-icon	点击右侧图标时触发	val ,event

Slots

| 名称 | 说明 | |-------|----------| | button | 自定义输入框尾部按钮 | | input v3.1.22 | 自定义输入框，使用此插槽后，与输入框相关的属性和事件将失效 |

doc.md 12 KB History Raw

Input 输入框

介绍

安装

基础用法

自定义类型

禁用和只读

显示图标

错误提示

插入按钮

格式化输入内容

显示字数统计

对齐方式

无边框

点击事件

API

Props

Events

Slots

doc.md 12 KB

History Raw