表单组件

爱被打了一巴掌 2021-09-13 15:56 770阅读 0赞

## button按钮 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70 1]  
**size有效值**

*  default  默认大小
 *  mini  小尺寸

**type有效值**

*  primary  微信小程序为绿色，App、H5、百度小程序、支付宝小程序为蓝色，字节跳动小程序为红色，QQ小程序为浅蓝色
 *  default  白色
 *  warn  红色

**form-type 有效值**

*  submit  提交表单
 *  reset  重置表单

## 效果示例 ##

<button type="primary">页面主操作 Normal</button>
    <button type="primary" loading="true">页面主操作 Loading</button>  //名称前带 loading 图标
    <button type="primary" disabled="true">页面主操作 Disabled</button>  //禁用
    <button type="default">页面次要操作 Normal</button>  //白色
    <button type="default" disabled="true">页面次要操作 Disabled</button>  //白色禁用
    <button type="warn">警告类操作 Normal</button>  //红色警告
    <button type="warn" disabled="true">警告类操作 Disabled</button>  //红色禁用

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70 2]

<button type="primary" plain="true">按钮</button>  //镂空，背景色透明
    <button type="primary" disabled="true" plain="true">不可点击的按钮</button//禁用，透明
    <button type="default" plain="true">按钮</button>  //白色，透明
    <button type="default" disabled="true" plain="true">按钮</button>  //白色，禁用，透明
    <button type="primary" size="mini">按钮</button>  //小尺寸
    <button type="default" size="mini">按钮</button>  //白色，小尺寸
    <button type="warn" size="mini">按钮</button>  //红色，小尺寸

![在这里插入图片描述][20200330103311468.png]

## checkbox（多选项目） ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70 3]

## input（输入框） ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70 5]  
**注意：**

*  input 事件处理函数可以直接 return 一个字符串，将替换输入框的内容。仅微信小程序支持。
 *  input 事件处理函数内实时修改当前值不生效，可以延迟设置，例如：setTimeout(() => \{ this.value = 100 \}, 0)。
 *  input 组件上有默认的 min-height 样式，如果 min-height 的值大于 height 的值那么 height样式无效。

**type 有效值**

*  text 文本输入键盘
 *  number 数字输入键盘 （注意iOS的vue页面弹出的数字键盘并非9宫格方式）
 *  idcard 身份证输入键盘 （微信、支付宝、百度、QQ小程序）
 *  digit 带小数点的数字键盘 （App的nvue页面、微信、支付宝、百度、头条、QQ小程序）

**注意:**

> 1.小程序平台，number 类型只支持输入整型数字。微信开发者工具上体现不出效果，请使用真机预览。  
> 2. 如果需要在小程序平台输入浮点型数字，请使用 digit 类型。  
> 3. input组件若不想弹出软键盘，可设置为disable

**confirm-type 有效值**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70 6]  
**注意：**

> 1.App平台的nvue页面，如果是uni-app编译模式，直接使用此属性设置即可生效。如果是weex编译模式，需通过weex的api设置，weex相关文档参考  
> 2.App平台的vue页面不支持控制键盘右下角为“发送”，涉及聊天的建议使用nvue。 App平台iOS端软键盘上方横条去除方案

## picker（从底部弹起的滚动选择器） ##

**支持五中选择器：**

*  普通选择器
 *  多列选择器
 *  时间选择器
 *  日期选择器
 *  省市区选择器

通过mode来区分，默认是普通选择器： mode = selector

## 时间选择器 ##

mode = time  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70 7]

## 日期选择器 ##

mode = date  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70 8]

## 省市区选择器 ##

mode = region  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70 9]

## 效果实现步骤 ##

**template部分：**

<view class="uni-title uni-common-pl" style="background:gray ;">地区选择器</view>
    <view class="uni-list">
    	<view class="uni-list-cell" style="display: flex;">
    		<view class="uni-list-cell-left" style="margin-right:60rpx">
    						当前选择
    		</view>
    		<view class="uni-list-cell-db">
    			<picker @change="bindPickerChange" :value="index" :range="array">
    				<view class="uni-input">{ { array[index]}}</view>
    			</picker>
    		</view>
    	</view>
    </view>
    		 
    <view class="uni-title uni-common-pl" style="background:gray ;">时间选择器</view>
      <view class="uni-list">
    		<view class="uni-list-cell" style="display: flex;">
    		  <view class="uni-list-cell-left" style="margin-right:60rpx">
    				当前选择
    			</view>
    			<view class="uni-list-cell-db">
    				<picker mode="time" :value="time" start="09:01" end="21:01" @change="bindTimeChange">
    					<view class="uni-input">{ { time}}</view>
    				</picker>
    		</view>
    	</view>
    </view>
    		 
    <view class="uni-title uni-common-pl" style="background:gray ;">日期选择器</view>
      <view class="uni-list">
        <view class="uni-list-cell" style="display: flex;">
          <view class="uni-list-cell-left" style="margin-right:60rpx">
            当前选择
          </view>
          <view class="uni-list-cell-db">
            <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
            <view class="uni-input">{ { date}}</view>
          </picker>
        </view>
      </view>
    </view>

**在data里添加：**

const currentDate = this.getDate({ 
       format: true
    })

**return里添加：**

title: 'picker',
    array: ['中国', '美国', '巴西', '日本'],
    index: 0,
    date: currentDate,
    time: '12:01'

**data外添加：**

computed: { 
         startDate() { 
             return this.getDate('start');
         },
         endDate() { 
             return this.getDate('end');
         }
     },

**methods内添加：**

bindPickerChange: function(e) { 
        console.log('picker发送选择改变，携带值为', e.target.value)
         this.index = e.target.value
     },
     bindDateChange: function(e) { 
         this.date = e.target.value
     },
     bindTimeChange: function(e) { 
         this.time = e.target.value
     },
     getDate(type) { 
         const date = new Date();
         let year = date.getFullYear();  //获取年份
         let month = date.getMonth() + 1;  //获取月份
         let day = date.getDate();   //获取天数
    
         if (type === 'start') { 
             year = year - 60;
         } else if (type === 'end') { 
             year = year + 2;
         }
         month = month > 9 ? month : '0' + month;;
         day = day > 9 ? day : '0' + day;
         return `${ year}-${ month}-${ day}`;
     }

**效果图如下：**  
![在这里插入图片描述][20200330121506574.png]  
![在这里插入图片描述][20200330121531661.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70]: /images/20210913/852bdb77b33a4596ae92b11d097f5534.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70 1]: /images/20210913/ca39498d717a4c80a4b15909c98f6c73.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70 2]: /images/20210913/466ab3140879427e9555c18e88dfd2de.png
[20200330103311468.png]: /images/20210913/fb451ececce442c2a7a010c627656aa7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70 3]: /images/20210913/821902ae504a4204a14a1f0d902c99bf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70 4]: /images/20210913/0091470d8b9745519983b8802420ce51.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70 5]: /images/20210913/2aae0f460af24d0cb50ea50895e296ef.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70 6]: /images/20210913/4797235cf551450dbd8857682d827cb1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70 7]: /images/20210913/d174eede339443c4a14127db0f1f93ae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70 8]: /images/20210913/fe0b80d7f7b94b62bbcf26e1c5769da5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdob25neWFuMDAx_size_16_color_FFFFFF_t_70 9]: /images/20210913/ef419195528d42c385474090ac9bd915.png
[20200330121506574.png]: /images/20210913/78722cb4810f4455a704dcc966af1bdb.png
[20200330121531661.png]: /images/20210913/deda23a9e7944cca9b6d25acd0e50378.png