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

2024-01-03 06:43:56

目录

#平台差异说明

#基本使用

#输入框的类型

#可清空字符

#下划线

#前后图标

#前后插槽

API

#Props

#Events

#Methods

#Slots


去除fixedshowWordLimitshowConfirmBardisableDefaultPaddingautosize字段

此组件为一个输入框,默认没有边框和样式,是专门为配合表单组件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-等同于设置passwordtrue的效果
#可清空字符

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

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

#下划线

通过设置属性borderbottom即可变成一个下划线

<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>

#前后插槽

通过设置slotprefixsuffix来指定前后插槽

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

文章来源:https://blog.csdn.net/m0_72603435/article/details/135348921
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。