返回介绍

开发指南

组件

JS

模板

Input 输入框

发布于 2021-04-03 05:35:24 字数 6917 浏览 1310 评论 0 收藏 0

Input 输入框 1.3.0 平台差异说明
AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程序

基本使用

  • 通过v-model绑定输入框的值
  • 通过type设置输入框的类型
  • 通过border配置是否显示输入框的边框
<template>
	<u-input v-model="value" :type="type" :border="border" />
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				type: 'text',
				border: true
			}
		}
	}
</script>

输入框的类型

综述:此组件通过配置type参数有两种形态:

  1. 一是长文本内容输入的textarea类型。
  2. 二是类似普通输入框的text类型,在普通输入框时,由于HTML5或者小程序等一些特殊场景,此 type参数又可以设置为textnumberidcarddigit等值, 这些参数跟各个平台的兼容性有关,详见uni-app文档:Input 组件

Textarea模式

此模式需要将type参数设置为textarea,有如下两个需要注意的参数:

  • auto-height参数可以配置为textarea输入框的高度是否随着行数增加,而自动增加输入框的高度。
  • height参数可以配置输入框的初始高度。
<template>
	<u-input v-model="value" :type="type" :border="border" :height="height" :auto-height="autoHeight" />
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				type: 'textarea',
				border: true,
				height: 100,
				autoHeight: true,
			}
		}
	}
</script>

Text模式

type设置为text,此种情况为一个单纯的输入框,但是还可以将其设置为numberidcarddigit等值,需要考虑兼容性,见上方说明。

<template>
	<u-input v-model="value" :type="type" :border="border"  />
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				type: 'text',
				border: true,
			}
		},
	}
</script>

Password模式

type参数可以设置为password,此时输入内容将会用点替代:

  • 如果设置password-icon设置为true,右侧将会出现一个可以切换密码与普通字符的图标。
<template>
	<u-input v-model="value" :type="type" :border="border" :password-icon="passwordIcon" />
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				type: 'password',
				passwordIcon: true,
				border: true,
			}
		}
	}
</script>

Select下拉选择模式

如果将type设置为select,此时组件将会在外观上呈现出Select选择器的形态,主要体现在右侧多了一个下三角图标,但是此时组件并没有内置下拉的功能, 主要是考虑到移动端的特殊性和uView内置组件的关联性,因为想实现下拉选择,不同场景可能会使用不同的组件,比如uView的Picker 选择器ActionSheet 操作菜单Select 列选择器等,您可以根据情况自由选择合适的组件做搭配。

  • 以上说的可以配合的组件,它们都有一个共同的通过v-model绑定弹出与收起的参数,可以同时将此参数赋值给Input组件的select-open参数, 当此参数为true(也即Select选择器打开时),右侧的下三角图标会翻转,为false时,恢复原位。
  • 监听组件的@click事件,在此将绑定选择器的参数修改为true即可。
<template>
	<view class="">
		<u-input v-model="value" :type="type" :border="border" @click="show = true" />
		<u-action-sheet :list="actionSheetList" v-model="show" @click="actionSheetCallback"></u-action-sheet>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				type: 'select',
				show: false,
				border: true,
				actionSheetList: [
					{
						text: '男'
					},
					{
						text: '女'
					},
					{
						text: '保密'
					}
				],
			}
		},
		methods: {
			// 点击actionSheet回调
			actionSheetCallback(index) {
				this.value = this.actionSheetList[index].text;
			}
		}
	}
</script>

API

Props

参数说明类型默认值可选值
type模式选择,见上方说明Stringtextselect / password / textarea / number
clearable是否显示右侧的清除图标,type = select时无效Booleantruefalse
v-model用于双向绑定输入框的值---
input-align输入框文字的对齐方式Stringleftcenter / right
placeholderplaceholder显示值String请输入内容-
disabled是否禁用输入框Booleanfalsetrue
maxlength输入框的最大可输入长度Number | String140-
placeholder-styleplaceholder的样式,字符串形式,如"color: red;"String"color: #c0c4cc;"-
confirm-type设置键盘右下角按钮的文字,仅在typetext时生效Stringdone-
custom-style自定义输入框的样式,对象形式Object--
focus是否自动获得焦点Booleanfalsetrue
fixed如果typetextarea,且在一个"position:fixed"的区域,需要指明为trueBooleanfalsetrue
password-icontypepassword时,是否显示右侧的密码查看图标Booleantruefalse
border是否显示边框Booleanfalsetrue
border-color输入框的边框颜色String#dcdfe6-
auto-height是否自动增高输入区域,typetextarea时有效Booleantruefalse
height高度,单位rpxNumber | Stringtext类型时为70,textarea时为100-
cursor-spacing 1.4.4指定光标与键盘的距离,单位pxNumber | String0-
selection-start 1.5.6光标起始位置,自动聚焦时有效,需与selection-end搭配使用Number | String-1-
selection-end 1.5.6光标结束位置,自动聚焦时有效,需与selection-start搭配使用Number | String-1-
trim 1.5.8是否自动去除两端的空格Booleantruefalse

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文