uniapp中uview组件库的Input 输入框的使用方法-阿里云开发者社区

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

2024-01-03 1063

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

去除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来设置：

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

#可清空字符

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

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

#下划线

通过设置属性border为bottom即可变成一个下划线

<template>
  <u--input
    placeholder="请输入内容"
    border="bottom"
    clearable
  ></u--input>
</template>

#前后图标

全后置图标可自由设置样式信息。

<template>
  <u--input
      placeholder="前置图标"
      prefixIcon="search"
      prefixIconStyle="font-size: 22px;color: #909399"
  ></u--input>
  <u--input
      placeholder="后置图标"
      suffixIcon="map-fill"
      suffixIconStyle="color: #909399"
  ></u--input>
</template>
<script>
</script>

#前后插槽

通过设置slot为prefix或suffix来指定前后插槽

<template>
  <view class="u-demo-block">
    <text class="u-demo-block__title">前后插槽</text>
    <view class="u-demo-block__content">
      <!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
      <!-- #ifndef APP-NVUE -->
      <u-input placeholder="前置插槽">
      <!-- #endif -->
      <!-- #ifdef APP-NVUE -->
      <u--input placeholder="前置插槽">
      <!-- #endif -->
        <u--text
          text="http://"
          slot="prefix"
          margin="0 3px 0 0"
          type="tips"
        ></u--text>
      <!-- #ifndef APP-NVUE -->
      </u-input>
      <!-- #endif -->
      <!-- #ifdef APP-NVUE -->
      </u--input>
      <!-- #endif -->
    </view>
    <view
      class="u-demo-block__content"
      style="margin-top: 15px;"
    >
      <!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
      <!-- #ifndef APP-NVUE -->
      <u-input placeholder="后置插槽">
      <!-- #endif -->
      <!-- #ifdef APP-NVUE -->
      <u--input placeholder="后置插槽">
      <!-- #endif -->
        <template slot="suffix">
          <u-code
            ref="uCode"
            @change="codeChange"
            seconds="20"
            changeText="X秒重新获取哈哈哈"
          ></u-code>
          <u-button
            @tap="getCode"
            :text="tips"
            type="success"
            size="mini"
          ></u-button>
        </template>
      <!-- #ifndef APP-NVUE -->
      </u-input>
      <!-- #endif -->
      <!-- #ifdef APP-NVUE -->
      </u--input>
      <!-- #endif -->
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        tips: '',
        value: ''
      }
    },
    watch: {
      value(newValue, oldValue) {
        // console.log('v-model', newValue);
      }
    },
    methods: {
      codeChange(text) {
        this.tips = text;
      },
      getCode() {
        if (this.$refs.uCode.canGetCode) {
          // 模拟向后端请求验证码
          uni.showLoading({
            title: '正在获取验证码'
          })
          setTimeout(() => {
            uni.hideLoading();
            // 这里此提示会被this.start()方法中的提示覆盖
            uni.$u.toast('验证码已发送');
            // 通知验证码组件内部开始倒计时
            this.$refs.uCode.start();
          }, 2000);
        } else {
          uni.$u.toast('倒计时结束后再发送');
        }
      },
      change(e) {
        console.log('change', e);
      }
    }
  }
</script>

API

#Props

