TextInput 文本框请使用手机扫码体验

单行文本框。

基本用法

  1. html
    <nut-textinput 
  2.     v-model="val"
  3.     label="无清空按钮："
  4.     placeholder="请输入内容"
  5.     :clearBtn="true"
  6.     :disabled="false"
  7. />

高级用法

密码框

  1. html
    <nut-textinput 
  2.     placeholder="请输入密码" 
  3.     v-model="val" 
  4.     label="密码框：" 
  5.     type="password"
  6. />

禁用

  1. html
    <nut-textinput 
  2.     label="禁用状态：" 
  3.     :disabled="true" 
  4.     placeholder="请输入内容" 
  5. />

使用input原生属性

  1. html
    <!-- maxlength -->
  2. <nut-textinput
  3.     placeholder="maxlength=5"
  4.     maxlength="5"
  5.     label="限制文字数："
  6. />
  8. <!-- readonly -->
  9. <nut-textinput 
  10.     placeholder="请输入内容" 
  11.     v-model="val" 
  12.     readonly 
  13.     label="只读：" 
  14. />

使用input原生事件

  1. html
    <nut-textinput
  2.     placeholder="请输入内容"
  3.     label="focus/blur事件："
  4.     @focus="onFocus"
  5.     @blur="onBlur"
  6.     v-model="val"
  7. />

自定义关闭按钮样式

  1. html
    <nut-textinput
  2.     class="my-input"
  3.     v-model="val7"
  4.     placeholder="请输入搜索内容"
  5.     :clearBtnPersonnal="true"
  6. >
  7.     <template v-slot:clearBtn>
  8.         <nut-icon type="cross"></nut-icon>
  9.     </template>
  10. </nut-textinput>

自动聚焦

注：由于移动设备的不同，第一次自动获取焦点并不一定能吊起键盘，需要手动吊起来一次，当再次进入时则正常吊起键盘

  1. html
    <div class="autoFucus">
  2.   <nut-textinput  class="my-input" type="search" v-model="val8"  placeholder="请输入搜索内容" ref="myInput" @keyup.enter="submit" />
  4.   <div class="searchBtn" @click="submit">搜索</div>
  5. </div>
  1. javascript
    export default {
  2.   data() {
  3.     return {
  4.       val: ""
  5.     };
  6.   },
  7.   mounted() {
  8.     //设置获取焦点
  9.     this.$nextTick(function() {
  10.                 this.$refs.myInput.focus()
  11.         })
  12.   },
  13.   methods: {
  14.     onFocus() {
  15.       console.log("focus事件触发！");
  16.     },
  17.     onBlur() {
  18.       console.log("blur事件触发！");
  19.     },
  20.     submit() {
  21.       //失去焦点
  22.         this.$refs.myInput.blur()
  23.     }
  24.   }
  25. };

Prop

字段说明类型默认值
value当前input值，可使用 v-model 双向绑定数据String‘’
typeinput输入框的类型String‘text’
placeholder占位文本String‘’
label文本框前面的标签String‘’
disabled是否禁用Booleanfalse
clear-btn是否需要清空按钮Booleantrue
has-border是否需要边框Booleantrue
clearBtnPersonnal是否需要定制化清除按钮，如果是true,需要配合slot: clearBtn使用，如案例自定义关闭按钮样式Booleanfalse

特殊说明

设置input框自动聚焦时，由于ios和安卓设备的不同，在ios中，引入的父组件第一次加载，键盘不会弹起，退出再次进入会自动弹起。

TextInput 文本框 - 图1