import{e as t,o as a,G as n}from"./vendor.js";const l={class:"markdown-body"},p=n(`

Input \u8F93\u5165\u6846

\u4ECB\u7ECD

\u5355\u884C\u8F93\u5165\u6846

\u5B89\u88C5

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);

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

\u53CC\u5411\u7ED1\u5B9A

<nut-input
      v-model="state.val1"
      @change="change"
      @focus="focus"
      @blur="blur"
      label="\u6587\u672C"
    />
<nut-input placeholder="\u8BF7\u8F93\u5165\u6587\u672C"
      @change="change"
      v-model="state.val0"
      :require-show="true"
      label="\u6587\u672C"
      @clear="clear"
    />

\u7981\u7528\u548C\u53EA\u8BFB

<nut-input v-model="state.val2" @change="change"  disabled="true" label="\u6807\u9898\uFF1A"/>
<nut-input v-model="state.val3" @change="change" readonly="true"  label="\u6807\u9898\uFF1A"/>

\u9650\u5236\u8F93\u5165\u957F\u5EA6

 <nut-input v-model="state.val4" @change="change" max-length="7" label="\u9650\u52367" />

\u5176\u4ED6\u7C7B\u578B

<nut-input v-model="state.val0" @change="change" type="password" label="\u5BC6\u7801"/>
<nut-input v-model="state.val5" @change="change" type="number" label="\u6574\u6570" />
<nut-input v-model="state.val6" @change="change" type="digit" placeholder="\u652F\u6301\u5C0F\u6570\u70B9\u7684\u8F93\u5165" label="\u6570\u5B57"/>

\u4EE3\u7801

import { reactive } from 'vue';
export default {
  setup() {
    const state = reactive({
      val0: '',
      val1: '\u521D\u59CB\u6570\u636E',
      val2: '\u7981\u6B62\u4FEE\u6539',
      val3: 'readonly \u53EA\u8BFB',
      val4: '',
      val5: '',
      val6: '',
      val7: '',
      val8: '\u6587\u6848'
    });
    setTimeout(function() {
      state.val1 = '\u5F02\u6B65\u6570\u636E';
    }, 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

\u53C2\u6570	\u8BF4\u660E	\u7C7B\u578B	\u9ED8\u8BA4\u503C
v-model	\u8F93\u5165\u503C\uFF0C\u53CC\u5411\u7ED1\u5B9A	String	-
type	\u7C7B\u578B\uFF0C\u53EF\u9009\u503C\u4E3A `text` `number` \u7B49	String	`text`
placeholder	\u4E3A\u7A7A\u65F6\u5360\u4F4D\u7B26	String	-
label	\u5DE6\u4FA7\u6587\u6848	String	-
require-show	\u5DE6\u4FA7*\u53F7\u662F\u5426\u5C55\u793A	Boolean	`false`
disabled	\u662F\u5426\u7981\u7528	Boolean	`false`
readonly	\u662F\u5426\u53EA\u8BFB	Boolean	`false`
max-length	\u9650\u5236\u6700\u957F\u8F93\u5165\u5B57\u7B26	String\u3001Number	-
clearable	\u5C55\u793A\u6E05\u9664icon	Boolean	`true`
text-align	\u6587\u672C\u4F4D\u7F6E,\u53EF\u9009\u503C`left`,`center`,`right`	String	`left`

Event

\u540D\u79F0	\u8BF4\u660E	\u56DE\u8C03\u53C2\u6570
change	\u8F93\u5165\u5185\u5BB9\u65F6\u89E6\u53D1	val ,event
focus	\u805A\u7126\u65F6\u89E6\u53D1	val ,event
blur	\u5931\u7126\u65F6\u89E6\u53D1	val ,event
clear	\u70B9\u51FB\u6E05\u7A7A\u65F6\u89E6\u53D1	val

`,21),e=[p],u={setup(c,{expose:s}){return s({frontmatter:{}}),(r,d)=>(a(),t("div",l,e))}};export{u as default};