import{c as t,o as e,C as o}from"./vendor.870c33cc.js";const n={class:"markdown-body"},d=o('

Input 输入框

介绍

单行输入框

安装

import { createApp } from 'vue';\n//vue\nimport { Input } from '@nutui/nutui';\n//taro\nimport { Input } from '@nutui/nutui@taro';\n\nconst app = createApp();\napp.use(Input);\n\n

代码演示

基础用法

双向绑定

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

禁用和只读

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

限制输入长度

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

其他类型

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

代码

import { reactive } from 'vue';\nexport default {\n  setup() {\n    const state = reactive({\n      val0: '',\n      val1: '初始数据',\n      val2: '禁止修改',\n      val3: 'readonly 只读',\n      val4: '',\n      val5: '',\n      val6: '',\n      val7: '',\n      val8: '文案'\n    });\n    setTimeout(function() {\n      state.val1 = '异步数据';\n    }, 2000);\n    const change = (value: string | number,event:Event) => {\n      console.log('change: ', value,event);\n    };\n    const focus = (value: string | number,event:Event) => {\n      console.log('focus:', value,event);\n    };\n    const blur = (value: string | number,event:Event) => {\n      console.log('blur:', value,event);\n    };\n    const clear = (value: string | number) => {\n      console.log('clear:', value);\n    };\n\n    return {\n      state,\n      change,\n      blur,\n      clear,\n      focus\n    };\n  }\n}\n

Prop

参数	说明	类型	默认值
v-model	输入值，双向绑定	String	-
type	类型，可选值为 `text` `number` 等	String	`text`
placeholder	为空时占位符	String	-
label	左侧文案	String	-
require-show	左侧*号是否展示	Boolean	`false`
disabled	是否禁用	Boolean	`false`
readonly	是否只读	Boolean	`false`
max-length	限制最长输入字符	String、Number	-
clearable	展示清除icon	Boolean	`true`
text-align	文本位置,可选值`left`,`center`,`right`	String	`left`

Event

名称	说明	回调参数
change	输入内容时触发	val ,event
focus	聚焦时触发	val ,event
blur	失焦时触发	val ,event
clear	点击清空时触发	val

',21),u={expose:[],setup:o=>(o,u)=>(e(),t("div",n,[d]))};export default u;