Input 输入框组件

介绍

单行输入框

安装

import { createApp } from 'vue';
import { Input } from '@nutui/nutui';
const app = createApp();
app.use(Input);

代码演示

基础用法

双向绑定

<nut-input
      v-model="state.val1"
      @change="change"
      @focus="focus"
      @blur="blur"
      label="文本"
    />
<nut-input placeholder="请输入文本"
      @change="change"
      v-model="state.val0"
      :require-show="true"
      label="文本"
      @clear="clear"
    />

禁用和只读

<nut-input v-model="state.val2" @change="change"  disabled="true" label="标题："/>
<nut-input v-model="state.val3" @change="change" readonly="true"  label="标题："/>

限制输入长度

 <nut-input v-model="state.val4" @change="change" max-length="7" label="限制7" />

其他类型

<nut-input v-model="state.val0" @change="change" type="password" label="密码"/>
<nut-input v-model="state.val5" @change="change" type="number" label="整数" />
<nut-input v-model="state.val6" @change="change" type="digit" placeholder="支持小数点的输入" label="数字"/>

代码

import { reactive } from 'vue';
import { createComponent } from '@/packages/utils/create';
const { createDemo } = createComponent('input');
export default createDemo({
  setup() {
    const state = reactive({
      val0: '',
      val1: '初始数据',
      val2: '禁止修改',
      val3: 'readonly 只读',
      val4: '',
      val5: '',
      val6: '',
      val7: '',
      val8: '文案'
    });
    setTimeout(function() {
      state.val1 = '异步数据';
    }, 2000);
    const change = (value: string | number,event:Event) => {
      console.log('change: ', value,event);
    };
    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) => {
      console.log('clear:', value);
    };
    return {
      state,
      change,
      blur,
      clear,
      focus
    };
  }
});

Prop

Event