TextInput 文本框

单行文本框。

基本用法

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

高级用法

密码框

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

禁用

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

使用input原生属性

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

使用input原生事件

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

自定义关闭按钮样式

  1. <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. <div class="autoFucus">
  2. <nut-textinput class="my-input" type="search" v-model="val8" placeholder="请输入搜索内容" ref="myInput" @keyup.enter="submit" />
  3. <div class="searchBtn" @click="submit">搜索</div>
  4. </div>
  1. 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