uniapp中uview组件库的Input 输入框 的使用方法

目录

#平台差异说明

#基本使用

#输入框的类型

#可清空字符

#下划线

#前后图标

#前后插槽

API

#Props

#Events

#Methods

#Slots

---

去除fixed、showWordLimit、showConfirmBar、disableDefaultPadding、autosize字段

此组件为一个输入框，默认没有边框和样式，是专门为配合表单组件u-form而设计的，利用它可以快速实现表单验证，输入内容，下拉选择等功能。

应该在u-form中嵌套u-form-item，再嵌套u-input去实现。

注意：

由于在nvue下，u-input名称被uni-app官方占用，在nvue页面中请使用u--input名称，在vue页面中使用u--input或者u-input均可。

#平台差异说明

App（vue）	App（nvue）	H5	小程序
√	√	√	√

#基本使用

• 通过type设置输入框的类型，默认text
• 通过placeholder设置输入框为空时的占位符
• 通过border配置是否显示输入框的边框
• 绑定@change事件

<template>
  <u--input
    placeholder="请输入内容"
    border="surround"
    v-model="value"
    @change="change"
  ></u--input>
</template>

<script>
	export default {
      data() {
        return {
          value: ''
        }
      },
      methods: {
        change(e) {
          console.log('change', e);
        }
      }
	}
</script>

#输入框的类型

综述：输入框的类型可通过配置type来设置：

1. text-文本输入键盘。
2. number-数字输入键盘，app-vue下可以输入浮点数，app-nvue和小程序平台下只能输入整数。
3. idcard-身份证输入键盘，微信、支付宝、百度、QQ小程序。
4. digit-带小数点的数字键盘，App的nvue页面、微信、支付宝、百度、头条、QQ小程序。
5. password-等同于设置password为true的效果

#可清空字符

将clearable设置为true，会在输入框后方增加一个清空按钮。

<template>
  <u--input
    placeholder="请输入内容"
    border="surround&#