uni-app表单组件二

朱雀 2023-07-19 12:02 13阅读 0赞

## input（输入框） ##

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

**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"/>
    					<input class="uni-input" type="idcard"/>
    					<input class="uni-input" type="digit"/>
    			</view>
    			
    			<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>

*测试结果*  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjM1MzQ0Mg_size_16_color_FFFFFF_t_70]

## lable ##

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

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

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>类型</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>for</td> 
   <td>String</td> 
   <td>绑定控件的 id</td> 
  </tr> 
 </tbody> 
</table>

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>` 组成。

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>类型</th> 
   <th>类型</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>@change</td> 
   <td>EventHandle</td> 
   <td></td> 
   <td><code>&lt;radio-group&gt;</code> 中的选中项发生变化时触发 change 事件，<code>event.detail = {value: 选中项radio的value}</code></td> 
  </tr> 
 </tbody> 
</table>

**radio（单选项目）**

<table> 
 <thead> 
  <tr> 
   <th>属性名</th> 
   <th>类型</th> 
   <th>默认值</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>value</td> 
   <td>string</td> 
   <td></td> 
   <td><code>&lt;radio&gt;</code> 标识，选中时触发 &lt;<code>radio-group&gt; 的 change 事件</code>，并携带 <code>&lt;radio&gt; 的 value</code>。</td> 
  </tr> 
  <tr> 
   <td>disabled</td> 
   <td>Boolean</td> 
   <td>false</td> 
   <td>是否禁用</td> 
  </tr> 
  <tr> 
   <td>checked</td> 
   <td>Boolean</td> 
   <td>false</td> 
   <td>当前是否选中，可用来设置默认选中</td> 
  </tr> 
  <tr> 
   <td>color</td> 
   <td>Color</td> 
   <td></td> 
   <td>radio的颜色，同css的color</td> 
  </tr> 
 </tbody> 
</table>

***该组件与checkbox用法一致（可以查看uni-app表单组件一）***

## slider ##

滑动选择器。  
显示效果为：  
![在这里插入图片描述][20200330194049278.png]

## switch ##

开关选择器。  
显示效果为：  
![在这里插入图片描述][20200330194138993.png]

## textarea ##

多行输入框。  
显示效果为：  
![在这里插入图片描述][20200330194238366.png]  
该文档的所有组件的属性可去查看[官网文档=>组件=>表单组件][Link 1]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjM1MzQ0Mg_size_16_color_FFFFFF_t_70]: /images/20230528/a9acd6629bd7476e9993678115c388c2.png
[20200330194049278.png]: /images/20230528/28f7b7d84dcb4f8bb5b9fbf1832096e3.png
[20200330194138993.png]: /images/20230528/34aa0f4fff3b420ab8395b1df5f7960f.png
[20200330194238366.png]: /images/20230528/d5e1433325d748bd8387daf5043a12b0.png
[Link 1]: https://uniapp.dcloud.io/component/README