form表單 · Color Ui 聯合開發文檔

## **基本表單** #### 示例 :-: ![](https://img.kancloud.cn/c2/06/c2066dc71c5ec09305e91f003f19d026_315x257.png) #### **xxx.wxml** ``` <form> <view class="cu-form-group margin-top"> <view class="title">郵件</view> <input placeholder="兩字短標題"></input> </view> <view class="cu-form-group"> <view class="title">輸入框</view> <input placeholder="三字標題"></input> </view> <view class="cu-form-group"> <view class="title">收貨地址</view> <input placeholder="統一標題的寬度"></input> </view> <view class="cu-form-group"> <view class="title">收貨地址</view> <input placeholder="輸入框帶個圖標"></input> <text class="cuIcon-locationfill text-orange"></text> </view> <view class="cu-form-group"> <view class="title">驗證碼</view> <input placeholder="輸入框帶個按鈕"></input> <button class="cu-btn bg-green shadow">驗證碼</button> </view> <view class="cu-form-group"> <view class="title">手機號碼</view> <input placeholder="輸入框帶標簽"></input> <view class="cu-capsule radius"> <view class="cu-tag bg-blue"> +86 </view> <view class="cu-tag line-blue"> 中國大陸 </view> </view> </view> </form> ``` #### **xxx.wxss** ``` .cu-form-group .title { min-width: calc(4em + 30rpx); } ``` #### **xxx.JS** ``` const app = getApp(); Page({ data: { StatusBar: app.globalData.StatusBar, CustomBar: app.globalData.CustomBar, index: null, picker: ['喵喵喵', '汪汪汪', '哼唧哼唧'], multiArray: [ ['無脊柱動物', '脊柱動物'], ['扁性動物', '線形動物', '環節動物', '軟體動物', '節肢動物'], ['豬肉絳蟲', '吸血蟲'] ], objectMultiArray: [ [{ id: 0, name: '無脊柱動物' }, { id: 1, name: '脊柱動物' } ], [{ id: 0, name: '扁性動物' }, { id: 1, name: '線形動物' }, { id: 2, name: '環節動物' }, { id: 3, name: '軟體動物' }, { id: 3, name: '節肢動物' } ], [{ id: 0, name: '豬肉絳蟲' }, { id: 1, name: '吸血蟲' } ] ], multiIndex: [0, 0, 0], time: '12:01', date: '2018-12-25', region: ['廣東省', '廣州市', '海珠區'], imgList: [], modalName: null, textareaAValue: '', textareaBValue: '' }, PickerChange(e) { console.log(e); this.setData({ index: e.detail.value }) }, MultiChange(e) { this.setData({ multiIndex: e.detail.value }) }, MultiColumnChange(e) { let data = { multiArray: this.data.multiArray, multiIndex: this.data.multiIndex }; data.multiIndex[e.detail.column] = e.detail.value; switch (e.detail.column) { case 0: switch (data.multiIndex[0]) { case 0: data.multiArray[1] = ['扁性動物', '線形動物', '環節動物', '軟體動物', '節肢動物']; data.multiArray[2] = ['豬肉絳蟲', '吸血蟲']; break; case 1: data.multiArray[1] = ['魚', '兩棲動物', '爬行動物']; data.multiArray[2] = ['鯽魚', '帶魚']; break; } data.multiIndex[1] = 0; data.multiIndex[2] = 0; break; case 1: switch (data.multiIndex[0]) { case 0: switch (data.multiIndex[1]) { case 0: data.multiArray[2] = ['豬肉絳蟲', '吸血蟲']; break; case 1: data.multiArray[2] = ['蛔蟲']; break; case 2: data.multiArray[2] = ['螞蟻', '螞蟥']; break; case 3: data.multiArray[2] = ['河蚌', '蝸牛', '蛞蝓']; break; case 4: data.multiArray[2] = ['昆蟲', '甲殼動物', '蛛形動物', '多足動物']; break; } break; case 1: switch (data.multiIndex[1]) { case 0: data.multiArray[2] = ['鯽魚', '帶魚']; break; case 1: data.multiArray[2] = ['青蛙', '娃娃魚']; break; case 2: data.multiArray[2] = ['蜥蜴', '龜', '壁虎']; break; } break; } data.multiIndex[2] = 0; break; } this.setData(data); }, TimeChange(e) { this.setData({ time: e.detail.value }) }, DateChange(e) { this.setData({ date: e.detail.value }) }, RegionChange: function(e) { this.setData({ region: e.detail.value }) }, ChooseImage() { wx.chooseImage({ count: 4, //默認9 sizeType: ['original', 'compressed'], //可以指定是原圖還是壓縮圖，默認二者都有 sourceType: ['album'], //從相冊選擇 success: (res) => { if (this.data.imgList.length != 0) { this.setData({ imgList: this.data.imgList.concat(res.tempFilePaths) }) } else { this.setData({ imgList: res.tempFilePaths }) } } }); }, ViewImage(e) { wx.previewImage({ urls: this.data.imgList, current: e.currentTarget.dataset.url }); }, DelImg(e) { wx.showModal({ title: '召喚師', content: '確定要刪除這段回憶嗎？', cancelText: '再看看', confirmText: '再見', success: res => { if (res.confirm) { this.data.imgList.splice(e.currentTarget.dataset.index, 1); this.setData({ imgList: this.data.imgList }) } } }) }, textareaAInput(e) { this.setData({ textareaAValue: e.detail.value }) }, textareaBInput(e) { this.setData({ textareaBValue: e.detail.value }) } }) ``` ## **選擇框** #### 示例 :-: ![](https://img.kancloud.cn/b8/23/b823aef0f0cef6debe9a6fab99d758b8_317x222.png) #### **xxx.wxml** ``` <view class="cu-form-group margin-top"> <view class="title">普通選擇</view> <picker bindchange="PickerChange" value="{{index}}" range="{{picker}}"> <view class="picker"> {{index?picker[index]:'禁止換行，超出容器部分會以 ... 方式截斷'}} </view> </picker> </view> <view class="cu-form-group"> <view class="title">多列選擇</view> <picker mode="multiSelector" bindchange="MultiChange" bindcolumnchange="MultiColumnChange" value="{{multiIndex}}" range="{{multiArray}}"> <view class="picker"> {{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}} </view> </picker> </view> <view class="cu-form-group"> <view class="title">時間選擇</view> <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="TimeChange"> <view class="picker"> {{time}} </view> </picker> </view> <view class="cu-form-group"> <view class="title">日期選擇</view> <picker mode="date" value="{{date}}" start="2015-09-01" end="2020-09-01" bindchange="DateChange"> <view class="picker"> {{date}} </view> </picker> </view> <view class="cu-form-group"> <view class="title">地址選擇</view> <picker mode="region" bindchange="RegionChange" value="{{region}}" custom-item="{{customItem}}"> <view class="picker"> {{region[0]}}，{{region[1]}}，{{region[2]}} </view> </picker> </view> ``` ## **開關選擇** #### 示例 :-: ![](https://img.kancloud.cn/47/a1/47a1ded41e1c5e7062716145d049a61a_318x168.png) #### **xxx.wxml** ``` <view class="cu-form-group margin-top"> <view class="title">開關選擇</view> <switch></switch> </view> <view class="cu-form-group"> <view class="title">定義顏色</view> <switch class="red sm" checked></switch> </view> <view class="cu-form-group"> <switch class="switch-sex" checked></switch> <view class="title">定義圖標</view> </view> <view class="cu-form-group"> <view class="title">方形開關</view> <switch class="orange radius sm" checked></switch> </view> ``` ## **單選操作** #### 示例 :-: ![](https://img.kancloud.cn/2c/40/2c408beee650d8365880417b155fd720_321x130.png) #### **xxx.wxml** ``` <radio-group class="block"> <view class="cu-form-group margin-top"> <view class="title">單選操作(radio)</view> <radio checked></radio> </view> <view class="cu-form-group"> <view class="title">定義樣式</view> <radio class="radio"></radio> </view> <view class="cu-form-group"> <view class="title">定義顏色</view> <view> <radio class="blue radio"></radio> <radio class="red margin-left-sm"></radio> </view> </view> </radio-group> ``` ## **復選操作** #### 示例 :-: ![](https://img.kancloud.cn/d0/12/d012a047c35c41413e766e7b3d2c579b_320x126.png) #### **xxx.wxml** ``` <view class="cu-form-group margin-top"> <view class="title">復選選操作(checkbox)</view> <checkbox></checkbox> </view> <view class="cu-form-group"> <view class="title">定義形狀</view> <checkbox class="round" checked></checkbox> </view> <view class="cu-form-group"> <view class="title">定義顏色</view> <checkbox class="round blue" checked></checkbox> </view> ``` ## **圖片上傳** #### 示例 :-: ![](https://img.kancloud.cn/f1/94/f1941c835be730bbb1ac02c47d7d3d48_313x119.png) #### **xxx.wxml** ``` <view class="cu-bar bg-white margin-top"> <view class="action"> 圖片上傳 </view> <view class="action"> {{imgList.length}}/4 </view> </view> <view class="cu-form-group"> <view class="grid col-4 grid-square flex-sub"> <view class="bg-img" wx:for="{{imgList}}" wx:key="{{index}}" bindtap="ViewImage" data-url="{{imgList[index]}}"> <image src='{{imgList[index]}}' mode='aspectFill'></image> <view class="cu-tag bg-red" catchtap="DelImg" data-index="{{index}}"> <text class="cuIcon-close"></text> </view> </view> <view class="solids" bindtap="ChooseImage" wx:if="{{imgList.length<4}}"> <text class="cuIcon-cameraadd"></text> </view> </view> </view> ``` ## **頭像** #### 示例 :-: ![](https://img.kancloud.cn/4e/b3/4eb388899cf43c89d42e69a336b21dae_316x45.png) #### **xxx.wxml** ``` <view class="cu-form-group margin-top"> <view class="title">頭像</view> <view class="cu-avatar radius bg-gray"></view> </view> ``` ## **文本域** #### 示例 :-: ![](https://img.kancloud.cn/80/d4/80d45d17a0bb7f1f44f56691b2cd5475_317x147.png) #### **xxx.wxml** ```  <view class="cu-form-group margin-top"> <textarea maxlength="-1" disabled="{{modalName!=null}}" bindinput="textareaAInput" placeholder="多行文本輸入框"></textarea> </view> <view class="cu-form-group align-start"> <view class="title">文本框</view> <textarea maxlength="-1" disabled="{{modalName!=null}}" bindinput="textareaBInput" placeholder="多行文本輸入框"></textarea> </view> ```