## **基本表单**
#### 示例
:-: 
#### **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
})
}
})
```
## **选择框**
#### 示例
:-: 
#### **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>
```
## **开关选择**
#### 示例
:-: 
#### **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>
```
## **单选操作**
#### 示例
:-: 
#### **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>
```
## **复选操作**
#### 示例
:-: 
#### **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>
```
## **图片上传**
#### 示例
:-: 
#### **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>
```
## **头像**
#### 示例
:-: 
#### **xxx.wxml**
```
<view class="cu-form-group margin-top">
<view class="title">头像</view>
<view class="cu-avatar radius bg-gray"></view>
</view>
```
## **文本域**
#### 示例
:-: 
#### **xxx.wxml**
```
<!-- !!!!! placeholder 在ios表现有偏移 建议使用 第一种样式 -->
<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>
```
