feat(form): form 组件优化完善，还原度 (#150)

* feat(form): form 组件优化完善，还原度 * docs: 文档修改
jd-ftf · Aug 14, 2020 · ac444ea · ac444ea
1 parent 7ad01a1
commit ac444ea
Show file tree

Hide file tree

Showing 47 changed files with 416 additions and 203 deletions.
diff --git a/docs/docs/changelog.md b/docs/docs/changelog.md
@@ -18,6 +18,7 @@
   - 新增属性 `border`, 支持设置表单组是否展示边框线 (by [@yawuling](https://github.com/yawuling) )
 - CheckboxGroup
   - 新增属性 `cell`, 支持复选框组下的表单模式事件 (by [@Gkxie](https://github.com/Gkxie) )
+  - 新增属性 `size`，支持单选框尺寸更改（large） (by [@yawuling](https://github.com/yawuling) )
 - ColPicker
   - 新增 ColPicker 多列选择组件 (by [@yawuling](https://github.com/yawuling) )
 - DatetimePicker
@@ -67,7 +68,7 @@
   - 新增组件 `Popover` (by [@HXCStudio123](https://github.com/HXCStudio123) )
 - RadioGroup
   - 新增属性 `cell`, 支持单选组下的表单模式事件 (by [@HXCStudio123](https://github.com/HXCStudio123) )
-  - 新增属性 `size`, 支持单选框尺寸更改（normal、large） (by [@HXCStudio123](https://github.com/HXCStudio123) )
+  - 新增属性 `size`, 支持单选框尺寸更改（large） (by [@HXCStudio123](https://github.com/HXCStudio123) )
 - StatusTip
   - 属性 `type` 下的七种类型 对应缺省展示图片更改 (by [@awjing](https://github.com/awjing) )
 - Sticky

diff --git a/docs/docs/checkbox.md b/docs/docs/checkbox.md
@@ -144,6 +144,7 @@ Page({
   <wd-checkbox value="shop">商家后台</wd-checkbox>
 </wd-checkbox-group>
 ```
+
 ```javascript
 Page({
   data: {
@@ -165,6 +166,7 @@ Page({
   <wd-checkbox value="shop">商家后台</wd-checkbox>
 </wd-checkbox-group>
 ```
+
 ```javascript
 Page({
   data: {
@@ -198,6 +200,17 @@ Page({
 })
 ```
 
+### 尺寸
+
+设置 `size` 属性，可选 `large`。
+
+```html
+<wd-checkbox-group value="1" size="large">
+  <wd-checkbox value="1">京麦</wd-checkbox>
+  <wd-checkbox value="2">商家后台</wd-checkbox>
+</wd-checkbox-group>
+```
+
 ### Checkbox Attributes
 
 | 参数      | 说明                                 | 类型      | 可选值       | 默认值   |
@@ -208,6 +221,7 @@ Page({
 | disabled | 禁用 | boolean | - | false |
 | true-value | 选中值，在 checkbox-group 中使用无效，需同 false-value 一块使用 | string / number | - | true |
 | false-value | 非选中时的值，在 checkbox-group 中使用无效，需同 true-value 一块使用 | string /number | - | false |
+| size | 设置大小 | string | 'large' | - |
 
 ### CheckboxGroup Attributes
 
@@ -221,6 +235,7 @@ Page({
 | min | 最小选中的数量 | number | - | 0 |
 | max | 最大选中的数量，0 为无限数量，默认为 0 | number | - | 0 |
 | inline | 同行展示 | boolean | - | false |
+| size | 设置大小 | string | 'large' | - |
 
 ### Checkbox Methods
 

diff --git a/docs/docs/colPicker.md b/docs/docs/colPicker.md
@@ -497,6 +497,7 @@ Page({
 | required | 必填样式 | boolean | - | false |
 | align-right | 选择器的值靠右展示 | boolean | - | false |
 | before-confirm | 确定前校验函数，接收 (value, resolve) 参数，通过 resolve 继续执行 picker，resolve 接收1个boolean参数 | function | - | - |
+| loading-color | loading 图标的颜色 | string | - | '#4d80f0' |
 | use-default-slot | 使用默认插槽时设置该选项 | boolean | - | false |
 | use-label-slot | 使用 label 插槽时设置该选项 | boolean | - | false |
 

diff --git a/docs/docs/messageBox.md b/docs/docs/messageBox.md
@@ -25,7 +25,7 @@ import MessageBox from '/wot-design/messageBox/messageBox'
 
 Page({
   alert () {
-    MessageBox.alert('提示文案')
+    MessageBox.alert('操作成功')
   }
 })
 ```
@@ -84,6 +84,8 @@ Page({
     MessageBox.confirm({
       msg: '提示文案',
       title: '标题'
+    }).then(() => {
+      console.log('点击了确定按钮')
     })
   }
 })
@@ -105,6 +107,8 @@ Page({
     MessageBox.prompt({
       title: '邮箱',
       inputPattern: /.+@.+\..+/i
+    }).then(({ value }) => {
+      console.log(`你输入的又想是： ${value}`)
     })
   }
 })

diff --git a/docs/docs/picker.md b/docs/docs/picker.md
@@ -14,16 +14,22 @@ Picker 组件为 popup 和 pickerView 的组合。
 
 ### 基本用法
 
-`columns` 设置数据源，`label` 设置左侧文本内容，`value` 设置选中项的值。label 可以不传。可以通过 `label-width` 设置标题宽度，默认为 '33%'。
+`columns` 设置数据源，`label` 设置左侧文本内容，`value` 设置选中项的值。label 可以不传。可以通过 `label-width` 设置标题宽度，默认为 '33%'，监听 `bind:confirm` 事件，获取选中值，传出一个 evnet 对象， `event.detail = { value, selectedItems }`，value 为绑定值，selectedItems 为选中选项的对象。
 
 ```html
-<wd-picker columns="{{columns1}}" label="单列选项" value="{{value}}" />
+<wd-picker columns="{{columns1}}" label="单列选项" value="{{value}}" bind:confirm="handleConfirm" />
 ```
+
 ```javascript
 Page({
   data: {
     columns: ['选项1', '选项2', '选项3', '选项4', '选项5', '选项6', '选项7'],
     value: ''
+  },
+  handleConfirm ({ detail: { value } }) {
+    this.setData({
+      value: value
+    })
   }
 })
 ```
@@ -154,7 +160,7 @@ Page({
 
 ### 必填属性
 
-设置 `required` 属性开启表单必填。
+设置 `required` 属性，展示必填样式。
 
 ```html
 <wd-picker label="必填属性" error columns="{{columns}}" value="{{value}}" required/>
@@ -256,7 +262,7 @@ Page({
 
 | 事件名称      | 说明                                 | 参数     |
 |------------- |------------------------------------ |--------- |
-| bind:confirm | 点击右侧按钮触发 | 单列：选中项值；多列：所有列选中项值 |
+| bind:confirm | 点击右侧按钮触发 | event.detail = { value, selectedItems } |
 | bind:cancel | 点击左侧按钮触发 | - |
 | bind:open | 打开选择器弹出层时触发 | - |
 

diff --git a/docs/docs/popover.md b/docs/docs/popover.md
@@ -111,4 +111,4 @@ Page({
 | -------------- | -------------- | ---------------------------------------- |
 | show     |显示时触发       | - |
 | hide | 隐藏时触发 | - |
-| menu-click | menu 模式下点击某一选项触发 | 当前选项内容{name,content}, 当前选项索引index |
+| menuclick | menu 模式下点击某一选项触发 | event.detail = { item, index } |
diff --git a/docs/docs/radio.md b/docs/docs/radio.md
@@ -114,12 +114,12 @@ Page({
 </wd-radio-group>
 ```
 
-### 小尺寸
+### 尺寸
 
-设置 `size` 属性。
+设置 `size` 属性，可选 `large`。
 
 ```html
-<wd-radio-group value="1" size="small">
+<wd-radio-group value="1" size="large">
   <wd-radio value="1">京麦</wd-radio>
   <wd-radio value="2">商家后台</wd-radio>
 </wd-radio-group>
@@ -142,7 +142,7 @@ radio设置的props优先级比radioGroup上设置的props优先级更高
 |---------- |------------------------------------ |---------- |------------- |-------- |
 | value | 会自动选中value对应的单选框 | string / number / boolean | - | - |
 | shape | 单选框形状 | string | 'circle', 'dot', 'button' | 'circle' |
-| size | 单选框尺寸 | string | 'normal', 'small' | 'normal' |
+| size | 设置大小 | string | 'large' | - |
 | checked-color | 选中的颜色 | string | - | '#4d80f0' |
 | disabled | 禁用 | boolean | - | false |
 | inline | 同行展示 | boolean | - | false |
@@ -161,4 +161,5 @@ radio设置的props优先级比radioGroup上设置的props优先级更高
 | value | 单选框选中时的值。会自动匹配radioGroup的value | string / number / boolean | - | - |
 | shape | 单选框形状 | string | 'dot', 'button' | 'dot' |
 | checked-color | 选中的颜色 | string | - | '#4d80f0' |
-| disabled | 禁用 | boolean | - | false |
+| disabled | 禁用 | boolean | - | false |
+| size | 设置大小 | string | 'large' | - |
diff --git a/docs/docs/search.md b/docs/docs/search.md
@@ -90,7 +90,59 @@ Page({
 <wd-search hide-cancel disabled />
 ```
 
-### 自定义
+### 自定义左侧插槽
+
+通过使用 `prefix` 插槽自定义搜索框左侧内容。
+
+```html
+<wd-search value="{{value}}">
+  <wd-popover slot="prefix" mode="menu" content="{{menu}}" bind:menuclick="changeSearchType">
+    <view class="search-type">
+      <text>{{ searchType }}</text>
+      <wd-icon class="icon-arrow" name="fill-arrow-down"></wd-icon>
+    </view>
+  </wd-popover>
+</wd-search>
+```
+
+```javascript
+Page({
+  data: {
+    value: '',
+    searchType: '全部'
+  },
+  changeSearchType ({ detail: { item } }) {
+    this.setData({
+      searchType: item.content
+    })
+  }
+})
+```
+
+```css
+.search-type {
+  position: relative;
+  height: 30px;
+  line-height: 30px;
+  padding: 0 8px 0 16px;
+}
+.search-type::after {
+  position: absolute;
+  content: '';
+  width: 1px;
+  right: 0;
+  top: 5px;
+  bottom: 5px;
+  background: rgba(0, 0, 0, 0.25);
+}
+.search-type .icon-arrow {
+  display: inline-block;
+  font-size: 20px;
+  vertical-align: middle;
+}
+```
+
+### 自定义文案
 
 通过设置 `placeholder` 修改输入框提示文案，`cancel-txt` 修改取消按钮文案。
 
@@ -117,8 +169,7 @@ Page({
 | disabled        | 是否禁用搜索框                   | boolean    | -          | false   |
 | maxlength | 原生属性，设置最大长度。-1表示无限制 | string/number | - | -1 |
 | value | 输入框文案，单向数据绑定 | string | - | - |
-| use-label-slot | 是否使用输入框左侧插槽 | boolean | - | false |
-| use-action-slot | 是否使用输入框右侧插槽 | boolean | - | false |
+| use-suffix-slot | 是否使用输入框右侧插槽 | boolean | - | false |
 
 ### Events
 
@@ -135,8 +186,8 @@ Page({
 
 | name      | 说明                                 |
 |------------- |--------------------------------- |
-| label       | 输入框左侧自定义内容 |
-| action       | 输入框左侧自定义内容 |
+| prefix       | 输入框左侧自定义内容 |
+| suffix       | 输入框左侧自定义内容 |
 
 ### 外部样式类
 

diff --git a/docs/docs/toast.md b/docs/docs/toast.md
@@ -29,12 +29,13 @@ Page({
 })
 ```
 
-### 成功、异常、警告
+### 成功、异常、警告、常规
 
 ```javascript
 Toast.success('操作成功')
 Toast.error('手机验证码输入错误，请重新输入')
 Toast.warning('提示信息')
+Toast.info('常规提示信息')
 ```
 
 ### 提示位置
@@ -59,6 +60,27 @@ Toast({
 Toast.close()
 ```
 
+### loading 提示
+
+```javascript
+Toast.loading('加载中...')
+```
+
+修改 loading 指示器类型：
+
+```javascript
+Toast.loading({
+  loadingType: 'spinner',
+  msg: '加载中...'
+})
+```
+
+手动关闭 loading：
+
+```javascript
+Toast.close()
+```
+
 ### Attributes
 
 | 参数      | 说明                                 | 类型      | 可选值       | 默认值   |
@@ -71,13 +93,23 @@ Toast.close()
 | msg        |	消息内容                             |	string   |	—           |	—       |
 | duration   | 持续时间，单位 ms，为0时表示不自动关闭     |	Number   |	—           |	2000 |
 | iconName   |	图标类型                             |	string    |	'success', 'error', 'warning' |	—      |
+| iconSize | 左侧图标尺寸 | string | - | '42px' |
+| iconClass  | 图标类目，自定义图标，可以使用 Icon 章节的那些图标类名，iconName 优先级更高  | string   | —             | —   |
 | customIcon |	自定义图标，开启后可以通过 custom-icon-class 类名自定义图标 |	Boolean   |	—	            | false   |
 | position   |	提示信息框的位置                      |	string   |	'top', 'middle', 'bottom'  |	'middle'  |
 | zIndex  	 | toast 层级                           |	number   |	—            |	100     |
+| loadingType | 加载指示器类型 | string | 'circle-outline', 'spinner','circle' | 'circle-outline' |
+| loadingColor | 加载icon的颜色 | string | '' | '#4D80F0' |
 
 ### Methods
+
 | 方法名称      | 说明       | 参数   |
 |------------- |----------- |---------  |
+| success | 成功提示 | options |
+| error | 关闭提示 | options |
+| info | 常规提示 | options |
+| warning | 警告提示 | options |
+| loading | 加载提示 | options |
 | close         |手动关闭消息提示框，是Toast实例上的方法| —  |
 
 ### 外部样式类

diff --git a/example/pages/checkbox/index.jxml b/example/pages/checkbox/index.jxml
@@ -81,4 +81,15 @@
     <wd-checkbox value="{{3}}">商家后台</wd-checkbox>
     <wd-checkbox value="{{4}}">营销中心</wd-checkbox>
   </wd-checkbox-group>
+</demo-block>
+
+<demo-block title="大尺寸">
+  <wd-checkbox-group value="{{jingmai}}" inline size="large">
+    <wd-checkbox value="jingmai">京麦</wd-checkbox>
+    <wd-checkbox value="shop">商家后台</wd-checkbox>
+  </wd-checkbox-group>
+  <wd-checkbox-group value="{{jingmai}}" size="large" class="group">
+    <wd-checkbox value="jingmai">京麦</wd-checkbox>
+    <wd-checkbox value="shop">商家后台</wd-checkbox>
+  </wd-checkbox-group>
 </demo-block>
diff --git a/example/pages/checkbox/index.jxss b/example/pages/checkbox/index.jxss
@@ -0,0 +1,6 @@
+.group {
+  display: block;
+  margin-top: 10px;
+  padding: 10px 0;
+  border-top: 1px solid rgba(0, 0, 0, 0.04);
+}
diff --git a/example/pages/datetimePicker/index.jxml b/example/pages/datetimePicker/index.jxml
@@ -1,6 +1,6 @@
 <wd-toast id="wd-toast"/>
 <demo-block transparent>
-  <wd-cell-group>
+  <wd-cell-group border>
     <wd-datetime-picker
       label="日期选择"
       value="{{value1}}"
@@ -39,6 +39,14 @@
       before-confirm="{{beforeConfirm}}"
       bind:confirm="handleConfirm"
     />
+    <wd-datetime-picker
+      label="错误"
+      error
+    />
+    <wd-datetime-picker
+      label="必填"
+      required
+    />
   </wd-cell-group>
 </demo-block>
 <demo-block title="label 不传" transparent>
@@ -53,12 +61,6 @@
     value="{{value8}}"
   />
 </demo-block>
-<demo-block title="错误" transparent>
-  <wd-datetime-picker
-    label="日期选择"
-    error
-  />
-</demo-block>
 <demo-block title="值靠右展示" transparent>
   <wd-datetime-picker
     label="日期选择"