uni-app表单组件二

input(输入框)

属性名 类型 说明 平台差异
value String 输入框的初始内容
type String input 的类型
password Boolean(默认false) 是否是密码类型
placeholder String 输入框为空时占位符
placeholder-style String 指定 placeholder 的样式
placeholder-class String “input-placeholder” 指定 placeholder 的样式类
disabled Boolean(默认false) 是否禁用
maxlength Number (默认140) 最大输入长度,设置为 -1 的时候不限制最大长度
cursor-spacing Number (默认0) 指定光标与键盘的距离,单位 px 。取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 App、微信小程序、百度小程序、QQ小程序
focus Boolean (默认false) 获取焦点 在 H5 平台能否聚焦以及软键盘是否跟随弹出,取决于当前浏览器本身的实现。
confirm-type String (默认done) 设置键盘右下角按钮的文字,仅在 type=“text” 时生效
confirm-hold Boolean (默认false) 点击键盘右下角按钮时是否保持键盘不收起 App、微信小程序、支付宝小程序、百度小程序、QQ小程序
cursor Number 指定focus时的光标位置
selection-start Number (默认-1) 光标起始位置,自动聚集时有效,需与selection-end搭配使用
selection-end Number (默认-1) 光标结束位置,自动聚集时有效,需与selection-start搭配使用
adjust-position Boolean (默认true) 键盘弹起时,是否自动上推页面 App(softinputMode 为 adjustResize 时无效)、微信小程序、百度小程序、QQ小程序
hold-keyboard Boolean (默认false) focus(获得焦点)时,点击页面的时候不收起键盘 微信小程序2.8.2
@input EventHandle 当键盘输入时,触发input事件,event.detail = {value}
@focus EventHandle 输入框聚焦时触发,event.detail = { value, height },height 为键盘高度 仅微信小程序、App(2.2.3+) 、QQ小程序支持 height
@blur EventHandle 输入框失去焦点时触发,event.detail = {value: value}
@confirm EventHandle 点击完成按钮时触发,event.detail = {value: value}
@keyboardheightchange EventHandle 键盘高度发生变化的时候触发此事件,event.detail = {height: height, duration: duration} 微信小程序2.7.0

type 有效值

  • text 文本输入键盘
  • number 数字输入键盘 注意iOS的vue页面弹出的数字键盘并非9宫格方式
  • idcard 身份证输入键盘 支持微信、支付宝、百度、QQ小程序
  • digit 带小数点的数字键盘 支持App的nvue页面、微信、支付宝、百度、头条、QQ小程序
    测试代码
<template>
    <view>
			<view>
			    <view class="title">初始内容为“value”的input</view>
			    <input class="uni-input" value="value"/>
			</view>
			<view>
			    <input class="uni-input" type="text" value="value"/><!-- 文本输入 -->
					<input class="uni-input" type="number"/><!-- 数字输入 number 类型只支持输入整型数字。微信开发者工具上体现不出效果-->
					<input class="uni-input" type="idcard"/><!-- 身份证输入 -->
					<input class="uni-input" type="digit"/><!-- 带小数点的数字输入 (浮点型数字)-->
			</view>
			<!-- input组件若不想弹出软键盘,可设置为disable -->
			<view>
					<view class="title">输入时默认显示placeholder</view>
					<input class="uni-input" placeholder="placeholder" />
					<view class="title">指定placeholder样式为红色</view>
					<input class="uni-input" placeholder="placeholder" placeholder-style="color:red"/>
					<view class="title">指定placeholder样式为绿色</view>
					<input class="uni-input" placeholder="placeholder" placeholder-class="green"/>
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">控制最大输入长度的input</view>
					<input class="uni-input" maxlength="10" placeholder="最大输入长度为10" />
			</view>
			<view>
					<view class="title">可自动聚焦的input</view>
					<input class="uni-input" focus placeholder="自动获得焦点" />
			</view>
			<view class="uni-form-item uni-column">
					<view class="title">键盘右下角按钮显示为搜索</view>
					<input class="uni-input" confirm-type="search" placeholder="键盘右下角按钮显示为搜索" />
			</view>
			<view class="uni-form-item uni-column">
					<view class="title">实时获取输入值:{{inputValue}}</view>
					<input class="uni-input" @input="onKeyInput" placeholder="输入同步到view中" />
			</view>
			<view class="uni-form-item uni-column">
					<view class="title">控制输入的input</view>
					<input class="uni-input" @input="replaceInput" v-model="changeValue" placeholder="连续的两个1会变成2" />
			</view>
			<view class="uni-form-item uni-column">
					<view class="title">控制键盘的input</view>
					<input class="uni-input" ref="input1" @input="hideKeyboard" placeholder="输入123自动收起键盘" />
			</view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                title: 'input',
                focus: false,
                inputValue: '',
                changeValue: ''
            }
        },
        methods: {
            onKeyInput: function(event) {
                this.inputValue = event.target.value
            },
            replaceInput: function(event) {
                var value = event.target.value;
                if (value === '11') {
                    this.changeValue = '2';
                }
            },
            hideKeyboard: function(event) {
                if (event.target.value === '123') {
                    uni.hideKeyboard();
                }
            }
        }
    }