参数	说明	类型	默认值	可选值
value	输入的值	Number \| String	-	-
type	输入框类型，见上方说明	String	text	number \| idcard \| digit \| password
disabled	是否禁用输入框	Boolean	false	true
disabledColor	禁用状态时的背景色	String	#f5f7fa	-
clearable	是否显示清除控件	Boolean	false	true
password	是否密码类型	Boolean	false	true
maxlength	最大输入长度，设置为 -1 的时候不限制最大长度	String \| Number	-1	-
placeholder	输入框为空时的占位符	String	-	-
placeholderClass	指定placeholder的样式类，注意页面或组件的style中写了scoped时，需要在类名前写/deep/	String	input-placeholder	-
placeholderStyle	指定placeholder的样式，字符串/对象形式，如"color: red;"	String \| Object	color: #c0c4cc	-
showWordLimit	是否显示输入字数统计，只在 type ="text"或type ="textarea"时有效	Boolean	false	true
confirmType	设置右下角按钮的文字，兼容性详见uni-app文档	String	done	send \| search \| next \| go \| done
confirmHold	点击键盘右下角按钮时是否保持键盘不收起，H5无效	Boolean	false	true
holdKeyboard	focus时，点击页面的时候不收起键盘，微信小程序有效	Boolean	false	true
focus	自动获取焦点，在 H5 平台能否聚焦以及软键盘是否跟随弹出，取决于当前浏览器本身的实现。nvue 页面不支持，需使用组件的 focus()、blur() 方法控制焦点	Boolean	false	true
autoBlur	键盘收起时，是否自动失去焦点，目前仅App3.0.0+有效	Boolean	false	true
ignoreCompositionEvent 2.0.34	是否忽略组件内对文本合成系统事件的处理。为 false 时将触发 compositionstart、compositionend、compositionupdate 事件，且在文本合成期间会触发 input 事件	Boolean	true	false
disableDefaultPadding	是否去掉 iOS 下的默认内边距，仅微信小程序，且type=textarea时有效	Boolean	false	true
cursor	指定focus时光标的位置	String \| Number	-1	-
cursorSpacing	输入框聚焦时底部与键盘的距离	String \| Number	30	-
selectionStart	光标起始位置，自动聚集时有效，需与selection-end搭配使用	String \| Number	-1	-
selectionEnd	光标结束位置，自动聚集时有效，需与selection-start搭配使用	String \| Number	-1	-
adjustPosition	键盘弹起时，是否自动上推页面	Boolean	true	false
inputAlign	输入框内容对齐方式	String	left	left \| center \| right
fontSize	输入框字体的大小	String \| Number	15px	-
color	输入框字体颜色	String	#303133	-
prefixIcon	输入框前置图标	String	-	-
prefixIconStyle	前置图标样式，对象或字符串	String \| Object	-	-
suffixIcon	输入框后置图标	String	-	-
suffixIconStyle	后置图标样式，对象或字符串	String \| Object	-	-
border	边框类型，surround-四周边框，bottom-底部边框，none-无边框	String	surround	bottom \| none
readonly	是否只读，与disabled不同之处在于disabled会置灰组件，而readonly则不会	Boolean	false	true
shape	输入框形状，circle-圆形，square-方形	String	square	circle
formatter	输入过滤或格式化函数(如需兼容微信小程序，则只能通过`setFormatter`方法)	Function	null	-
customStyle	定义需要用到的外部样式	Object	-	-

#Events

事件名	说明	回调参数	版本
blur	输入框失去焦点时触发	value：内容值	-
focus	输入框聚焦时触发	-	-
confirm	点击完成按钮时触发	value：内容值	-
keyboardheightchange	键盘高度发生变化的时候触发此事件	-	微信小程序2.7.0+、App 3.1.0+
input	内容发生变化触发此事件	value：内容值	-
change	内容发生变化触发此事件	value：内容值	-
clear	点击清空内容	-	-

#Methods

方法名	说明
setFormatter	为兼容微信小程序而暴露的内部方法，见上方说明

#Slots

名称	说明
prefix	输入框前置内容，`nuve`环境需`u--input`有效，非`nvue`环境需`u-input`才有效
suffix	输入框后置内容，`nuve`环境需`u--input`有效，非`nvue`环境需`u-input`才有效

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

#平台差异说明

#基本使用

#输入框的类型

#可清空字符

#下划线

#前后图标

#前后插槽

API

#Props

#Events

#Methods

#Slots

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

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

#平台差异说明

#基本使用

#输入框的类型

#可清空字符

#下划线

#前后图标

#前后插槽

API

#Props

#Events

#Methods

#Slots

热门文章

最新文章

相关课程

相关电子书

相关实验场景

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