</script>

<style>
	.uni-input{
		border: 1rpx solid #999999;
		border-radius: 20rpx;
		padding:0 10rpx;
	}
	.green{
		color:#4CD964;
	}
</style>

测试结果
在这里插入图片描述

lable

用来改进表单组件的可用性,使用for属性找到对应的id,或者将控件放在该标签下,当点击时,就会触发对应的控件。

目前可以绑定的控件有:<button>, <checkbox>, <radio>, <switch>
属性说明

属性名 类型 说明
for String 绑定控件的 id

app-nvue平台 暂不支持for属性

picker

从底部弹起的滚动选择器。
支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器(mode = selector)
picker在各平台的实现是有UI差异的,有的平台如百度、支付宝小程序的Android端是从中间弹出的;有的平台支持循环滚动如微信、百度小程序;有的平台没有取消按钮如App端。但均不影响功能使用。

  • 普通选择器(mode = selector)
  • 多列选择器 mode = multiSelector
  • 时间选择器 mode = time
  • 日期选择器 mode = date
  • 省市区选择器 mode = region
  • (选择器的属性请从官网查看)

picker-view

嵌入页面的滚动选择器(其中只可放置 <picker-view-column/> 组件,其他节点不会显示)
picker-view-column
<picker-view /> 的子组件,仅可放置于 <picker-view /> 中,其子节点的高度会自动设置成与 picker-view 的选中框的高度一致

radio-group

单项选择器,内部由多个 <radio> 组成。

属性名 类型 类型 说明
@change EventHandle <radio-group> 中的选中项发生变化时触发 change 事件,event.detail = {value: 选中项radio的value}

radio(单选项目)

属性名 类型 默认值 说明
value string <radio> 标识,选中时触发 <radio-group> 的 change 事件,并携带 <radio> 的 value
disabled Boolean false 是否禁用
checked Boolean false 当前是否选中,可用来设置默认选中
color Color radio的颜色,同css的color

该组件与checkbox用法一致(可以查看uni-app表单组件一)

slider

滑动选择器。
显示效果为:
在这里插入图片描述

switch

开关选择器。
显示效果为:
在这里插入图片描述

textarea

多行输入框。
显示效果为:
在这里插入图片描述
该文档的所有组件的属性可去查看官网文档=>组件=>表单组件

总结:其实呢大部分的表单组件的属性大多相同所以以此类推组件的属性也都大致可以掌握 如果说有一些组件的属性你不确定有没有 那便可以区查看官网文档进行详细了解

版权声明:本文为weixin_46353442原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_46353442/article/details/105206473

智能推荐

用栈判断一个字符串是否平衡

注: (1)本文定义:左符号:‘(’、‘[’、‘{’…… 右符号:‘)’、‘]’、‘}’……. (2)所谓的字符串的符号平衡,是指字符串中的左符号与右符号对应且相等,如字符串中的如‘(&r...

JAVA环境变量配置

位置 计算机->属性->高级系统设置->环境变量 方式一 用户变量新建path 系统变量新建classpath 方式二 系统变量 新建JAVA_HOME,值为JDK路径 编辑path,前加 方式三 用户变量新建JAVA_HOME 此路径含lib、bin、jre等文件夹。后运行tomcat,eclipse等需此变量,故最好设。 用户变量编辑Path,前加 系统可在任何路径识别jav...

常用的伪类选择器

CSS选择器众多 CSS选择器及权重计算 最常用的莫过于类选择器,其它的相对用的就不会那么多了,当然属性选择器和为类选择器用的也会比较多,这里我们就常用的伪类选择器来讲一讲。 什么是伪类选择器? CSS伪类是用来添加一些选择器的特殊效果。 常用的为类选择器 状态伪类 我们中最常见的为类选择器就是a标签(链接)上的为类选择器。 当我们使用它们的时候,需要遵循一定的顺序问题,否则将可能出现bug 注意...

ButterKnife的使用介绍及原理探究(六)

前面分析了ButterKnife的源码,了解其实现原理,那么就将原理运用于实践吧。 github地址:       点击打开链接 一、自定义注解 这里为了便于理解,只提供BindView注解。 二、添加注解处理器 添加ViewInjectProcessor注解处理器,看代码, 这里分别实现了init、getSupportedAnnotationTypes、g...

1.写一个程序,提示输入两个字符串,然后进行比较,输出较小的字符串。考试复习题库1|要求:只能使用单字符比较操作。

1.写一个程序,提示输入两个字符串,然后进行比较,输出较小的字符串。 要求只能使用单字符比较操作。 参考代码: 实验结果截图:...

猜你喜欢

小demo:slideDown()实现二级菜单栏下拉效果

效果如下,鼠标经过显示隐藏的二级菜单栏 但是这样的时候会存在一个问题,就是鼠标快速不停移入移出会导致二级菜单栏闪屏现象,一般需要使用stop()来清除事件  ...

基于docker环境的mysql主从复制

1、安装docker 可以参考之前的博客,之前写过了~ 2、拉取mysql镜像 3、创建mysql01和mysql02实例 主: 从: 4、进入容器修改配置 1)修改主数据库配置 进入主数据库容器 切换到 etc/mysql/目录下 查看可以看到my.cnf文件,使用vim编辑器打开,但是需要提前安装 安装vim命令: 安装成功后,修改my.cnf文件 新增配置后的my.cnf: binlog 日...

机器学习算法之决策树

原文:http://www.jianshu.com/p/6eecdeee5012 决策树是一种简单高效并且具有强解释性的模型,广泛应用于数据分析领域。其本质是一颗由多个判断节点组成的树,如: 决策树 在使用模型进行预测时,根据输入参数依次在各个判断节点进行判断游走,最后到叶子节点即为预测结果。 如何构造决策树 决策树算法的核心是通过对数据的学习,选定判断节点,构造一颗合适的决策树。 假设我们从用户...

Netty实现一个简单的RPC框架

微服务 微服务通讯 API构建需要考虑的因素 通讯协议 文本协议或者二进制协议 支持的调用方式:单向、双向、Streaming API定义与声明 API容错、可伸缩性 RPC框架 REST http://www.ics.uci.edu/~fielding/pubs/dissertation/rest_arch_style.htm REST即Representational State Transf...

04-键值对操作(pair RDD)

前言 键值对(pair RDD)是Spark的一部分,与普通RDD具有相同的特性,却又拥有不同于普通RDD的一些特性和操作。 简单来pair RDD就是以key-value形式的RDD。 1 创建pair RDD 根据文本内容,以第一个单词作为键为例: map()函数需要设置key-value参数,如该例中:key=x.split(" ")[0], value=x。 2 pai...