Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

antd-mini

Package Overview
Dependencies
Maintainers
4
Versions
213
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

antd-mini - npm Package Compare versions

Comparing version 2.27.0 to 2.27.1

44

compiled/wechat/src/ActionSheet/index.md

@@ -15,28 +15,32 @@ ---

从底部弹出的动作菜单面板。
## 何时使用
由用户操作触发,提供一组与操作相关的两个或多个选项,让用户在不离场的情况下完成操作。相比于对话框,动作面板的位置更适合于在大屏幕时代的单手操作
## 何时使用
由用户操作触发,提供一组与操作相关的两个或多个选项,让用户在不离场的情况下完成操作。相比于对话框,动作面板的位置更适合于在大屏幕时代单手操作的场景。
## 代码示例
<code src='pages/ActionSheet/index'></code>
## API
| 属性 | 说明 | 类型 | 默认值 |
| -----|-----|-----|-----|
| actions | 面板选项列表 | [ActionSheetItem](#actionshetitem)[] | [] |
| cancelText | 取消按钮文字 | string | 取消 |
| className | 类名 | string | - |
| style | 样式 | string | - |
| title | 标题 | string | - |
| visible | 是否展开 | boolean | false |
| onClose | 关闭时触发| (event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - |
| onAction | 点击选项时触发,禁用状态下不会触发 | (item: [ActionSheetItem](#actionsheetitem), index: number, event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - |
## API
| 属性 | 说明 | 类型 | 默认值 |
| ----------- | ------------------- | ---------------------- | ------ |
| actions | 面板选项列表 | `[ActionSheetItem](#actionshetitem)`[] | [] |
| cancelText | 取消按钮文字 | string | 取消 |
| className | 类名 | string | - |
| style | 样式 | string | - |
| title | 标题 | string | - |
| visible | 是否展开 | boolean | false |
| onClose | 关闭时触发 | `(event: [Event](https://opendocs.alipay.com/mini/framework/event-object))` => void | - |
| onAction | 点击选项时触发,禁用状态下不会触发 | `(item: [ActionSheetItem](#actionsheetitem), index: number, event: [Event](https://opendocs.alipay.com/mini/framework/event-object))` => void | - |
### ActionSheetItem
属性 | 说明 | 类型 | 默认值 |
| -----|-----|-----|-----|
| icon | 面板选项列表 | 图标 | - |
| danger | 是否危险模式 | boolean | false |
| description | 取消按钮文字 | string | 否 |
| disabled | 是否禁用 | boolean | false |
| 属性 | 说明 | 类型 | 默认值 |
| ----------- | ---------- | ------- | ------ |
| icon | 图标 | - | - |
| danger | 是否危险模式| boolean | false |
| description | 描述 | string | - |
| disabled | 是否禁用 | boolean | false |

@@ -7,3 +7,3 @@ ---

order: 8
toc: 'content'
toc: content
---

@@ -15,6 +15,8 @@

用来代表用户或事物
用来代表用户或事物。
## 何时使用
需要更加直观的展现人物或事物特征
需要更加直观地展现人物或事物特征时。
## 代码示例

@@ -26,7 +28,7 @@

| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| className | 类名 | string | - |
| size | 大小,可选 `x-small`,`small`,`medium`,`large` | string | `medium` |
| src | 头像地址 | string | 灰色的内置图片 |
| style | 样式 | string | - |
| 属性 | 说明 | 类型 | 默认值 |
|---------|----------|------|-----------|
| className | 类名 | string | - |
| size | 大小,可选 `x-small`、`small`、`medium`、`large` | string | `medium` |
| src | 头像地址 | string | 灰色的内置图片 |
| style | 样式 | string | - |

@@ -14,23 +14,22 @@ ---

徽标,红点、数字或文字。用于告诉用户待处理的事物或更新数。
徽标,显示红点、数字或文字。用于提醒用户,有待处理的事项或者新的更新数量。
## 何时使用
在右上角展示数字、文字、小红点 适用于产品化的新消息、新功能、新服务等内容的提醒,通过醒目视觉形式吸引用户处理
当需要在右上角展示数字、文字或小红点时使用。适合于提示产品化的新消息、功能或服务等内容,通过显眼的视觉形式吸引用户注意,并促使其进行相关操作。
## 代码示例
<code src='pages/Badge/index'></code>
<code src="pages/Badge/index"></code>
## API
| 属性 | 说明 | 类型 | 默认值 |
| -----|-----|-----|----- |
| bgColor | 自定义背景色,css色值 | string | - |
| className | 组件根节点类名 | string | - |
| offsetX | 水平方向偏移量 | string | -50% |
| offsetY | 垂直方向偏移量 | string | -50% |
| position | 相对于容器徽标的位置,可选`top-left` `top-right` `top-center` `left` `right` `bottom-left` `bottom-center` `bottom-right` | string | `top-right` |
| stroke | 是否有描边 | boolean | false |
| style | 样式 | string | - |
| text | 红点内容,为空时表示只显示红点;可以是数字,也可以是文字;如果是数字,超过 99 会自动变成 ... | string \| number \| slot | - |
| type | badge 类型,可选`dot`(红点) `number`(数字类型,会自动做>99转换) `text`(文字气泡) `bubble`(气泡形态,带箭头) | string | `dot` |
| 属性 | 说明 | 类型 | 默认值 |
| --------- | ------------------------------------ | -------------------- | ------------ |
| bgColor | 自定义背景色,CSS 色值 | string | - |
| className | 组件根节点的类名 | string | - |
| offsetX | 水平方向偏移量 | string | '-50%' |
| offsetY | 垂直方向的偏移量 | string | '-50%' |
| position | 徽标相对于容器的位置,选项包括:`top-left`、`top-right`、`top-center`、`left`、`right`、`bottom-left`、`bottom-center` 和 `bottom-right` | string | `top-right` |
| stroke | 徽标是否带有描边 | boolean | false |
| style | 自定义样式 | object | - |
| text | 徽标内容,为空代表仅展示红点;可以是数字或文字;若是数字且超过 99,则显示为 `...` | string \| number \| slot | - |
| type | 徽标类型,选项包括:`dot`(红点)、`number`(数字类型,超过 99 会自动转换)、`text`(文字气泡)和 `bubble`(气泡形态,带有箭头) | string | `dot` |

@@ -9,2 +9,3 @@ ---

---
# Button 按钮

@@ -14,24 +15,35 @@

用于开始一个即时操作
用于开始一个即时操作。
## 何时使用
标记了一个(或封装一组)操作命令,响应用户点击行为,触发相应的业务逻辑
标记了一个(或封装一组)操作命令,响应用户点击行为,触发相应的业务逻辑。
## 代码示例
### 基本使用
<code src='pages/Button/index'></code>
### Inline
<code src='pages/ButtonInline/index'></code>
### Icon
<code src='pages/ButtonIcon/index'></code>
### 更多自定义
<code src='pages/ButtonCustom/index'></code>
## API
### Button
以下表格介绍了 Button 组件的 API 属性:
| 属性 | 说明 | 类型 | 默认值 |
| -----|-----|-----|-----|
| type | 按钮类型, 可选 `primary` `default` `text` | string | `default` |
| --- | --- | --- | --- |
| type | 按钮类型,可选 `primary`、`default`、`text` | string | `default` |
| danger | 是否为危险按钮 | boolean | false |

@@ -42,23 +54,26 @@ | disabled | 是否为失效按钮 | boolean | false |

| style | 样式 | string | - |
| inline | 是否为内联按钮 | boolean | false |
| inline | 是否为内联按钮 | boolean | false |
| icon | 按钮左侧图标 | string | - |
| loading | 是否加载中,加载中时不可点击 | boolean | - |
| size | 按钮大小。仅在 inline 下生效,可选 `small`, `medium`, `large` | string | medium |
| subText | 辅助文字,显示在第二行。inline 下不生效 | string | - |
| catchTap | 点击按钮,触发此回调, 非冒泡 | (e: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - |
| onTap | 点击按钮,触发此回调 | (e: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - |
| size | 按钮大小。仅在 `inline` 下生效,可选 `small`、`medium`、`large` | string | `medium` |
| subText | 辅助文字,显示在第二行。`inline` 下不生效 | string | - |
| catchTap | 点击按钮,触发此回调,非冒泡 | (e: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - |
| onTap | 点击按钮,触发此回调 | (e: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - |
### 更多属性
- public-id
- open-type
- scope
- form-type
- onGetAuthorize
- onFollowLifestyle
- onError
- onGetUserInfo
- onGetPhoneNumber
以下是 Button 组件支持的其他属性:
https://opendocs.alipay.com/mini/component/button#%E5%B1%9E%E6%80%A7%E8%AF%B4%E6%98%8E
- `public-id`
- `open-type`
- `scope`
- `form-type`
- `onGetAuthorize`
- `onFollowLifestyle`
- `onError`
- `onGetUserInfo`
- `onGetPhoneNumber`
具体的属性说明,请参考支付宝小程序的官方文档。
[Button 组件属性说明](https://opendocs.alipay.com/mini/component/button#%E5%B1%9E%E6%80%A7%E8%AF%B4%E6%98%8E)

@@ -22,2 +22,4 @@ ---

以下为日历组件的属性及描述:
| 属性 | 说明 | 类型 | 默认值 |

@@ -33,8 +35,7 @@ | ------------- | ---------------------------------------------- | ----------------------------------------------------------- | ----------- |

| localeText | 国际化文案 | Partial`<LocaleText>` | 无 |
### 类型
**CalendarValue** : 日历的 Value 类型为 `number | [number,number]`, 代表单选或者连续区间的日期。 是一个时间戳,单位为毫秒。
**CalendarValue** : 日历的值类型,为数字或数字元组 `number | [number,number]`,表示单选或连续日期区间。单位为毫秒的时间戳。
**CellState** : 日历单元格的状态
**CellState** : 定义了日历单元格的各种状态。

@@ -44,3 +45,3 @@ ```typescript

/**
* 是否被禁止
* 是否禁用
*/

@@ -65,3 +66,3 @@ disabled: boolean;

/**
* 是否被选择
* 是否选中
*/

@@ -72,3 +73,3 @@ isSelected: boolean;

**LocaleText** : 国际化文案
**LocaleText** : 提供国际化支持的文案结构。

@@ -78,3 +79,3 @@ ```typescript

/**
* 星期的名称。从周一到周日
* 星期的名称,从周一至周日
* 默认为 ['一', '二', '三', '四', '五', '六', '日']

@@ -84,21 +85,21 @@ */

/**
* 月份标题的格式。 默认为 'YYYY年MM月'
* 月份标题的格式,默认为 'YYYY年MM月'
*/
title: string;
/**
* 今日的文案。 默认为 '今日'
* 今天的文案,默认为 '今日'
*/
today: string;
/**
* 开始的文案。 默认为 '开始'
* 开始的文案,默认为 '开始'
*/
start: string;
/**
* 结束的文案。 默认为 '结束'
* 结束的文案,默认为 '结束'
*/
startAndEnd: string;
end: string;
/**
* 开始/结束的文案。 默认为 '开始/结束'
* 开始与结束的文案,默认为 '开始/结束'
*/
end: string;
startAndEnd: string;
}

@@ -109,9 +110,9 @@ ```

### 如何设置默认的开始与结束时间 ?
### 如何设置默认的开始与结束时间?
通过 `defaultValue` 设置默认的时间。 `defaultValue` 的类型为 CalendarValue。
通过 `defaultValue` 可以设置默认的时间。`defaultValue` 的类型是 `CalendarValue`。
CalendarValue 的类型为 `number | [number,number]`,代表单选或者连续区间的日期。 是一个时间戳,单位为毫秒。
`CalendarValue` 的类型是 `number | [number, number]`,代表单选或者连续区间的日期。它是一个时间戳,单位是毫秒。
举个例子,如果我们想要设置默认的开始时间为今天,结束时间为 7 天后,所以我们可以在 defaultValue 内传入
例如,如果我们想设置默认的开始时间为今天,结束时间为七天后,我们可以在 `defaultValue` 中传入以下代码:

@@ -124,13 +125,13 @@ ```ts

我们可以通过 `onFormatter` 设置单元格的自定义数据, `onFormatter` 的格式为 `(cell: CellState, currentValue: CalendarValue) => CellState`。
我们可以通过 `onFormatter` 方法设置单元格的自定义数据,`onFormatter` 的格式是 `(cell: CellState, currentValue: CalendarValue) => CellState`。
我们会调用每一个单元格的状态,以及当前的 value。 通过返回新的单元格数据,我们可以设置单元格的状态。
这个函数会获取每个单元格的状态以及当前的值。通过返回新的单元格数据,我们可以自定义单元格的状态。
下面是一些常见的用例
以下是一些常见的使用场景:
#### 如何让当天之前的时间不可选?
支付宝小程序,我们可以通过 page 上的方法来设置,在 wxml 里需要传入一个方法名字符串。
在支付宝小程序中,我们可以通过页面上的方法设置,需要在 axml 文件中传入一个方法名字符串。
axml:
axml 文件:

@@ -141,3 +142,3 @@ ```xml

ts:
ts 文件:

@@ -149,4 +150,4 @@ ```ts

handleFormat(cell: CellState) {
// 如果单元格代表的时间早于今天的开始时间,则禁止选择
return {
// 如果 cell 的时间小于今天的开始时间,那么就禁止选择
disabled: dayjs(cell.time).isBefore(dayjs().startOf('date')),

@@ -158,5 +159,5 @@ };

支付宝小程序,我们可以通过 data 里的方法来设置。 在 wxml 里需要传入一个变量名。
在微信小程序,我们也可以通过 data 中的函数来设置,此时在 wxml 文件中需要传入一个变量名。
wxml:
wxml 文件:

@@ -167,2 +168,4 @@ ```xml

ts 文件:
```ts

@@ -174,4 +177,4 @@ import dayjs from 'dayjs';

handleFormat: (cell: CellState) => {
// 如果单元格代表的时间早于今天的开始时间,则禁止选择
return {
// 如果 cell 的时间小于今天的开始时间,那么就禁止选择
disabled: dayjs(cell.time).isBefore(dayjs().startOf('date')),

@@ -178,0 +181,0 @@ };

@@ -14,10 +14,9 @@ ---

在一组可选项中进行多选
在一组可选项中进行多选。
## 何时使用
- 在一组可选项中进行多项选择时
- 单独使用可以表示两种状态之间的切换,和 switch 类似。区别在于切换 switch 会直接触发状态改变,而 checkbox 一般用于状态标记,需要和提交操作配合
- 在一组可选项中进行多项选择时。
- 单独使用时可以表示两种状态之间的切换,与 switch 类似。区别在于,切换 switch 会直接触发状态改变,而 checkbox 一般用于状态标记,需要与提交操作配合。
## 代码示例

@@ -41,25 +40,25 @@

| 属性 | 说明 | 类型 | 默认值 |
| -------------- | ----------------------- | --------------------------------------------------------------------------------------------------- | ------ |
| checked | 是否选中 | boolean | - |
| className | 类名 | string | - |
| color | 选中的颜色,同 CSS 色值 | string | - |
| defaultChecked | 默认是否选中 | boolean | - |
| disabled | 是否禁用 | boolean | false |
| style | 样式 | string | - |
| onChange | 选中状态改变,触发回调 | (checked: boolean, event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - |
| 属性 | 说明 | 类型 | 默认值 |
| -------------- | ----------------------- | ------------------------------------------------------------------------------------------------- | ------ |
| checked | 是否选中 | boolean | - |
| className | 类名 | string | - |
| color | 选中的颜色,同 CSS 色值 | string | - |
| defaultChecked | 默认是否选中 | boolean | - |
| disabled | 是否禁用 | boolean | false |
| style | 样式 | string | - |
| onChange | 选中状态改变时触发回调 | (checked: boolean, event: `Event`(https://opendocs.alipay.com/mini/framework/event-object)) => void | - |
#### CheckboxGroup
| 属性 | 说明 | 类型 | 默认值 |
| ------------ | ------------------------------------------------------------ | -------------------------------------------------------------------------------------------------- | ---------- |
| className | 类名 | string | - |
| color | 选中的颜色,同 CSS 色值 | string | - |
| defaultValue | 默认选中值 | `string[]` | - |
| disabled | 是否禁用 | boolean | false |
| label | label 区插槽,接收 value(当前项可选项 item)、index(索引) | slot | - |
| options | 指定可选项 | `{label: string; value: string; disabled: boolean}[]` | - |
| position | 布局,可选`horizontal` `vertical` | string | `vertical` |
| style | 样式 | string | - |
| value | CheckboxGroup 的值,决定子元素是否勾选 | string[] | - |
| onChange | 勾选状态变化时,触发此函数 | (value: string[], event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - |
| 属性 | 说明 | 类型 | 默认值 |
| ------------ | ------------------------------------------------------------ | ----------------------------------------------------------------------------------------------- | ----------- |
| className | 类名 | string | - |
| color | 选中的颜色,同 CSS 色值 | string | - |
| defaultValue | 默认选中的值 | `string[]` | - |
| disabled | 是否禁用 | boolean | false |
| label | label 区插槽,接收 value(当前项可选项 item)、index(索引) | slot | - |
| options | 指定可选项 | `{label: string; value: string; disabled: boolean}[]` | - |
| position | 布局,可选 `horizontal`、`vertical` | string | `vertical` |
| style | 样式 | string | - |
| value | CheckboxGroup 的值,决定子元素是否勾选 | `string[]` | - |
| onChange | 勾选状态变化时触发此函数 | (value: `string[]`, event: `Event`(https://opendocs.alipay.com/mini/framework/event-object)) => void | - |

@@ -9,2 +9,3 @@ ---

---
# Checklist 可勾选列表

@@ -14,6 +15,7 @@

列表的勾选操作
列表的勾选操作。
## 何时使用
- 在一组列表项中选择一个或多个
- 可勾选列表的使用需要默认至少勾选一项,方便用户了解列表是可以勾选的
- 在一组列表项中选择一个或多个。
- 可勾选列表的使用需要默认至少勾选一项,方便用户了解列表是可以勾选的。

@@ -24,25 +26,23 @@ ## 代码示例

## API
| 属性 | 说明 | 类型 | 默认值 |
| -----|-----|-----|-----|
| className | 类名| string | - |
| content | CheckListItem自定义内容区作用域插槽,接收item参数 | slot | - |
| defaultValue | 默认选中数据 | string \| number \| (string \| number)[] | - |
| icon | 自定义选中Icon插槽 | slot | - |
| multiple | 是否支持多选 | boolean | false |
| options | 配置每一列的选项 | [ChecklistItem](#checklistitem)[] | [] |
| style | 样式| string | - |
| value | 选中数据 | string \| number \| (string \| number)[] | - |
| onChange | 选中项发生变化,触发回调 | (value: string \| number \| (string \| number)[], column: [ChecklistItem](#checklistitem) \| [ChecklistItem](#checklistitem)[], event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void |
| 属性 | 说明 | 类型 | 默认值 |
| ---------- | ---------------------------------------------------------------- | --------------------------- | ------ |
| className | 类名 | string | - |
| content | CheckListItem 自定义内容区作用域插槽,接收 item 参数 | slot | - |
| defaultValue | 默认选中数据 | string \| number \| (string \| number)[] | - |
| icon | 自定义选中 Icon 插槽 | slot | - |
| multiple | 是否支持多选 | boolean | false |
| options | 配置每一列的选项 | [ChecklistItem](#checklistitem)[] | [] |
| style | 样式 | string | - |
| value | 选中数据 | string \| number \| (string \| number)[] | - |
| onChange | 选中项发生变化时,触发回调 | (value: string \| number \| (string \| number)[], column: [ChecklistItem](#checklistitem) \| [ChecklistItem](#checklistitem)[], event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void |
### ChecklistItem
| 参数 | 说明 | 类型 | 默认值 |
| -----|-----|-----|-----|
| description | 描述 | string | - |
| disabled | 是否禁用 | boolean | false |
| image | 图片 | string | - |
| readonly | 是否只读 | boolean | false |
| title | 标题 | string | - |
| value | 值 | string | - |
| 参数 | 说明 | 类型 | 默认值 |
| ----------- | -------- | ------- | ------ |
| description | 描述 | string | - |
| disabled | 是否禁用 | boolean | false |
| image | 图片 | string | - |
| readonly | 是否只读 | boolean | false |
| title | 标题 | string | - |
| value | 值 | string | - |

@@ -14,10 +14,13 @@ ---

可以折叠/展开的内容区域
可以折叠/展开的内容区域。
## 何时使用
- 对复杂区域进行分组和隐藏,保持页面的整洁
- 手风琴是一种特殊的折叠面板,只允许单个内容区域展开
- 对复杂区域进行分组和隐藏,保持页面的整洁。
- 手风琴是一种特殊的折叠面板,只允许单个内容区域展开。
## 代码示例
### 基本使用
<code src='pages/Collapse/index'></code>

@@ -33,5 +36,6 @@

### 带Checkbox
### 带 Checkbox
<code src="pages/CollapseWithCheckbox/index"></code>
### 更多自定义

@@ -43,19 +47,21 @@

## API
| 属性 | 说明 | 类型 | 默认值 |
| -----|-----|-----|-----|
| accordion | 是否是手风琴模式,仅一个内容被展开 | boolean | false |
| className | 类名 | string | - |
| content | 内容区插槽,接收value、index | slot | - |
| current | 当前展开的索引 | number[] | - |
| defaultCurrent | 当前展开的索引 | number[] | [] |
| items | 折叠面板列表 | [CollapseItem](#collapseitem)[] | [] |
| style | string | 否 | - | 样式 |
| title | 标题插槽,接收value、index | slot | - |
| onChange | 切换面板的回调 | ( current : number[], e: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void |
| 属性 | 说明 | 类型 | 默认值 |
| ---------- | ---------------------------- | ----------- | ------ |
| accordion | 是否是手风琴模式,仅一个内容被展开 | boolean | false |
| className | 类名 | string | - |
| content | 内容区插槽,接收 value、index | slot | - |
| current | 当前展开的索引 | number[] | - |
| defaultCurrent | 当前展开的默认索引 | number[] | [] |
| items | 折叠面板列表 | [CollapseItem](#collapseitem)[] | [] |
| style | 样式 | string | - |
| title | 标题插槽,接收 value、index | slot | - |
| onChange | 切换面板的回调 | (current: number[], e: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void |
### CollapseItem
| 属性 | 说明 | 类型 | 默认值 |
| -----|-----|-----|-----|
| content | 内容 | string | - |
| disabled | 是否禁用 | string | false |
| title | 标题 | string | - |
| 属性 | 说明 | 类型 | 默认值 |
| ---------- | --------- | ------- | ------ |
| content | 内容 | string | - |
| disabled | 是否禁用 | boolean | false |
| title | 标题 | string | - |

@@ -14,20 +14,22 @@ ---

通用卡片容器
通用卡片容器。
## 何时使用
可承载文字、列表、图片、段落等,便于用户浏览内容
当需要承载文字、列表、图片、段落等内容时,使用 Container 容器以方便用户浏览。
## 代码示例
<code src='pages/Container/index'></code>
## API
| 属性 | 说明 | 类型 | 默认值 |
| --------- | ------ | ---- | ------ |
| className | 类名 | string | - |
| headerRight | 头部右侧内容 | slot | - |
| headerInBox | 标题是否在容器中 | boolean | true |
| style | 样式 | string | - |
| title | 标题 | string\|slot | - |
以下是 `Container` 组件的参数列表:
| 属性 | 说明 | 类型 | 默认值 |
| ----------- | ---------------- | ------------ | ------ |
| className | 类名 | string | - |
| headerRight | 头部右侧内容 | slot | - |
| headerInBox | 标题是否在容器中 | boolean | true |
| style | 样式 | string | - |
| title | 标题 | string\|slot | - |
---
nav:

@@ -8,3 +9,5 @@ path: /components

toc: 'content'
---
# DatePicker 时间选择器

@@ -14,98 +17,99 @@

相比较于原生my.datePicker实现了ios跟android端体验一致
相比于原生 `my.datePicker`,实现了 iOS 与 Android 端体验一致。
## 代码示例
<code src='pages/DatePicker/index'></code>
## API
## API
### DatePicker
| 属性 | 说明 | 类型 | 默认值 |
| -----|-----|-----|-----|
| animationType | 动画类型,可选`transform` `position`,默认使用`transform`动画性能更好。由于小程序基础库bug,弹窗内picker-view阴影样式在 iOS 下可能存在样式问题,可暂切换为`position`解决 | string | `transform` |
| className | 类名| string | - |
| defaultValue | 默认选中的时间 | Date | - |
| disabled | 是否禁用 | boolean | false |
| cancelText | 取消文案 | string | 取消 |
| content | 自定义内容插槽 | slot | - |
| format | 时间格式化显示,格式同[dayjs](https://day.js.org/docs/zh-CN/display/format) | string | 'YYYY/MM/DD' |
| indicatorStyle | 选中框样式 | string | - |
| indicatorClassName | 选中框的类名 | string | - |
| maskClassName | 蒙层的类名 | string | - |
| maskClosable | 点击蒙层是否可以关闭 | boolean |true | |
| maskStyle | 蒙层的样式 | string | - |
| max | 最大值 | Date | 十年后 |
| min | 最小值 | Date | 十年前 |
| okText | 确认按钮文案 | string | 确定 |
| placeholder | 提示文案 | string | 请选择 |
| popClassName | 弹出框类名 | string | - |
| popStyle | 弹出框样式 | string | - |
| precision | 选择精度,可选`year` `month` `day` `hour` `minute` `second` | string | `day` |
| prefix | 前缀 | slot | - |
| style | 样式| string | - |
| suffix | 后缀 | slot | - |
| title | 弹出框标题 | string \| slot | - |
| value | 选中的时间 | Date | - |
| onOk | 点击确定按钮,触发回调 | (date: Date, dateStr: string, event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - |
| onCancel | 点击取消按钮/蒙层,触发回调 | (event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - |
| onPickerChange | 选中项发生变化,触发回调 | (date: Date, dateStr: string, event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - |
| onFormat | 选中值的文本显示格式 | (date: Date, dateStr: string) => string | - |
| onFormatLabel | 自定义每列展示的内容,默认添加年、月、日、时、分、秒单位 | (type: `year` \| `month` \| `day` \| `hour` \| `minute` \| `second`, value: number) => string | - |
| onVisibleChange | 弹出框显示/隐藏状态变化触发 | (visible: boolean, (event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - |
| 属性 | 说明 | 类型 | 默认值 |
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | ------------ |
| animationType | 动画类型,可选 `transform` `position`,默认使用 `transform` 动画性能更好。由于小程序基础库 bug,弹窗内 `picker-view` 阴影样式在 iOS 下可能存在样式问题,可暂切换为 `position` 解决。 | string | `transform` |
| className | 类名 | string | - |
| defaultValue | 默认选中的时间 | Date | - |
| disabled | 是否禁用 | boolean | false |
| cancelText | 取消文案 | string | "取消" |
| content | 自定义内容插槽 | slot | - |
| format | 时间格式化显示,格式同 [dayjs](https://day.js.org/docs/zh-CN/display/format) | string | 'YYYY/MM/DD' |
| indicatorStyle | 选中框样式 | string | - |
| indicatorClassName | 选中框的类名 | string | - |
| maskClassName | 蒙层的类名 | string | - |
| maskClosable | 点击蒙层是否可以关闭 | boolean | true |
| maskStyle | 蒙层样式 | string | - |
| max | 最大值 | Date | 十年后 |
| min | 最小值 | Date | 十年前 |
| okText | 确认按钮文案 | string | "确定" |
| placeholder | 提示文案 | string | "请选择" |
| popClassName | 弹出框类名 | string | - |
| popStyle | 弹出框样式 | string | - |
| precision | 选择精度,可选 `year` `month` `day` `hour` `minute` `second` | string | `day` |
| prefix | 前缀 | slot | - |
| style | 样式 | string | - |
| suffix | 后缀 | slot | - |
| title | 弹出框标题 | string \| slot | - |
| value | 选中的时间 | Date | - |
| onOk | 点击确定按钮,触发回调 | (date: Date, dateStr: string, event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - |
| onCancel | 点击取消按钮/蒙层,触发回调 | (event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - |
| onPickerChange | 选中项发生变化,触发回调 | (date: Date, dateStr: string, event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - |
| onFormat | 选中值的文本显示格式 | (date: Date, dateStr: string) => string | - |
| onFormatLabel | 自定义每列展示的内容,默
认添加年、月、日、时、分、秒单位 | (type: `year` \| `month` \| `day` \| `hour` \| `minute` \| `second`, value: number) => string | - |
| onVisibleChange | 弹出框显示/隐藏状态变化触发 | (visible: boolean, event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - |
### RangePicker
| 属性 | 说明 | 类型 | 默认值 |
| -----|-----|-----|-----|
| animationType | 动画类型,可选`transform` `position`,默认使用`transform`动画性能更好。由于小程序基础库bug,弹窗内picker-view阴影样式在 iOS 下可能存在样式问题,可暂切换为`position`解决 | string | `transform` |
| className | 类名| string | - |
| defaultValue | 默认选中的时间 | [Date,Date] | - |
| disabled | 是否禁用 | boolean | false |
| cancelText | 取消文案 | string | 取消 |
| content | 自定义内容插槽 | slot | - |
| endPlaceholder | 结束时间提示文案 | string | 未选择 |
| format | 时间格式化显示,格式同[dayjs](https://day.js.org/docs/zh-CN/display/format) | string | 'YYYY/MM/DD' |
| indicatorStyle | 选中框样式 | string | - |
| indicatorClassName | 选中框的类名 | string | - |
| maskClassName | 蒙层的类名 | string | - |
| maskClosable | 点击蒙层是否可以关闭 | boolean |true | |
| maskStyle | 蒙层的样式 | string | - |
| max | 最大值 | Date | 十年后 |
| min | 最小值 | Date | 十年前 |
| okText | 确认按钮文案 | string | '确定' |
| placeholder | 提示文案 | string | '请选择' |
| popClassName | 弹出框类名 | string | - |
| popStyle | 弹出框样式 | string | - |
| precision | 选择精度,可选`year` `month` `day` `hour` `minute` | string | `day` |
| splitCharacter | 显示连接符 | string | - |
| startPlaceholder | 开始时间提示文案 | string | 未选择 |
| prefix | 前缀 | slot | - |
| style | 样式| string | - |
| suffix | 后缀 | slot | - |
| title | 弹出框标题 | string \| slot| - |
| value | 选中的时间 | [Date, Date] | - |
| onOk | 点击确定按钮,触发回调 | (date: [Date,Date], dateStr: [string,string], event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - |
| onCancel | 点击取消按钮/蒙层,触发回调 | (event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - |
| onPickerChange | 选中项发生变化,触发回调 | (type: `start`\|`end`, date: Date, dateStr: string, event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - |
| onFormat | 选中值的文本显示格式 | (date: [Date,Date], dateStr: [string,string]) => string | - |
| onFormatLabel | 自定义每列展示的内容,默认添加年、月、日、时、分、秒单位 | (type: `year` \| `month` \| `day` \| `hour` \| `minute`, value: number) => string | - |
| onVisibleChange | 弹出框显示/隐藏状态变化触发 | (visible: boolean, (event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - |
| 属性 | 说明 | 类型 | 默认值 |
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- | ------------ |
| animationType | 动画类型,可选 `transform` `position`,默认使用 `transform` 动画性能更好。由于小程序基础库 bug,弹窗内 `picker-view` 阴影样式在 iOS 下可能存在样式问题,可暂切换为 `position` 解决。 | string | `transform` |
| className | 类名 | string | - |
| defaultValue | 默认选中的时间范围 | [Date, Date] | - |
| disabled | 是否禁用 | boolean | false |
| cancelText | 取消文案 | string | "取消" |
| content | 自定义内容插槽 | slot | - |
| endPlaceholder | 结束时间提示文案 | string | "未选择" |
| format | 时间格式化显示,格式同 [dayjs](https://day.js.org/docs/zh-CN/display/format) | string | 'YYYY/MM/DD' |
| indicatorStyle | 选中框样式 | string | - |
| indicatorClassName | 选中框的类名 | string | - |
| maskClassName | 蒙层的类名 | string | - |
| maskClosable | 点击蒙层是否可以关闭 | boolean | true |
| maskStyle | 蒙层样式 | string | - |
| max | 最大值 | Date | 十年后 |
| min | 最小值 | Date | 十年前 |
| okText | 确认按钮文案 | string | "确定" |
| placeholder | 提示文案 | string | "请选择" |
| popClassName | 弹出框类名 | string | - |
| popStyle | 弹出框样式 | string | - |
| precision | 选择精度,可选 `year` `month` `day` `hour` `minute` | string | `day` |
| splitCharacter | 显示连接符 | string | - |
| startPlaceholder | 开始时间提示文案 | string | "未选择" |
| prefix | 前缀 | slot | - |
| style | 样式 | string | - |
| suffix | 后缀 | slot | - |
| title | 弹出框标题 | string \| slot | - |
| value | 选中的时间范围 | [Date, Date] | - |
| onOk | 点击确定按钮,触发回调 | (date: [Date, Date], dateStr: [string, string], event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - |
| onCancel | 点击取消按钮/蒙层,触发回调 | (event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - |
| onPickerChange | 选中项发生变化,触发回调 | (type: `start` \| `end`, date: Date, dateStr: string, event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - |
| onFormat | 选中值的文本显示格式 | (date: [Date, Date], dateStr: [string, string]) => string | - |
| onFormatLabel | 自定义每列展示的内容,默认添加年、月、日、时、分、秒单位 | (type: `year` \| `month` \| `day` \| `hour` \| `minute`, value: number) => string | - |
| onVisibleChange | 弹出框显示/隐藏状态变化触发 | (visible: boolean, event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - |
## 如何获取 `YYYY-MM-DD` 格式的时间
## 如何获取 YYYY-MM-DD 格式的时间
DatePicker 组件返回的时间格式为 `Date` 类型,如果需要转换为 `YYYY-MM-DD` 格式,可以使用 [dayjs](https://day.js.org/docs/zh-CN/display/format) 进行转换。
data picker 组件返回的时间格式为 `Date` 类型,如果需要转换为 `YYYY-MM-DD` 格式,可以使用 [dayjs](https://day.js.org/docs/zh-CN/display/format) 进行转换。
```
```xml
<date-picker onOk="handleOk" />
```
```js
```javascript
Page({
handleOk(date){
const dateStr = dayjs(date).format('YYYY-MM-DD')
console.log(dateStr)
handleOk(date) {
const dateStr = dayjs(date).format('YYYY-MM-DD');
console.log(dateStr);
}
})
});
```

@@ -13,3 +13,3 @@ ---

区隔内容的分割线
区隔内容的分割线。

@@ -24,18 +24,16 @@ ## 何时使用

## API
| 属性 | 说明 | 类型 | 默认值 |
| -----|-----|-----|----- |
| className | 根节点类名 | string | - |
| direction | 分割线方向,可选`horizontal` `vertical` | string | `horizontal` |
| lineColor | 分割线颜色 | string | - |
| lineHeight | 分割线高,仅当 `direction` 为 `horizontal` 时生效,单位 `px` | number | - |
| lineType | 分割线类型,可选`solid` `dashed` `dotted` | string | - |
| lineWidth | 分割线宽,仅当 `direction` 为 `vertical` 时生效,单位 `px` | number | - |
| style | 样式 | string | - |
| textClassName | 分割线文字类名 | string | - |
| textPosition | 分割线文字位置,可选`left` `center` `right` | string | `center` |
| textStyle | 分割线文字样式 | string | - |
| text | 分割线文字 | string \| slot | - |
| 属性 | 说明 | 类型 | 默认值 |
| ---------- | ----------------------- | ------------ | ------------- |
| className | 根节点类名 | string | - |
| direction | 分割线方向,可选 `horizontal` `vertical` | string | `horizontal` |
| lineColor | 分割线颜色 | string | - |
| lineHeight | 分割线高度,仅当 `direction` 为 `horizontal` 时生效,单位为 `px` | number | - |
| lineType | 分割线类型,可选 `solid` `dashed` `dotted` | string | - |
| lineWidth | 分割线宽度,仅当 `direction` 为 `vertical` 时生效,单位为 `px` | number | - |
| style | 样式 | string | - |
| textClassName | 分割线文字类名 | string | - |
| textPosition | 分割线文字位置,可选 `left` `center` `right` | string | `center` |
| textStyle | 分割线文字样式 | string | - |
| text | 分割线文字 | string \| slot | - |

@@ -14,20 +14,20 @@ ---

使用场景插画来作为空状态场景的反馈提示。
使用场景插画来作为空状态场景的反馈提示
## 何时使用
需要展示空状态页面或者局部空状态区块时使用
需要展示空状态页面或者局部空状态区块时使用。
## 代码示例
<code src='pages/Empty/index'></code>
## API
| 属性 | 说明 | 类型 | 默认值 |
| -----|-----|-----|----- |
| className | 根节点类名 | string | - |
| title | 标题文案 | string \| slot | - |
| image | 图片,可传入字符串作为图片地址 | string \| slot | - |
| message | 描述文案 | string \| slot | - |
| style | 样式 | string | - |
| 属性 | 说明 | 类型 | 默认值 |
| ---------- | ----------------- | -------------- | ------ |
| className | 根节点类名 | string | - |
| title | 标题文案 | string \| slot | - |
| image | 图片,可传入字符串作为图片地址 | string \| slot | - |
| message | 描述文案 | string \| slot | - |
| style | 样式 | string | - |

@@ -5,5 +5,5 @@ {

"form-item": "../FormItem/index",
"cascader-picker": "../../Picker/CascaderPicker/index",
"icon": "../../Icon/index"
"ant-cascader-picker": "../../Picker/CascaderPicker/index",
"ant-icon": "../../Icon/index"
}
}

@@ -7,2 +7,3 @@ import { useEvent } from 'functional-mini/component';

import { FormDatePickerDefaultProps } from './props';
import { platform } from '../../_util/platform';
var FormDatePicker = function (props) {

@@ -12,3 +13,3 @@ var _a = useFormItem(props), formData = _a.formData, emit = _a.emit;

useMultipleValueHandleCustomEvent('onOk', function (date, dateStr, e) {
emit('onChange', date);
emit('onChange', platform() === 'wechat' ? date.getTime() : date);
triggerEventValues('ok', [date, dateStr], e);

@@ -15,0 +16,0 @@ });

@@ -5,5 +5,5 @@ {

"form-item": "../FormItem/index",
"date-picker": "../../DatePicker/index",
"icon": "../../Icon/index"
"ant-date-picker": "../../DatePicker/index",
"ant-icon": "../../Icon/index"
}
}

@@ -5,5 +5,5 @@ {

"form-item": "../FormItem/index",
"picker": "../../Picker/index",
"icon": "../../Icon/index"
"ant-picker": "../../Picker/index",
"ant-icon": "../../Icon/index"
}
}

@@ -5,4 +5,4 @@ {

"form-item": "../FormItem/index",
"radio-group": "../../Radio/RadioGroup/index"
"ant-radio-group": "../../Radio/RadioGroup/index"
}
}

@@ -5,2 +5,3 @@ import { useEvent } from 'functional-mini/component';

import { useHandleCustomEvent, useHandleCustomEventOnly, useMultipleValueHandleCustomEvent, } from '../../_util/hooks/useHandleCustomEvent';
import { platform } from '../../_util/platform';
import { useFormItem } from '../use-form-item';

@@ -12,3 +13,8 @@ import { FormRangePickerDefaultProps } from './props';

useMultipleValueHandleCustomEvent('onOk', function (date, dateStr, e) {
emit('onChange', date);
emit('onChange', date.map(function (o) {
if (platform() === 'wechat') {
return o.getTime();
}
return o;
}));
triggerEventValues('ok', [date, dateStr], e);

@@ -15,0 +21,0 @@ });

@@ -5,5 +5,5 @@ {

"form-item": "../FormItem/index",
"range-picker": "../../DatePicker/RangePicker/index",
"icon": "../../Icon/index"
"ant-range-picker": "../../DatePicker/RangePicker/index",
"ant-icon": "../../Icon/index"
}
}

@@ -14,8 +14,8 @@ ---

Form 表单。包含数据录入、校验以及对应样式。Form 组件需要 [component2](https://opendocs.alipay.com/mini/framework/custom-component-overview)。
Form 表单包含数据录入、校验以及相应的样式。Form 组件需要 [component2](https://opendocs.alipay.com/mini/framework/custom-component-overview) 支持。
## 何时使用
- 用于创建一个实体或收集信息
- 需要对输入的数据类型进行校验时
- 用于创建实体或收集信息。
- 需要对输入的数据类型进行校验时。

@@ -72,3 +72,3 @@ ## 代码示例

### json 生成表单
### JSON 生成表单

@@ -79,3 +79,3 @@ <code src='pages/FormJSON/index'></code>

使用 validateStatus: success 及 footer slot 来自定义错误样式。
使用 `validateStatus: success` 及 `footer slot` 来自定义错误样式。
<code src='pages/FormCustomError/index'></code>

@@ -85,4 +85,5 @@

通过使用 [FormItem](#formitem)、[createForm](#createform) 可自定义表单项。示例里 `form-checklist`, `form-location` 为自定义表单项组件。
通过使用 [FormItem](#formitem)、[createForm](#createform) 可自定义表单项。示例里 `form-checklist`、`form-location` 为自定义表单项组件。
<code src='pages/FormCustom/index'></code>
```

@@ -110,9 +111,11 @@ ## API

### Form
| 属性 | 说明 | 类型 |
| ---------------- | ---------------- | ----------------------------------------- |
| rules | 可选,校验规则 | 查看[rules](#rules) |
| initialValues | 可选,初始值 | Record<string, any> |
| validateMessages | 可选,校验消息。 | 查看[validateMessages](#validatemessages) |
| 属性 | 说明 | 类型 |
| ---------------- | -------------- | ----------------------------------------- |
| rules | 可选,校验规则 | 查看[rules](#rules) |
| initialValues | 可选,初始值 | Record<string, any> |
| validateMessages | 可选,校验消息 | 查看[validateMessages](#validatemessages) |

@@ -124,7 +127,7 @@ ### Form 实例方法

| addItem | 添加表单项 | (formItem: Ref) => void |
| updateRules | 更新 form 的校验规则, 每次都需要传入全量的 rules | (rules:Rules) =>void, Rules 的类型可以看[rules](#rules) |
| updateRules | 更新 form 的校验规则,每次都需要传入全量的 rules | (rules: Rules) => void, Rules 的类型可以查看[rules](#rules) |
| getFieldValue | 得到表单项的值 | (name: string) => any |
| getFieldsValue | 获取一组字段名对应的值。不传 nameList 则返回全部 fields 对 | (nameList?: string[]) => Record<string, any> |
| getFieldValidatorStatus | 得到表单校验状态 | (name: string) => [ValidatorStatus](#validatorstatus) |
| getFieldsValidatorStatus | 得到一组表单校验状态。。不传 nameList 则返回全部 fields 对 | (nameList?: string[]) => Record<string, [ValidatorStatus](#validatorstatus)}> |
| getFieldsValidatorStatus | 得到一组表单校验状态。不传 nameList 则返回全部 fields 对 | (nameList?: string[]) => Record<string, [ValidatorStatus](#validatorstatus)> |
| reset | 重置表单为初始值 | () => void |

@@ -143,3 +146,3 @@ | isFieldTouched | 判断表单项是否被修改过 | () => boolean |

当字段间存在依赖关系时使用。如果一个字段设置了 dependencies 属性。那么它所依赖的字段更新时,该字段将自动触发更新与校验。一种常见的场景,就是注册用户表单的“密码”与“确认密码”字段。“确认密码”校验依赖于“密码”字段,设置 dependencies 后,“密码”字段更新会重新触发“校验密码”的校验。
当字段间存在依赖关系时使用。例如注册用户表单的“密码”与“确认密码”字段,其中“确认密码”校验依赖于“密码”字段。设置 `dependencies` 后,“密码”字段更新将自动触发“确认密码”的校验。

@@ -150,3 +153,3 @@ ### rules

```js
```javascript
{

@@ -174,3 +177,3 @@ account: [

}
throw new Error('验证密码需要跟密码相同');
throw new Error('两次密码需一致');
},

@@ -182,3 +185,3 @@ }),

rules 可以在 new Form 里设置,还可以在 FormItem 里通过 `required`, `message` 属性加上。
`rules` 可以在 `new Form` 中设置,也可以在 `FormItem` 通过 `required` 或 `message` 属性设置。

@@ -192,3 +195,3 @@ ```html

ref="handleRef"
/>
></form-input>
```

@@ -198,7 +201,7 @@

可查看[message](https://github.com/yiminghe/async-validator/blob/master/src/messages.ts#L4-L55) antd-mini 在这个 message 上加上了 `${label}`,`${len}`,`${min}`,`${max}`,`${pattern}`
可以参考 [Asynchronous validator](https://github.com/yiminghe/async-validator/blob/master/src/messages.ts#L4-L55) 的 message,antd-mini 在此基础上加了 `${label}`,`${len}`,`${min}`,`${max}`,`${pattern}`。
示例:
```js
```javascript
{

@@ -210,3 +213,3 @@ required: '需要输入${label}',

pattern: {
mismatch: '${label}需要满足${pattern}',
mismatch: '${label}需要满足${pattern}模式',
},

@@ -216,7 +219,7 @@ }

### onValueChange,onValuesChange
### onValueChange 和 onValuesChange
setFieldValue,setFieldsValue 不会触发 onValueChange, onValuesChange。onValueChange, onValuesChange 只会被用户操作才会触发。要是你需要在 setFieldValue,setFieldsValue 之后想要去触发 onValueChange, onValuesChange,你可以手动去调用 onValueChange, onValuesChange 方法。
`setFieldValue` 和 `setFieldsValue` 不会触发 `onValueChange` 和 `onValuesChange`。`onValueChange` 和 `onValuesChange` 只有在用户操作时才会被触发。如果在 `setFieldValue` 或 `setFieldsValue` 之后想要触发 `onValueChange` 或 `onValuesChange`,你需要手动调用这些方法。
示例:
**示例**:

@@ -243,8 +246,8 @@ ```js

### submit 校验抛出错误
### submit 校验和抛出错误
```js
{
values: Record<string, any>
errorFileds: {
values: Record<string, any>,
errorFields: {
name: string;

@@ -258,86 +261,86 @@ errors: string[];

同 Input
与 `Input` 相同。
### FormTextarea
同 Textarea
与 `Textarea` 相同。
### FormSwitch
同 Switch
与 `Switch` 相同。
### FormStepper
同 Stepper,添加:
与 `Stepper` 相同,但添加了如下属性:
| 属性 | 说明 | 类型 | 默认值 |
| ---------------- | --------------------------- | ------ | ------ |
| stepperClassName | 对应 Stepper 组件 className | string | - |
| stepperStyle | 对应 Stepper 组件 style | string | - |
| 属性 | 说明 | 类型 | 默认值 |
| ---------------- | --------------------------------- | ------ | ------ |
| stepperClassName | 对应 `Stepper` 组件的 `className` | string | - |
| stepperStyle | 对应 `Stepper` 组件的 `style` | string | - |
### FormCheckGroup
同 CheckGroup,添加:
与 `CheckGroup` 相同,但添加了如下属性:
| 属性 | 说明 | 类型 | 默认值 |
| ---------------- | ----------------------------- | ------ | ------ |
| checkboxLabel | 对应 CheckGroup 组件 label | slot | - |
| checkboxPosition | 对应 CheckGroup 组件 position | string | - |
| 属性 | 说明 | 类型 | 默认值 |
| ---------------- | ----------------------------------- | ------ | ------ |
| checkboxLabel | 对应 `CheckGroup` 组件的 `label` | slot | - |
| checkboxPosition | 对应 `CheckGroup` 组件的 `position` | string | - |
### FormRadioGroup
同 RadioGroup,添加:
与 `RadioGroup` 相同,但添加了如下属性:
| 属性 | 说明 | 类型 | 默认值 |
| ------------- | ----------------------------- | ------ | ------ |
| radioLabel | 对应 RadioGroup 组件 label | slot | - |
| radioPosition | 对应 RadioGroup 组件 position | string | - |
| 属性 | 说明 | 类型 | 默认值 |
| ------------- | ----------------------------------- | ------ | ------ |
| radioLabel | 对应 `RadioGroup` 组件的 `label` | slot | - |
| radioPosition | 对应 `RadioGroup` 组件的 `position` | string | - |
### FormPicker
同 Picker,添加:
与 `Picker` 相同,但添加了如下属性:
| 属性 | 说明 | 类型 | 默认值 |
| ----- | ---------------------------------------------------- | ----------------- | ------ |
| arrow | 右侧箭头,可选`right` `up` `down`,传 true 为`right` | string \| boolean | - |
| 属性 | 说明 | 类型 | 默认值 |
| ----- | -------------------------------------------------------- | ----------------- | ------ |
| arrow | 右侧箭头,可选 `right`、`up`、`down`,传 true 为 `right` | string \| boolean | - |
### FormDatePicker
同 DatePicker,添加:
与 `DatePicker` 相同,但添加了如下属性:
| 属性 | 说明 | 类型 | 默认值 |
| ----- | ---------------------------------------------------- | ----------------- | ------ |
| arrow | 右侧箭头,可选`right` `up` `down`,传 true 为`right` | string \| boolean | - |
| 属性 | 说明 | 类型 | 默认值 |
| ----- | -------------------------------------------------------- | ----------------- | ------ |
| arrow | 右侧箭头,可选 `right`、`up`、`down`,传 true 为 `right` | string \| boolean | - |
### FormRangePicker
同 RangePicker,添加:
与 `RangePicker` 相同,但添加了如下属性:
| 属性 | 说明 | 类型 | 默认值 |
| ----- | ---------------------------------------------------- | ----------------- | ------ |
| arrow | 右侧箭头,可选`right` `up` `down`,传 true 为`right` | string \| boolean | - |
| 属性 | 说明 | 类型 | 默认值 |
| ----- | -------------------------------------------------------- | ----------------- | ------ |
| arrow | 右侧箭头,可选 `right`、`up`、`down`,传 true 为 `right` | string \| boolean | - |
### FormCascaderPicker
同 CascaderPicker,添加:
与 `CascaderPicker` 相同,但添加了如下属性:
| 属性 | 说明 | 类型 | 默认值 |
| ----- | ---------------------------------------------------- | ----------------- | ------ |
| arrow | 右侧箭头,可选`right` `up` `down`,传 true 为`right` | string \| boolean | - |
| 属性 | 说明 | 类型 | 默认值 |
| ----- | -------------------------------------------------------- | ----------------- | ------ |
| arrow | 右侧箭头,可选 `right`、`up`、`down`,传 true 为 `right` | string \| boolean | - |
### FormSlider
同 Slider
与 `Slider` 相同。
### FormSelector
同 Selector
与 `Selector` 相同。
### FormImageUpload
同 ImageUpload
与 `ImageUpload` 相同。
### createForm
createForm 是一个 mixin,在自定义表单项使用
`createForm` 是一个 `mixin`,用于自定义表单项。

@@ -357,5 +360,5 @@ ```js

createForm 会在 Component 加上
`createForm` 会为组件增加以下内容:
- data
- `data`

@@ -366,3 +369,3 @@ ```js

value: undefined, // 表单项的值
status: 'default', // 表单项校验状态,包括 default, success, error, validating
status: 'default', // 表单项的校验状态,包括 `default`、`success`、`error`、`validating`
errors: [], // 错误信息

@@ -373,9 +376,9 @@ },

- methods
- `methods`
```js
// 表单项修改需要调用emit方法。需要自定义表单项组件在值修改去调用。
function emit(trigger: 'onChange' | 'onBlur' | 'onFocus' , value: any): void;
// 修改表单项时,需调用 `emit` 方法。自定义表单项组件在值改变时,应该调用此方法。
function emit(trigger: 'onChange' | 'onBlur' | 'onFocus', value: any): void;
```
更多方法可查看 createForm 方法。使用`formData`, `emit` 即可完成自定义表单项。
想要了解更多方法,请参考 `createForm` 方法相关文档。使用 `formData` 和 `emit` 即可完成自定义表单项的实现。

@@ -9,2 +9,3 @@ ---

---
# Grid 宫格

@@ -17,33 +18,33 @@

## 代码示例
<code src='pages/Grid/index'></code>
## API
| 属性 | 说明 | 类型 | 默认值 |
| -----|-----|-----|-----|
| className | 类名| string | - |
| columns | 每行展示的元素个数,`default`模式生效 | number | 5 |
| description | 描述插槽,接收value、index | slot | - |
| gridItemLayout | item布局,可选`vertical`(垂直) `horizontal`(水平) | string | `vertical` |
| icon | 图标插槽,接收value、index | slot | - |
| iconSize | 图标尺寸,单位px | number | - |
| iconStyle | 图标样式类型,可选`normal` `circle` | string | `normal` |
| items | 内容文字 | [GridItem](#griditem)[] | - |
| mode | 样式类型,可选`default`(平铺) `scroll`(滑动) | string | `default` |
| paginationFillColor | 分页符背景色,`scroll`模式生效 | string | - |
| paginationFrontColor | 分页符颜色,`scroll`模式生效 | string | - |
| showDivider | 是否展示分割线 | boolean | - |
| style | 样式 | string | - |
| title | 标题插槽,接收value、index | slot | - |
| onTap | 点击每个元素触发 | (item: [GridItem](#griditem) ) => void |
| onFirstAppear | 当前元素首次可见面积达到50%时触发 | (item: [GridItem](#griditem) ) => void |
| 属性 | 说明 | 类型 | 默认值 |
| ------------------|----------------|----------------------------|------------|
| className | 类名 | string | - |
| columns | 每行展示的元素个数,`default` 模式生效 | number | 5 |
| description | 描述插槽,接收 value、index | slot | - |
| gridItemLayout | item 布局,可选 `vertical`(垂直)`horizontal`(水平) | string | `vertical` |
| icon | 图标插槽,接收 value、index | slot | - |
| iconSize | 图标尺寸,单位 px | number | - |
| iconStyle | 图标样式类型,可选 `normal` `circle` | string | `normal` |
| items | 内容文字 | [GridItem](#griditem)[] | - |
| mode | 样式类型,可选 `default`(平铺)`scroll`(滑动)| string | `default` |
| paginationFillColor | 分页符背景色,`scroll` 模式生效 | string | - |
| paginationFrontColor | 分页符颜色,`scroll` 模式生效 | string | - |
| showDivider | 是否展示分割线 | boolean | - |
| style | 样式 | string | - |
| title | 标题插槽,接收 value、index | slot | - |
| onTap | 点击每个元素触发 | (item: [GridItem](#griditem)) => void | |
| onFirstAppear | 当前元素首次可见面积达到 50% 时触发 | (item: [GridItem](#griditem)) => void | |
#### GridItem
| 参数 | 说明 | 类型 | 默认值 |
| -----|-----|-----|-----|
| description | 描述 | string | - |
| icon | 图标,支持图片和[Icon](./Icon)| string | - |
| iconStyle | 图标样式类型,优先级高于grid,可选`normal` `circle` | string | - |
| title | 标题 | string | - |
| 参数 | 说明 | 类型 | 默认值 |
| ------------|------------|----------|---------|
| description | 描述 | string | - |
| icon | 图标,支持图片和 [Icon](./Icon) | string | - |
| iconStyle | 图标样式类型,优先级高于 grid,可选 `normal` `circle` | string | - |
| title | 标题 | string | - |

@@ -14,5 +14,4 @@ ---

蒙层与自定义卡片的引导组件。
蒙层与自定义卡片的引导组件
## 何时使用

@@ -23,27 +22,29 @@

## 代码示例
<code src='pages/GuideTour/index'></code>
## API
| 属性 | 说明 | 类型 | 默认值 |
| -----|-----|-----|-----|
| className | 类名 | string | - |
| current | 当前步骤 | number | - |
| defaultCurrent | 默认当前步骤 | number | 0 |
| items | 步骤信息 | [GuideTourItem](#guidetourttem)[] | - |
| maskClassName | 蒙层的类名 | string | - |
| maskStyle | 蒙层的样式 | string | - |
| style | 样式 | string | - |
| swiperable | 是否开启滑动模式 | boolean | false |
| visible | 是否显示 | boolean | false |
| onCancel | 关闭回调 | () => void | - |
| onChange | 步骤改变回调 | (index: number) => void | - |
| 属性 | 说明 | 类型 | 默认值 |
| ------------- | -------------- | ---------------------------- | ------ |
| `className` | 类名 | `string` | - |
| `current` | 当前步骤 | `number` | - |
| `defaultCurrent` | 默认当前步骤 | `number` | 0 |
| `items` | 步骤信息 | [`GuideTourItem`](#guidetourttem)[] | - |
| `maskClassName` | 蒙层的类名 | `string` | - |
| `maskStyle` | 蒙层的样式 | `string` | - |
| `style` | 样式 | `string` | - |
| `swiperable` | 是否开启滑动模式 | `boolean` | `false`|
| `visible` | 是否显示 | `boolean` | `false`|
| `onCancel` | 关闭回调 | `() => void` | - |
| `onChange` | 步骤改变回调 | `(index: number) => void` | - |
### GuideTourItem
| 参数 | 说明 | 类型 | 默认值 |
| -----|-----|-----|-----|
| left | 距离左边距离,单位px | number | - |
| imageMode | 图片模式,同 image 的 mode | string | - |
| imageStyle | 图片内联样式 | string | - |
| imageUrl | 图片地址 | string | - |
| top | 距离顶部距离,单位px | number | - |
| 参数 | 说明 | 类型 | 默认值 |
| ---------- | -------------------------- | -------- | ------ |
| `left` | 距离左边距离,单位 `px` | `number` | - |
| `imageMode` | 图片模式,同 image 的 mode | `string` | - |
| `imageStyle` | 图片内联样式 | `string` | - |
| `imageUrl` | 图片地址 | `string` | - |
| `top` | 距离顶部距离,单位 `px` | `number` | - |

@@ -14,11 +14,16 @@ ---

语义化的矢量图形
语义化的矢量图形。
## 何时使用
需要使用图形来对基础操作功能进行隐喻呈现,给予用户正确、友好且清晰的操作指引
当需要使用图形来对基础操作功能进行隐喻呈现,并给予用户正确、友好且清晰的操作指引时,可以使用 Icon 图标。
## 图标列表
搜索查看,点击图标可复制
搜索并查看图标,点击图标可进行复制。
<Icon />
## 代码示例
<code src='pages/Icon/index' noChangeButton></code>

@@ -28,8 +33,9 @@

## API
| 属性 | 说明 | 类型 | 默认值 |
| -----|-----|-----|-----|
| className | 类名 | string | - |
| style | 样式 | string | - |
| type | icon 图标的类型 | string | - |
| catchTap | 点击按钮,触发此回调 | (e: Event) => void | - |
| onTap | 点击按钮,触发此回调 | (e: Event) => void | - |
| 属性 | 说明 | 类型 | 默认值 |
| :--------- | :------------------------- | :------------------------- | :----- |
| className | 类名 | string | - |
| style | 样式 | string | - |
| type | 图标的类型 | string | - |
| catchTap | 点击图标时触发的回调函数 | (e: Event) => void | - |
| onTap | 点击图标时触发的回调函数 | (e: Event) => void | - |

@@ -13,10 +13,10 @@ ---

用于将图片上传到服务器,并简略展示上传文件的信息及提供预览功能。
用于将图片上传到服务器,并简略展示上传文件的信息以及提供预览功能。
## 何时使用
需要将本地图片或拍照后上传到服务器时使用
需要将本地图片或拍照后上传到服务器时使用。
## 代码示例
### 基本使用

@@ -33,35 +33,38 @@

| 属性 | 说明 | 类型 | 默认值 |
| -----|-----|-----|-----|
| className | 类名| string | - |
| maxCount | 上传图片限制的最大数量,默认不限制上传数量。详见[maxCount](#maxcount) | number | - |
| defaultFileList | 文件列表初始值 | [File](#file)[] | [] |
| sourceType | 上传选择的来源,可选 `[album]` `[camera]` `['album', 'camera']` | string[] | ['album', 'camera'] |
| style | 样式| string | - |
| fileList | 文件列表(受控) | [File](#file)[] | - |
| imageMode | 图片缩放模式和裁剪模式,详见[图片mode说明](https://opendocs.alipay.com/mini/component/image#mode) | string | scaleToFill |
| onBeforeUpload | 上传文件之前的钩子,参数为上传的文件列表,若返回 false 则停止上传。支持返回一个 Promise 对象,Promise 对象 reject 时则停止上传,resolve 时开始上传( resolve 传入修改后的 localFileList ) | (localFileList: [localFile](#localfile)[]) => boolean \| Promise<[localFile](#localfile)[]> | - |
| onChooseImageError | 选择图片失败回调,详见[onChooseImageError](###onChooseImageError) | (err) => void | - |
| onUpload | 图片上传方法,详见[onUpload](#onupload) | (localFile: [LocalFile](#localfile)) => Promise\<string\> | - |
| onChange | 已上传的文件列表变化时触发 | (fileList: [File](#file)[]) => void | - |
| onRemove | 点击移除文件时的回调,返回值为 false 时不移除。支持返回一个 Promise 对象,Promise 对象 resolve(false) 或 reject 时不移除 | (file: [File](#file)) => boolean \| Promise\<boolean\> | - |
| ------ | -------- | ------ | ------- |
| className | 类名 | string | - |
| maxCount | 上传图片限制的最大数量。详见 [maxCount](#maxcount) | number | - |
| defaultFileList | 文件列表初始值 | [File](#file)[] | [] |
| sourceType | 上传选择的来源。可选 `['album']`、`['camera']` 或 `['album', 'camera']` | string[] | ['album', 'camera'] |
| style | 样式 | string | - |
| fileList | 文件列表(受控) | [File](#file)[] | - |
| imageMode | 图片缩放模式和裁剪模式。详见 [图片 mode 说明](https://opendocs.alipay.com/mini/component/image#mode) | string | scaleToFill |
| onBeforeUpload | 上传文件之前的钩子。参数为上传的文件列表,若返回 false 则停止上传。支持返回一个 Promise 对象,Promise 对象 reject 时则停止上传,resolve 时开始上传(resolve 传入修改后的 localFileList) | (localFileList: [localFile](#localfile)[]) => boolean \| Promise<[localFile](#localfile)[]> | - |
| onChooseImageError | 选择图片失败回调。详见 [onChooseImageError](###onChooseImageError) | (err) => void | - |
| onUpload | 图片上传方法。详见 [onUpload](#onupload) | (localFile: [LocalFile](#localfile)) => Promise\<string\> | - |
| onChange | 已上传的文件列表变化时触发 | (fileList: [File](#file)[]) => void | - |
| onRemove | 点击移除文件时的回调。返回值为 false 时不移除。支持返回一个 Promise 对象,Promise 对象 resolve(false) 或 reject 时不移除 | (file: [File](#file)) => boolean \| Promise\<boolean\> | - |
| onPreview | 点击图片时触发 | (file: [File](#file)[]) => void | - |
### File
### File
| 参数 | 说明 | 类型 | 默认值 |
| -----|-----|-----|-----|
| url | 图片url | string | - |
| status | 上传状态,可选 `uploading`(上传中) `done`(上传完成) `error`(上传失败) | string | - |
| uid? | 唯一标识符,不设置时会自动生成 | string | - |
| path? | 本地图片路径 | string | - |
| size? | 本地图片大小,有的机型可能没有返回这个属性 | number | - |
| ------ | ------- | ------ | ------- |
| url | 图片 url | string | - |
| status | 上传状态。可选 `uploading`(上传中)、`done`(上传完成)或 `error`(上传失败) | string | - |
| uid | 唯一标识符。不设置时会自动生成 | string | - |
| path | 本地图片路径 | string | - |
| size | 本地图片大小。有的机型可能没有返回这个属性 | number | - |
### LocalFile
| 参数 | 说明 | 类型 | 默认值 |
| -----|-----|-----|-----|
| path | 本地图片路径 | string | - |
| size? | 本地图片大小,有的机型可能没有返回这个属性 | number | - |
| ----- | ----- | ----- | ----- |
| path | 本地图片路径 | string | - |
| size | 本地图片大小。有的机型可能没有返回这个属性 | number | - |
### onUpload
onUpload方法接收LocalFile,在Promise里返回File。这里调用 [my.uploadFile](https://opendocs.alipay.com/mini/api/kmq4hc) 进行上传:
`onUpload` 方法接收 `LocalFile`,在 Promise 里返回 `File`。以下是调用 [my.uploadFile](https://opendocs.alipay.com/mini/api/kmq4hc) 进行上传的示例代码:
```js

@@ -73,14 +76,12 @@ onUpload(localFile) {

fileType: 'image',
name: 'userfile', // 这里根据后台服务需求来替换
filePath: localFile.path, // 这里传入 localFile.path
formData: { extra: '其他信息' }, // 这里根据后台服务需求来替换
name: 'userfile', // 根据后台服务需求替换
filePath: localFile.path, // 传入 localFile.path
formData: { extra: '其他信息' }, // 根据后台服务需求替换
success: res => {
// 这里根据后台返回,得到上传成功的图片url
// 根据后台返回,得到上传成功的图片 url
const { url } = JSON.parse(res.data);
// 调用resolve传入图片url
resolve(url);
resolve(url); // 调用 resolve 传入图片 url
},
fail: err => {
// 上传错误调用reject
reject();
reject(); // 上传错误调用 reject
},

@@ -93,3 +94,5 @@ });

### onChooseImageError
选择图片可能会失败,使用onChooseImageError得到错误,可查看[my.chooseimage错误码](https://opendocs.alipay.com/mini/api/media/image/my.chooseimage#%E9%94%99%E8%AF%AF%E7%A0%81)
选择图片可能会失败,`onChooseImageError` 可获取错误,可以查看 [my.chooseImage 错误码](https://opendocs.alipay.com/mini/api/media/image/my.chooseimage#%E9%94%99%E8%AF%AF%E7%A0%81)。
```js

@@ -102,3 +105,4 @@ onChooseImageError(err) {

### maxCount
1. `maxCount` 意思是最多可以上传图片的数量,不传表示没有限制。但由于小程序选择图片界面一次性有选择图片上限,比如是9个图片,如果`maxCount`比这个上限大,则会需要多上传几次。比如maxCount="{{10}}",可以上传10个图片,那么用户需要先选择9个图片上传,之后再点上传按钮上传1个图片。
2. `maxCount` 不会限制`defaultFileList`及`fileList`,比如`maxCount`为1,但是传的`defaultFileList`里有2个图片,则不会减少`defaultFileList`里的图片,只是上传按钮会隐藏。
1. `maxCount` 表示最多可以上传的图片数量,不传表示无限制。由于小程序选择图片界面有一次性选择图片的上限,如果 `maxCount` 大于此上限,则需要多次上传。例如,`maxCount="{{10}}"`,允许上传 10 张图片,用户需先上传 9 张,之后再上传 1 张。
2. `maxCount` 不限制 `defaultFileList` 和 `fileList`。例如,`maxCount` 为 1,而 `defaultFileList` 包含 2 张图片,不会减少 `defaultFileList` 里的图片。上传按钮则会隐藏。

@@ -7,3 +7,3 @@ ---

order: 10
toc: 'content'
toc: content
---

@@ -13,9 +13,9 @@

<code src="../../docs/components/compatibility.tsx" inline="true"></code>
<code src="../../docs/components/compatibility.tsx" inline></code>
通过键盘输入内容,是最基础的表单域包装
通过键盘输入内容,是最基础的表单域包装。
## 何时使用
一般用在表单页进行信息的收集
一般用在表单页进行信息的收集。

@@ -42,39 +42,39 @@ ## 代码示例

### Input, Textarea 相同的属性
### Input、Textarea 相同的属性
| 属性 | 说明 | 类型 | 默认值 |
| ------------ | --------------------------------------------- | ------------------------------------- | ------ |
| className | 类名 | string | - |
| controlled | 有键盘输入问题,可使用 controlled="{{false}}" | boolean | - |
| defaultValue | 初始值 | string | - |
| disabled | 是否禁用 | boolean | false |
| maxLength | 最大长度 | number | 140 |
| placeholder | 占位符 | string | - |
| style | 样式 | string | - |
| value | 输入框的值。受控模式。 | string | - |
| onConfirm | 点击键盘完成时触发此回调 | (value: string, event: Event => void | - |
| onFocus | 聚焦时触发触发此回调 | (value: string, event: Event) => void | - |
| onBlur | 失焦时触发此回调 | (value: string, event: Event) => void | - |
| onChange | 输入时触发此回调 | (value: string, event: Event) => void | - |
| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| className | 类名 | string | - |
| controlled | 有键盘输入问题,可使用 `controlled="{{false}}"` | boolean | - |
| defaultValue | 初始值 | string | - |
| disabled | 是否禁用 | boolean | false |
| maxLength | 最大长度 | number | 140 |
| placeholder | 占位符 | string | - |
| style | 样式 | string | - |
| value | 输入框的值。受控模式。 | string | - |
| onConfirm | 点击键盘完成时触发此回调 | (value: string, event: Event) => void | - |
| onFocus | 聚焦时触发此回调 | (value: string, event: Event) => void | - |
| onBlur | 失焦时触发此回调 | (value: string, event: Event) => void | - |
| onChange | 输入时触发此回调 | (value: string, event: Event) => void | - |
### Input 属性
| 属性 | 说明 | 类型 | 默认值 |
| ------------ | ---------------------------------- | ------- | ------ |
| allowClear | 可以点击清除图标删除内容 | boolean | false |
| enableNative | 是否使用 native | boolean | - |
| focus | 聚焦,查看[详细说明](#input-focus) | boolean | - |
| password | 是否是密码类型 | boolean | false |
| prefix | input 前缀 | slot | - |
| suffix | input 后缀 | slot | - |
| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| allowClear | 可以点击清除图标删除内容 | boolean | false |
| enableNative | 是否使用 native | boolean | - |
| focus | 聚焦,查看[详细说明](#input-focus) | boolean | - |
| password | 是否是密码类型 | boolean | false |
| prefix | input 前缀 | slot | - |
| suffix | input 后缀 | slot | - |
### Textarea 属性
| 属性 | 说明 | 类型 | 默认值 |
| ------------ | ---------------- | ------- | ------ |
| autoHeight | 是否自动增高。 | boolean | false |
| enableNative | 是否使用 native | boolean | false |
| showCount | 是否显示字数统计 | boolean | true |
| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| autoHeight | 是否自动增高。 | boolean | false |
| enableNative | 是否使用 native | boolean | - |
| showCount | 是否显示字数统计 | boolean | true |
### Input, Textarea 更多相同属性
### Input、Textarea 更多相同属性

@@ -87,5 +87,4 @@ - confirm-type

https://opendocs.alipay.com/mini/component/input
<br />
https://opendocs.alipay.com/mini/component/textarea
[Input](https://opendocs.alipay.com/mini/component/input)
[Textarea](https://opendocs.alipay.com/mini/component/textarea)

@@ -96,7 +95,8 @@ ### Input focus

### Input, Textarea 实例方法
### Input、Textarea 实例方法
实例方案需要小程序 `component2` 可使用
实例方法需要小程序 `component2` 可使用。
| 属性 | 说明 | 类型 |
| -----|-----|-----|
| --- | --- | --- |
| update | 更新值 | (value: string) => void |

@@ -109,16 +109,16 @@ | getValue | 得到值 | () => string |

需要在 app.json window 里加上 `"enableInPageRenderInput": "YES"`
需要在 app.json window 里加上 `"enableInPageRenderInput": "YES"`。
### Input 出现光标问题
可查看 https://opendocs.alipay.com/mini/component/input#FAQ 使用 `enableNative` 属性解决
可查看 [此文档](https://opendocs.alipay.com/mini/component/input#FAQ) 使用 `enableNative` 属性解决。
### 使用 value 受控模式出现键盘问题
这个是由于 https://opendocs.alipay.com/mini/component/input#Bug%20%26%20Tip
这个是由于 [输入框的一个已知问题](https://opendocs.alipay.com/mini/component/input#Bug%20%26%20Tip)。
解决方式为:不使用 value 受控模式,采用 ref 方式调用 input 更新方法
解决方式为:不使用 value 受控模式,采用 ref 方式调用 input 更新方法。
```html
<input defaultValue="{{defaultValue}}" ref="handelRef" />
<input defaultValue="{{defaultValue}}" ref="handleRef" />
<button onTap="clear">clear</button>

@@ -129,3 +129,3 @@ ```

Page({
handelRef(input) {
handleRef(input) {
this.input = input;

@@ -143,2 +143,2 @@ },

需要使用 `component2` https://opendocs.alipay.com/mini/framework/component-ref
需要使用 `component2`,详情参见[ref 获取组件实例](https://opendocs.alipay.com/mini/framework/component-ref)。

@@ -14,14 +14,15 @@ ---

通用列表
通用列表可以干净高效地承载文字、列表、图片、段落等元素。
## 何时使用
以列表的形式干净高效的承载文字、列表、图片、段落等
当需要以列表的形式展示信息时使用。
## 代码示例
<code src='pages/List/index'></code>
## API
## API
### List
| 属性 | 说明 | 类型 | 默认值 |
| -----|-----|-----|-----|
| ----- | ----- | ----- | ----- |
| className | 类名 | string | - |

@@ -35,7 +36,7 @@ | footer | 底部说明 | string \| slot | - |

| 属性 | 说明 | 类型 | 默认值 |
| -----|-----|-----|-----|
| arrow | 右侧箭头,可选`right` `up` `down`,传true为`right` | string \| boolean | - |
| ----- | ----- | ----- | ----- |
| arrow | 右侧箭头,可选 `right`、`up`、`down`,传 true 为 `right` | string \| boolean | - |
| brief | 第二行信息 | string \| slot | - |
| className | 类名 | string | - |
| disabled | 是否禁用 | boolean | false |
| disabled | 是否禁用 | boolean | false |
| extra | 右侧额外内容 | string \| slot | - |

@@ -45,6 +46,6 @@ | extraBrief | 右侧辅助信息 | string \| slot | - |

| radius | 是否带圆角 | boolean | false |
| showDivider | 是否显示下划线 | boolean | true |
| showDivider | 是否显示下划线 | boolean | true |
| style | 样式 | string | - |
| title | 标题信息 | string \| slot | - |
| catchTap | 点击图标,触发此回调 | (e: Event) => void |
| onTap | 点击图标,触发此回调 | (e: Event) => void |
| catchTap | 点击时触发的回调 | (e: Event) => void |
| onTap | 点击时触发的回调 | (e: Event) => void |

@@ -19,11 +19,9 @@ ---

## API
| 属性 | 说明 | 类型 | 默认值 |
| -----|-----|-----|----- |
| className | 根节点类名 | string | - |
| color | 加载时的颜色,当 type 为 `spin` 时,只支持十六进制颜色码 | string | #fff |
| size | 加载图标尺寸,当 type 为 `spin` 时生效,可选 `small` `medium` `large` `x-large` | string | `medium` |
| style | 根节点style | string | - |
| type | 加载样式类型,可选 `spin` `mini` | string | `spin` |
| 属性 | 说明 | 类型 | 默认值 |
| ---------- | ----------------------------------------------- | ------ | -------- |
| className | 根节点类名 | string | - |
| color | 加载时的颜色,当 type 为 `spin` 时,只支持十六进制颜色码 | string | `#fff` |
| size | 加载图标尺寸,当 type 为 `spin` 时生效。可选 `small`、`medium`、`large`、`x-large` | string | `medium` |
| style | 根节点 style | string | - |
| type | 加载样式类型,可选 `spin`、`mini` | string | `spin` |

@@ -9,2 +9,3 @@ ---

---
# Modal 弹窗

@@ -20,31 +21,28 @@

## API
| 属性 | 说明 | 类型 | 默认值 |
| -----|-----|-----|-----|
| bodyClassName | body类名 | string | - |
| bodyStyle | body样式 | string | - |
| cancelButtonStyle | 取消按钮样式 | string | - |
| cancelButtonText | 取消按钮文本 | string | - |
| className | 类名 | string | - |
| closable | 是否显示右上角的关闭按钮。只有在 type 为 focus 生效 | boolean | - |
| content | 内容 | string\|slot | - |
| destroyOnClose | 不可见时卸载内容 | boolean | false |
| footer | 自定义按钮区 | slot | - |
| maskClosable | 点击蒙层是否触发onClose | boolean | true |
| maskClassName | 蒙层的类名 | string | - |
| maskStyle | 蒙层的样式 | string | - |
| primaryButtonStyle | 主按钮样式 | string | - |
| primaryButtonText | 主按钮文本 | string | - |
| secondaryButtonStyle | 辅助按钮样式 | string | - |
| secondaryButtonText | 辅助按钮文本 | string | - |
| style | 样式 | string | - |
| title | 标题 | string\|slot | - |
| type | 类型,可选`default`(默认) `focus`(强调模式) | string | `default` |
| visible | 是否显示 | boolean | false |
| onCancelButtonTap | 取消按钮点击事件 | ()=>void | - |
| onClose | 点击蒙层或强调模式下点击右上角关闭按钮,出发回调 | ()=>void | - |
| onPrimaryButtonTap | 主按钮点击事件 | ()=>void | - |
| onSecondaryButtonTap | 辅助按钮点击事件 | ()=>void | - |
| 属性 | 说明 | 类型 | 默认值 |
| ----------------- | ----------------------------- | ------------ | ------- |
| bodyClassName | body 类名 | string | - |
| bodyStyle | body 样式 | string | - |
| cancelButtonStyle | 取消按钮样式 | string | - |
| cancelButtonText | 取消按钮文本 | string | - |
| className | 类名 | string | - |
| closable | 是否显示右上角的关闭按钮。仅在 type 为 focus 生效 | boolean | - |
| content | 内容 | string\|slot | - |
| destroyOnClose | 不可见时是否卸载内容 | boolean | false |
| footer | 自定义按钮区 | slot | - |
| maskClosable | 点击蒙层是否触发 onClose | boolean | true |
| maskClassName | 蒙层的类名 | string | - |
| maskStyle | 蒙层的样式 | string | - |
| primaryButtonStyle| 主按钮样式 | string | - |
| primaryButtonText | 主按钮文本 | string | - |
| secondaryButtonStyle| 辅助按钮样式 | string | - |
| secondaryButtonText| 辅助按钮文本 | string | - |
| style | 样式 | string | - |
| title | 标题 | string\|slot | - |
| type | 类型,可选 `default`(默认)、`focus`(强调模式) | string | `default` |
| visible | 是否显示 | boolean | false |
| onCancelButtonTap | 取消按钮点击事件 | ()=>void | - |
| onClose | 点击蒙层或强调模式下点击右上角关闭按钮,触发回调 | ()=>void | - |
| onPrimaryButtonTap| 主按钮点击事件 | ()=>void | - |
| onSecondaryButtonTap| 辅助按钮点击事件 | ()=>void | - |

@@ -7,30 +7,32 @@ ---

order: 14
toc: 'content'
toc: content
---
# NoticeBar 通告栏
<code src="../../docs/components/compatibility.tsx" inline="true"></code>
展示一组消息通知
展示一组消息通知。
## 何时使用
用于当前页面内信息的通知,是一种较醒目的页面内通知方式
用于当前页面内信息的通知,是一种较醒目的页面内通知方式。
## 代码示例
<code src='pages/NoticeBar/index'></code>
## API
| 属性 | 说明 | 类型 | 默认值 |
| -----|-----|-----|-----|
| className | 类名 | string | - |
| enableMarquee | 是否开启滚动动画 | boolean | false |
| extra | 自定义右侧内容 | slot | - |
| icon | 左侧icon,支持所有内置 iconType 和自定义链接,也支持自定义slot | slot \| string | - |
| loop | 是否循环滚动,enableMarquee 为 true 时有效 | boolean | false |
| mode | 通告类型,`link` 表示连接,整行可点;`closeable` 表示点击 x 可以关闭;不填时表示你右侧没有图标 | string | - |
| style | 样式 | string | - |
| title | 标题 | string\|slot | - |
| type | 类型,可选 `default`, `error`, `primary`, `info` | string | default |
| onTap | 点击通知栏右侧的图标(箭头或者叉),触发回调 | ()=>void | - |
| 属性 | 说明 | 类型 | 默认值 |
| ---------- | ---------------------- | ----------- | ------ |
| className | 类名 | string | - |
| enableMarquee | 是否开启滚动动画 | boolean | false |
| extra | 自定义右侧内容 | slot | - |
| icon | 左侧 icon,支持所有内置 iconType 和自定义链接,也支持自定义 slot | slot \| string | - |
| loop | 是否循环滚动,`enableMarquee` 为 true 时有效 | boolean | false |
| mode | 通告类型,`link` 表示连接,整行可点;`closeable` 表示点击 x 可以关闭;不填时表示右侧没有图标 | string | - |
| style | 样式 | string | - |
| title | 标题 | string\|slot | - |
| type | 类型,可选 `default`, `error`, `primary`, `info` | string | default |
| onTap | 点击通知栏右侧的图标(箭头或者叉),触发回调 | () => void | - |

@@ -15,5 +15,7 @@ ---

## 何时使用
需要自定义数字键盘时
需要自定义数字键盘时。
## Tip
1. 数字键盘暂未解决键盘遮挡输入框的问题,需要开发者自行设置屏幕滚动来解决此类问题。

@@ -24,31 +26,36 @@

### 基本使用
<code src='pages/NumberKeyboard/index'></code>
### 数字输入框
<code src='pages/NumberKeyboardNumber/index'></code>
### 金额输入框
<code src='pages/NumberKeyboardAmount/index'></code>
### 验证码输入框
<code src='pages/NumberKeyboardCode/index'></code>
## API
| 属性 | 说明 | 类型 | 默认值 |
| ------------|---------|----|-----|
| className | 类名 | string | - |
| style | 样式 | string | - |
| value | 输入值 | string | - |
| visible | 展示 | boolean | false |
| vibrate | 震动 | boolean | true |
| closeable | 关闭箭头 | boolean | false |
| point | 小数点 | boolean | true |
| random | 乱序 | boolean | false |
| confirmDisabled| 禁用确认按钮 | boolean | false|
| safeArea | 安全距离 | boolean | true |
| confirmText | 确认按钮的文字 | string | - |
| header | 覆盖键盘的标题栏 | slot | - |
| confirm | 覆盖键盘确认按钮 | slot | - |
| onChange | 数字发生改变时的回调 | (val: string) => void |-|
| onClose | 隐藏键盘时的回调 | () => void |-|
| onConfirm | 点击确认时的回调 | () => void |-|
| 属性 | 说明 | 类型 | 默认值 |
|-----------------|-------------------|------------------------|-------|
| className | 类名 | string | - |
| style | 样式 | string | - |
| value | 输入值 | string | - |
| visible | 展示 | boolean | false |
| vibrate | 震动 | boolean | true |
| closeable | 关闭箭头 | boolean | false |
| point | 小数点 | boolean | true |
| random | 乱序 | boolean | false |
| confirmDisabled | 禁用确认按钮 | boolean | false |
| safeArea | 安全距离 | boolean | true |
| confirmText | 确认按钮的文字 | string | - |
| header | 覆盖键盘的标题栏 | slot | - |
| confirm | 覆盖键盘确认按钮 | slot | - |
| onChange | 数字变化时的回调 | (val: string) => void | - |
| onClose | 隐藏键盘时的回调 | () => void | - |
| onConfirm | 点击确认时的回调 | () => void | - |

@@ -13,7 +13,9 @@ ---

Picker 选择器 显示一个或多个选项集合的的可滚动列表,相比较于原生picker实现了ios跟android端体验一致
Picker 选择器显示一个或多个选项集合的可滚动列表,相比于原生 picker,实现了 iOS 与 Android 端体验的一致性。
## 何时使用
- 提供一组或多组关联选项供用户选择
- 当少于5个选项时,建议直接将选项平铺,使用 Radio 是更好的选择
- 提供一组或多组关联选项供用户选择。
- 当少于 5 个选项时,建议直接将选项平铺,使用 Radio 是更好的选择。
## 代码示例

@@ -20,0 +22,0 @@ ### 基本使用

@@ -9,37 +9,40 @@ ---

---
# Popover 气泡菜单
<code src="../../docs/components/compatibility.tsx" inline="true"></code>
点击元素,弹出气泡式的菜单
点击元素,弹出气泡式的菜单
## 何时使用
用于功能的导航,只可由导航栏上图标唤起,通常用于收纳低频使用的功能
用于导航功能的气泡菜单唤起,通常用于收纳低频使用的功能。该功能只能通过导航栏上的图标激活。
## 代码示例
### 基本使用
<code src='pages/Popover/index' noChangeButton></code>
### 结合 List 组件使用
<code src='pages/PopoverList/index' noChangeButton></code>
## API
| 属性 | 说明 | 类型 | 默认值 |
| -----|-----|-----|-----|
| autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | true |
| className | 类名 | string | - |
| color | 背景颜色 | string | - |
| contentClassName | content类名 | string | - |
| contentStyle | content样式 | string | - |
| content | 内容 | string\|slot | - |
| defaultVisible | 默认是否显示 | boolean | false |
| destroyOnClose | 不可见时卸载内容 | boolean | false |
| maskClassName | 蒙层的类名 | string | - |
| maskStyle | 蒙层的样式 | string | - |
| placement | 气泡框位置,可选`top` `top-right` `top-left` `bottom` `bottom-left` `bottom-right` `left` `left-top` `left-bottom` `right` `right-top` `right-bottom` | string | top |
| showMask | 是否展示蒙层,为true时点击空白处可关闭Popover | boolean | true |
| style | 样式 | string | - |
| visible | 是否显示 | boolean | - |
| onVisibleChange | visible 变更时回调 | (visible: boolean, event: [Event](https://opendocs.alipay.com/mini/framework/event-object))=>void | - |
| 属性 | 说明 | 类型 | 默认值 |
|-------------------|---------------------------------------------------|--------------------------------------------------------------------|------|
| autoAdjustOverflow | 气泡被遮挡时的自动调整位置 | boolean | true |
| className | 类名 | string | - |
| color | 背景颜色 | string | - |
| contentClassName | content 类名 | string | - |
| contentStyle | content 样式 | string | - |
| content | 内容 | string \| slot | - |
| defaultVisible | 默认是否显示 | boolean | false|
| destroyOnClose | 不可见时是否卸载内容 | boolean | false|
| maskClassName | 蒙层的类名 | string | - |
| maskStyle | 蒙层的样式 | string | - |
| placement | 气泡框位置,可选 `top`、`top-right`、`top-left`、`bottom`、`bottom-left`、`bottom-right`、`left`、`left-top`、`left-bottom`、`right`、`right-top` 或 `right-bottom` | string | top |
| showMask | 是否展示蒙层,为 true 时点击空白处可关闭 Popover | boolean | true |
| style | 样式 | string | - |
| visible | 是否显示 | boolean | - |
| onVisibleChange | visible 变更时的回调 | (visible: boolean, event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - |

@@ -12,7 +12,7 @@ ---

从屏幕滑出或弹出一块自定义内容区
从屏幕滑出或弹出一块自定义内容区。
## 何时使用
用于展示弹窗、信息提示、选择输入、切换等内容,支持多个弹出层叠加展示
用于展示弹窗、信息提示、选择输入、切换等内容,支持多个弹出层叠加展示。

@@ -41,15 +41,15 @@ ## 代码示例

| zIndex | 弹窗层级 | number | 998 |
| onClose | 点击蒙层关闭,触发回调 | () => void | - |
| onAfterShow | 完全展示后触发 | () => void | - |
| onAfterClose | 完全关闭后触发 | () => void | - |
| onClose | 点击蒙层关闭,触发回调 | () => void | - |
| onAfterShow | 完全展示后触发 | () => void | - |
| onAfterClose | 完全关闭后触发 | () => void | - |
## FAQ
### Popup 打开后,蒙层后面的页面能滚动
### Popup 打开后,蒙层后面的页面能滚动怎么办?
阻止蒙层后页面滚动目前 IDE 和模拟器不生效,请在真机调试
阻止蒙层后页面滚动目前在 IDE 和模拟器不生效,请在真机上调试。
### Popup 内部元素需要支持滚动
### Popup 内部元素需要支持滚动怎么处理?
弹窗内需要滚动,请使用 scroll-view 组件,并添加属性
如果弹窗内需要滚动,请使用 scroll-view 组件,并添加以下属性:

@@ -63,3 +63,3 @@ ```html

>
...你的内容
...你的内容...
</scroll-view>

@@ -69,9 +69,7 @@ </popup>

### Popup 内部的 picker-view 显示异常
### Popup 内部的 picker-view 显示异常怎么解决?
popup 默认是通过 display:none 隐藏的,而 picker-view 不能放到 display:none 的组件里。
有下面两种解决方式
Popup 默认是通过 `display:none` 隐藏的,而 picker-view 不能放到 `display:none` 的组件里。有以下两种解决方式:
1. 在 picker-view 上添加属性 ` a:if ="{{ popupVisible }}"`,在 popup 显示时再显示 picker-view
2. 在 popup 上设置 `destroyOnClose="{{true}}"`,在 popup 不可见时卸载内容
1. 在 picker-view 上添加属性 `a:if="{{popupVisible}}"`,在 Popup 显示时再显示 picker-view。
2. 在 Popup 上设置 `destroyOnClose="{{true}}"`,在 Popup 不可见时卸载内容。

@@ -14,24 +14,26 @@ ---

用于展示用户操作、任务的进度
用于展示用户操作、任务的进度。
## 代码示例
### line
<code src='pages/ProgressLine/index'></code>
### circle
<code src='pages/ProgressCircle/index'></code>
## API
| 属性 | 说明 | 类型 | 默认值 |
| -----|-----|-----|-----|
| className | 类名| string | - |
| percent | 百分比 | number | 0 |
| status | 状态,仅限 line 模式可用,可选`success` `exception` | string | - |
| strokeColor | 进度条颜色 | string | - |
| strokeWidth | 进度条宽度,单位px | number | 8 |
| style | 样式| string | - |
| trailColor | 轨道颜色 | string | - |
| type | 类型,可选 `line` `circle` | string | `line` |
| width | 圆形进度条画布宽度,单位 px | number | 100 |
| 属性 | 说明 | 类型 | 默认值 |
| ---------- | ------------------------------------------ | ------ | ------ |
| className | 类名 | string | - |
| percent | 百分比 | number | 0 |
| status | 状态,仅限 line 模式可用,可选 `success` `exception` | string | - |
| strokeColor| 进度条颜色 | string | - |
| strokeWidth| 进度条宽度,单位 px | number | 8 |
| style | 样式 | string | - |
| trailColor | 轨道颜色 | string | - |
| type | 类型,可选 `line` `circle` | string | `line` |
| width | 圆形进度条画布宽度,单位 px | number | 100 |

@@ -14,12 +14,16 @@ ---

在一组可选项中进行单选
在一组可选项中进行单选。
## 何时使用
- 在一组可选项中进行单选时
- 在一组可选项中进行单选时。
## 代码示例
### Radio
<code src='pages/Radio/index'></code>
### RadioGroup
<code src='pages/RadioGroup/index'></code>

@@ -30,27 +34,27 @@

### Radio
| 属性 | 说明 | 类型 | 默认值 |
| -----|-----|-----|-----|
| checked | 是否选中 | boolean | - |
| className | 类名| string | - |
| disabled | 是否禁用 | boolean | false |
| color | 图标颜色 | string | - |
| defaultChecked | 是否选中 | boolean | false |
| style | 样式| string | - |
| value | checkbox 携带的 value 值 | string | - |
| onChange | 选中状态改变,触发回调 | (checked: boolean, event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - |
| 属性 | 说明 | 类型 | 默认值 |
| ---------------- | ------------------- | -------- | ------ |
| checked | 是否选中 | boolean | - |
| className | 类名 | string | - |
| disabled | 是否禁用 | boolean | false |
| color | 图标颜色 | string | - |
| defaultChecked | 是否默认选中 | boolean | false |
| style | 样式 | string | - |
| value | 携带的 value 值 | string | - |
| onChange | 状态改变时的回调 | `(checked: boolean, event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void` | - |
### RadioGroup
| 属性 | 说明 | 类型 | 默认值 |
| -----|-----|-----|-----|
| className | 类名| string | - |
| color | 图标颜色 | string | - |
| disabled | 是否禁用 | boolean | false |
| defaultValue | 初始值 | string | - |
| label | label区插槽,接收value(当前项可选项item)、index(索引) | slot | - |
| options | 指定可选项 | `{label?: string; value?: string; disabled?: boolean;}[]` | - |
| position | 布局,可选`horizontal` `vertical` | string | `vertical` |
| style | 样式 | string | - |
| value | radio group 里选中的值 | string | - |
| onChange | 选中状态改变,触发回调 | (value: string, event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - |
| 属性 | 说明 | 类型 | 默认值 |
| ------------- | ------------------- | ------------------------------ | --------- |
| className | 类名 | string | - |
| color | 图标颜色 | string | - |
| disabled | 是否禁用 | boolean | false |
| defaultValue | 初始值 | string | - |
| label | 插槽,接收值和索引 | slot | - |
| options | 可选项 | `{label?: string; value?: string; disabled?: boolean;}[]` | - |
| position | 布局方式 | string | `vertical` |
| style | 样式 | string | - |
| value | 选中的值 | string | - |
| onChange | 状态改变时的回调 | `(value: string, event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void` | - |

@@ -16,9 +16,8 @@ ---

生僻字问题一直是社会难点之一,各行业由于不同时期不同标准开发使得支持的汉字字符不同,导致生僻字姓名互联互通困难,严重影响生僻字人办理互联网业务;
此生僻字键盘可以帮助生僻字用户解决姓名无法在计算机世界中输入的问题。
生僻字问题一直是社会的一个难点,各行业由于不同时期、不同标准的开发,使得支持的汉字字符不一,导致生僻字姓名在互联网业务中的互联互通十分困难,严重影响了生僻字姓名人员的业务办理;此生僻字键盘能够帮助生僻字用户解决在计算机世界中无法输入姓名的问题。
## Tip
1. 开发者自己决定什么时候唤起生僻字键盘
2. 输入完成生僻字后会通过回调参数的方式返回此次输入的生僻字,并关闭键盘
1. 开发者可以自己决定何时唤起生僻字键盘。
2. 输入完成生僻字后,会通过回调参数返回此次输入的生僻字,并关闭键盘。

@@ -33,10 +32,10 @@ ## 代码示例

| 属性 | 说明 | 类型 | 默认值 |
| -------- | -------------------------------------------------------------------------------- | ----------------------- | ------ |
| visible | 是否可见 | boolean | false |
| type | 键盘类型, pinyin(拼音)、stroke(笔画)、handwriting(手写),目前只支持 pinyin | string | pinyin |
| showMask | 是否展示背景蒙层 | boolean | true |
| safeArea | 安全距离 | boolean | true |
| onClose | 关闭的时候触发的回调 | () => void | - |
| onChange | 输入完成的时候触发的回调 | (value: string) => void | - |
| onError | 打开键盘出错的回调 | (err: Error) => void | - |
| 属性 | 说明 | 类型 | 默认值 |
| --------- | -------------------------------------------------------------- | ------------------------ | ------ |
| visible | 是否可见 | boolean | false |
| type | 键盘类型,目前只支持 `pinyin`(拼音) | string | pinyin |
| showMask | 是否展示背景蒙层 | boolean | true |
| safeArea | 是否保留安全距离 | boolean | true |
| onClose | 关闭键盘时触发的回调 | `() => void` | - |
| onChange | 输入完成时触发的回调 | `(value: string) => void`| - |
| onError | 打开键盘出错时触发的回调 | `(err: Error) => void` | - |

@@ -14,24 +14,29 @@ ---

用于展示事物评级以及快速打分
用于展示事物评级以及快速打分的组件。
## 代码示例
<code src='pages/Rate/index'></code>
### 自定义
<code src='pages/RateCustom/index'></code>
## 属性
| 属性 | 说明 | 类型 | 默认值 |
| -----|-----|-----|-----|
| allowHalf | 是否允许半星 boolean | false |
| allowClear | 是否允许再次点击后清除 | boolean | true |
| className | 类名 | string | - |
| character | 自定义字符 | slot | \<icon type="StarFill" \/\> |
| characterActiveClassName | 自定义字符选中状态类名 | string | - |
| characterClassName | 自定义字符类名 | string | - |
| count | star 总数 | number | 5 |
| defaultValue | 初始值 | number | 0 |
| gutter | 间距,单位px | number | 4 |
| readonly | 只读,无法进行交互 | boolean | false |
| style | 样式 |string | - |
| value | 星级(受控) | number | - |
| onChange | 打分回调函数 | (rate: number) => void | - |
| ---- | ---- | ---- | ---- |
| allowHalf | 是否允许半星 | `boolean` | `false` |
| allowClear | 是否允许再次点击后清除 | `boolean` | `true` |
| className | 类名 | `string` | - |
| character | 自定义字符 | `slot` | `<icon type="StarFill" />` |
| characterActiveClassName | 自定义字符选中状态类名 | `string` | - |
| characterClassName | 自定义字符类名 | `string` | - |
| count | star 总数 | `number` | `5` |
| defaultValue | 初始值 | `number` | `0` |
| gutter | 间距,单位 `px` | `number` | `4` |
| readonly | 只读,无法进行交互 | `boolean` | `false` |
| style | 样式 | `string` | - |
| value | 星级(受控) | `number` | - |
| onChange | 打分回调函数 | `(rate: number) => void` | - |

@@ -9,3 +9,3 @@ ---

---
# Result 操作结果

@@ -15,20 +15,22 @@

对前一步操作的结果进行反馈
对前一步操作的结果进行反馈。
## 何时使用
当有重要操作需告知用户处理结果,且反馈内容较为复杂时使用
当有重要操作需告知用户处理结果,且反馈内容较为复杂时,应使用 Result 组件。
## 代码示例
<code src='pages/Result/index'></code>
## API
| 属性 | 说明 | 类型 | 默认值 |
| -----|-----|-----|----- |
| className | 类名 | string | - |
| extra | 底部自定义渲染 | slot | - |
| image | 自定义图片 | string \| slot | - |
| message | 副文案 | string \| slot | - |
| style | 样式 | string | - |
| title | 主文案 | string \| slot | - |
| type | 内置类型 `success`(成功) `error`(错误/危险) `info`(信息提示) `wait`(等待处理) | string | - |
| 属性 | 说明 | 类型 | 默认值 |
| --------- | ------------ | ----------------- | ------ |
| className | 类名 | string | - |
| extra | 底部自定义渲染 | slot | - |
| image | 自定义图片 | string \| slot | - |
| message | 副文案 | string \| slot | - |
| style | 样式 | string | - |
| title | 主文案 | string \| slot | - |
| type | 内置类型 `success`(成功)、`error`(错误/危险)、`info`(信息提示)、`wait`(等待处理) | string | - |

@@ -10,43 +10,42 @@ ---

# Selector 选择组
# Selector 选择器组件
<code src="../../docs/components/compatibility.tsx" inline="true"></code>
在一组选项中选择一个或多个
在一组选项中选择一个或多个。
## 何时使用
提供多个选项供用户选择,一般在筛选和表单中使用
提供多个选项供用户选择,一般在筛选和表单中使用。
## 代码示例
### 基本使用
<code src='pages/Selector/index'></code>
<code src="pages/Selector/index"></code>
### 使用Selector自定义Filter
<code src='pages/SelectorFilter/index'></code>
### 使用 Selector 自定义 Filter
<code src="pages/SelectorFilter/index"></code>
## API
| 属性 | 说明 | 类型 | 默认值 |
| -----|-----|-----|----- |
| activeItemClassName | 选中选项的类名 | string | - |
| activeItemStyle | 选中选项的样式 | string | - |
| className | 类名 | string | - |
| defaultValue | 默认选择项,多选时类型为数组 | string \| number \| string[] \| number[] | - |
| disabled | 是否整体禁用 | boolean | false |
| maxSelectedCount | 最大可选中项的数量 | number | - |
| minSelectedCount | 最小可选中项的数量 | number | - |
| multiple | 是否允许多选,标签栏显示的时候会显示当前单选/多选的状态 | boolean | false |
| options | 选项数据源 | [SelectorItem](#selectoritem)[] | [] |
| style | 样式 | string | - |
| value | 当前选择项,多选时类型为数组 | string \| number \| string[] \| number[] | - |
| onChange | 选中值发生变化,触发回调 |(v: string \| number \| undefined \| string[] \| number[], selectedItem: [SelectorItem](#selectoritem) \| undefined \| [SelectorItem](#selectoritem)[], event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - |
| onSelectMax | 触发最大限制 | (value: string \| number, item: [SelectorItem](#selectoritem), event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void |- |
| onSelectMin | 触发最小限制 | (value: string \| number, item: [SelectorItem](#selectoritem), event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void |- |
| 属性 | 说明 | 类型 | 默认值 |
| -------------------- | --------------------- | ---------------------- | ------ |
| activeItemClassName | 选中选项的类名 | string | - |
| activeItemStyle | 选中选项的样式 | string | - |
| className | 类名 | string | - |
| defaultValue | 默认选择项,多选时类型为数组 | string \| number \| string[] \| number[] | - |
| disabled | 是否整体禁用 | boolean | false |
| maxSelectedCount | 最大可选中项的数量 | number | - |
| minSelectedCount | 最小可选中项的数量 | number | - |
| multiple | 是否允许多选,标签栏显示的时候会显示当前单选/多选的状态 | boolean | false |
| options | 选项数据源 | [SelectorItem](#selectoritem)[] | [] |
| style | 样式 | string | - |
| value | 当前选择项,多选时类型为数组 | string \| number \| string[] \| number[] | - |
| onChange | 选中值发生变化,触发回调 | (v: string \| number \| undefined \| string[] \| number[], selectedItem: [SelectorItem](#selectoritem) \| undefined \| [SelectorItem](#selectoritem)[], event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - |
| onSelectMax | 触发最大限制 | (value: string \| number, item: [SelectorItem](#selectoritem), event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - |
| onSelectMin | 触发最小限制 | (value: string \| number, item: [SelectorItem](#selectoritem), event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - |
### SelectorItem
| 属性 | 说明 | 类型 | 默认值 |
| -----|-----|-----|----- |
| disabled | 是否禁用 | boolean | - |
| subText | 副文案 | string | - |
| text | 文案 | string | - |
| value | 当前项value | string \| number | - |
| 属性 | 说明 | 类型 | 默认值 |
| --------- | ------------- | ----------- | ------ |
| disabled | 是否禁用 | boolean | - |
| subText | 副文案 | string | - |
| text | 文案 | string | - |
| value | 当前项 value | string \| number | - |

@@ -10,13 +10,13 @@ ---

# Skeleton 骨架屏
# Skeleton 骨架屏
<code src="../../docs/components/compatibility.tsx" inline="true"></code>
在需要等待加载内容的位置提供一个占位图形组合
## 何时使用
- 网络较慢需要长时间等待加载,且只在第一次加载的时候使用;
- 在确保手机性能的前提下,尽量使用预加载,最好不用骨架屏;
- 适用于图文信息较多且重要的首页、列表、卡片中,小的模块类组件(例如弹窗)不要使用;
- 网络较慢,需要长时间等待加载,并且只在第一次加载的时候使用。
- 在确保手机性能的前提下,尽量使用预加载,最好不用骨架屏。
- 适用于图文信息较多且重要的首页、列表、卡片中。小的模块类组件(例如弹窗)不要使用。
## 代码示例
<code src='pages/Skeleton/index'></code>

@@ -27,59 +27,60 @@

### Skeleton
| 属性 | 说明 | 类型 | 默认值 |
| -----|-----|-----|----- |
| animate | 是否展示动画效果 | boolean | false |
| avatar | 是否显示头像占位图 | `boolean \| Avatar` | false |
| className | 类名 | string | - |
| loading | 为 true 时,显示占位图。反之则直接展示子组件 | boolean | true |
| paragraph | 段落 | `number \| Paragraph` | true |
| style | 样式 | string | - |
| title | 是否显示标题占位图 | boolean | true |
| 属性 | 说明 | 类型 | 默认值 |
| -------- | ------------------------------ | -------------------------- | ------- |
| animate | 是否展示动画效果 | boolean | false |
| avatar | 是否显示头像占位图 | `boolean \| Avatar` | false |
| className| 类名 | string | - |
| loading | 为 true 时,显示占位图。反之则直接展示子组件 | boolean | true |
| paragraph| 段落 | `number \| Paragraph` | true |
| style | 样式 | CSSProperties | - |
| title | 是否显示标题占位图 | boolean | true |
### Avatar
| 属性 | 说明 | 类型 | 默认值 |
| -----|-----|-----|----- |
| animate | 是否展示动画效果 | boolean | false |
| className | 类名 | string | - |
| loading | 为 true 时,显示占位图。反之则直接展示子组件 | boolean | true |
| shape | 头像形状 `circle` `square` | string | `square` |
| size | 头像大小 `x-small` `small` `medium` `large` | string | `medium` |
| style | 样式 | string | - |
| 属性 | 说明 | 类型 | 默认值 |
| -------- | -------------------------------- | ------------ | -------- |
| animate | 是否展示动画效果 | boolean | false |
| className| 类名 | string | - |
| loading | 为 true 时,显示占位图。反之则直接展示子组件 | boolean | true |
| shape | 头像形状 `circle` 或 `square` | string | `square` |
| size | 头像大小 `x-small`、`small`、`medium` 或 `large` | string | `medium` |
| style | 样式 | CSSProperties| - |
#### Paragraph 段落
| 属性 | 说明 | 类型 | 默认值 |
| -----|-----|-----|----- |
| animate | 是否展示动画效果 | boolean | false |
| className | 类名 | string | - |
| loading | 为 true 时,显示占位图。反之则直接展示子组件 | boolean | true |
| rows | 段落行数,大于0展示 | number | 3 |
| style | 样式 | string | - |
| 属性 | 说明 | 类型 | 默认值 |
| -------- | ------------------------------- | ------------ | ------- |
| animate | 是否展示动画效果 | boolean | false |
| className| 类名 | string | - |
| loading | 为 true 时,显示占位图。反之则直接展示子组件 | boolean | true |
| rows | 段落行数,大于 0 展示 | number | 3 |
| style | 样式 | CSSProperties| - |
#### Title 标题
| 属性 | 说明 | 类型 | 默认值 |
| -----|-----|-----|----- |
| animate | 是否展示动画效果 | boolean | false |
| className | 类名 | string | - |
| loading | 为 true 时,显示占位图。反之则直接展示子组件 | boolean | true |
| style | 样式 | string | - |
| 属性 | 说明 | 类型 | 默认值 |
| -------- | ------------------------------- | ------------ | ------- |
| animate | 是否展示动画效果 | boolean | false |
| className| 类名 | string | - |
| loading | 为 true 时,显示占位图。反之则直接展示子组件 | boolean | true |
| style | 样式 | CSSProperties| - |
#### Button 按钮
| 属性 | 说明 | 类型 | 默认值 |
| -----|-----|-----|----- |
| animate | 是否展示动画效果 | boolean | false |
| className | 类名 | string | - |
| loading | 为 true 时,显示占位图。反之则直接展示子组件 | boolean | true |
| size | 大小,`small` `medium` `large` | string | `medium` |
| style | 样式 | string | - |
| 属性 | 说明 | 类型 | 默认值 |
| -------- | ------------------------------- | ------------ | ------- |
| animate | 是否展示动画效果 | boolean | false |
| className| 类名 | string | - |
| loading | 为 true 时,显示占位图。反之则直接展示子组件 | boolean | true |
| size | 大小,`small`、`medium` 或 `large` | string | `medium`|
| style | 样式 | CSSProperties| - |
#### Input 输入框
| 属性 | 说明 | 类型 | 默认值 |
| -----|-----|-----|----- |
| animate | 是否展示动画效果 | boolean | false |
| className | 类名 | string | - |
| loading | 为 true 时,显示占位图。反之则直接展示子组件 | boolean | true |
| style | 样式 | string | - |
| 属性 | 说明 | 类型 | 默认值 |
| -------- | ------------------------------- | ------------ | ------- |
| animate | 是否展示动画效果 | boolean | false |
| className| 类名 | string | - |
| loading | 为 true 时,显示占位图。反之则直接展示子组件 | boolean | true |
| style | 样式 | CSSProperties| - |

@@ -13,34 +13,36 @@ ---

可以通过移动滑块在某一范围内取值
可以通过移动滑块在某一范围内取值。
## 何时使用
用于在一定范围内移动滑块获取单个或者区间数值
用于在一定范围内移动滑块获取单个或者区间数值。
## 代码示例
<code src='pages/Slider/index'></code>
## API
| 属性 | 说明 | 类型 | 默认值 |
| -----|-----|-----|----- |
| activeDotClassName | 选中小圆点的类名 | string | - |
| activeLineClassName | 选中线条的样式 | string | - |
| activeDotStyle | 选中小圆点的类型 | string | - |
| activeLineStyle | 选中线条的样式 | string | - |
| className | 类名 | string | - |
| defaultValue | 初始值 | number \| [number, number] | - |
| disabled | 是否禁用 | boolean | false |
| max | 最大值 | number | 100 |
| min | 最小值 | number | 0 |
| range | 是否是双滑块 | boolean | false |
| showNumber | 是否展示刻度上的数据 | boolean | false |
| step | 步距,取值必须大于 0,并且可被 (max - min) 整除 | number | 1 |
| style | 样式 | string | - |
| showTicks | 是否显示刻度 | boolean | false |
| showTooltip | 是否在拖动时显示悬浮提示,支持使用作用域插槽自定义 | boolean | false |
| slider | 自定义滑块 | slot | - |
| tick | 自定义刻度 | slot | - |
| tooltip | 自定义拖动时显示悬浮提示 | slot | - |
| value | 当前值 | number \| [number, number] | - |
| onChange | slider 值改变时触发 | (value: number &verbar; [number, number]) => void | - |
| onAfterChange | 与 touchend 触发时机一致,把当前值作为参数传入 | (value: number &verbar; [number, number]) => void | - |
| 属性 | 说明 | 类型 | 默认值 |
|---------------------|--------------------------------------------|--------------------------------------|--------|
| activeDotClassName | 选中小圆点的类名 | string | - |
| activeLineClassName | 选中线条的样式 | string | - |
| activeDotStyle | 选中小圆点的类型 | string | - |
| activeLineStyle | 选中线条的样式 | string | - |
| className | 类名 | string | - |
| defaultValue | 初始值 | number \| [number, number] | - |
| disabled | 是否禁用 | boolean | false |
| max | 最大值 | number | 100 |
| min | 最小值 | number | 0 |
| range | 是否是双滑块 | boolean | false |
| showNumber | 是否展示刻度上的数据 | boolean | false |
| step | 步距,取值必须大于 0,并且可被 (max - min) 整除 | number | 1 |
| style | 样式 | string | - |
| showTicks | 是否显示刻度 | boolean | false |
| showTooltip | 是否在拖动时显示悬浮提示,支持使用作用域插槽自定义 | boolean | false |
| slider | 自定义滑块 | slot | - |
| tick | 自定义刻度 | slot | - |
| tooltip | 自定义拖动时显示悬浮提示 | slot | - |
| value | 当前值 | number \| [number, number] | - |
| onChange | slider 值改变时触发 | (value: number &verbar; [number, number]) => void | - |
| onAfterChange | 与 touchend 触发时机一致,把当前值作为参数传入 | (value: number &verbar; [number, number]) => void | - |

@@ -14,29 +14,33 @@ ---

一种两段式控制,增加、减少或修改数值
一种两段式控制,用于增加、减少或修改数值。
## 何时使用
用于在一定范围内输入、调整当前数值
用于在一定范围内输入、调整当前数值。
## 代码示例
<code src='pages/Stepper/index'></code>
## API
| 属性 | 说明 | 类型 | 默认值 |
| -----|-----|-----|----- |
| className | 类名 | string | - |
| disabled | 是否禁用 | boolean | false |
| inputReadOnly | 输入框是否只读状态 | boolean | false |
| defaultValue | 初始值 | number | - |
| focus | 输入框选中状态 | boolean | false |
| inputClassName | 输入框类型 | string | - |
| inputStyle | 输入框样式 | string | - |
| max | 最大值 | number | - |
| min | 最小值 | number | - |
| precision | 计算精度,保留几位小数 [详见](https://github.com/ant-design/ant-design/issues/5998) | number | - |
| style | 样式 | string | - |
| step | 步距,即每次加减的值 | number | 1 |
| type | 输入框唤起键盘类型,可选 `number` `digit` | string | `digit` |
| value | 输入框的值, 表单提交的时候有效 | number | - |
| onBlur | 输入框失去焦点时,触发此回调 | (value: number | null, event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void |
| onChange | 数据变化后,触发此回调 | ( value: number | null, [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void |
| onConfirm | 点击键盘完成时触发此回调 | (value: number | null, event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void |
| onFocus | 输入框聚焦时,触发此回调 | (value: number | null, event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void |
| 属性 | 说明 | 类型 | 默认值 |
| -------------- | ----------------------------------------------------------------------------------- | --------------- | -------------------------------------------------------------------------------------- |
| className | 类名 | string | - |
| disabled | 是否禁用 | boolean | false |
| inputReadOnly | 输入框是否只读状态 | boolean | false |
| defaultValue | 初始值 | number | - |
| focus | 输入框选中状态 | boolean | false |
| inputClassName | 输入框类型 | string | - |
| inputStyle | 输入框样式 | string | - |
| max | 最大值 | number | - |
| min | 最小值 | number | - |
| precision | 计算精度,保留几位小数 [详见](https://github.com/ant-design/ant-design/issues/5998) | number | - |
| style | 样式 | string | - |
| step | 步距,即每次加减的值 | number | 1 |
| type | 输入框唤起键盘类型,可选 `number` `digit` | string | `digit` |
| value | 输入框的值, 表单提交的时候有效 | number | - |
| onBlur | 输入框失去焦点时,触发此回调 | (value: number | null, event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void |
| onChange | 数据变化后,触发此回调 | ( value: number | null, [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void |
| onConfirm | 点击键盘完成时触发此回调 | (value: number | null, event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void |
| onFocus | 输入框聚焦时,触发此回调 | (value: number | null, event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void |

@@ -9,2 +9,3 @@ ---

---
# Steps 步骤条

@@ -14,31 +15,37 @@

引导用户按照流程完成任务的导航条
引导用户按照流程完成任务的导航条。
## 何时使用
当任务复杂或者存在先后关系时,将其分解成一系列步骤,从而简化任务
当任务复杂或者存在先后关系时,将其分解成一系列步骤,从而简化任务。
## 代码示例
### 基本使用
<code src='pages/Steps/index'></code>
### 受控模式
<code src='pages/StepsControl/index'></code>
## API
| 属性 | 说明 | 类型 | 默认值 |
| -----|-----|-----|-----|
| className | 类名 | string | - |
| current | 当前步骤 | number | - |
| description | 自定义描述内容渲染,接收index和value | slot | - |
| direction | 方向,可选 `horizontal` `vertical` | string | `horizontal` |
| icon | 自定义图标渲染,接收index和value | slot | - |
| items | 展示项 | [Item](#item)[] | - |
| status | 指定当前步骤的状态,可选 `finish` `error` | string | `finish` |
| style | 样式 | string | - |
| title | 自定义标题渲染,接收index和value | slot | - |
| 属性 | 说明 | 类型 | 默认值 |
| ----------- | ---------------------------------- | ----------- | ---------------- |
| className | 类名 | string | - |
| current | 当前步骤 | number | - |
| description | 自定义描述内容渲染,接收 index 和 value | slot | - |
| direction | 方向,可选 `horizontal` 或 `vertical` | string | `horizontal` |
| icon | 自定义图标渲染,接收 index 和 value | slot | - |
| items | 展示项 | [Item](#item)[] | - |
| status | 指定当前步骤的状态,可选 `finish` 或 `error` | string | `finish` |
| style | 样式 | string | - |
| title | 自定义标题渲染,接收 index 和 value | slot | - |
### Item
| 属性 | 说明 | 类型 | 默认值 |
| -----|-----|-----|-----|
| description | 内容 | string | - |
| title | 标题 | string | - |
| 属性 | 说明 | 类型 | 默认值 |
| ----------- | ------ | ------ | -------- |
| description | 内容 | string | - |
| title | 标题 | string | - |

@@ -14,66 +14,78 @@ ---

列表的功能扩展
列表的功能扩展。
## 何时使用
通过滑动操作来展示隐藏的功能菜单
通过滑动操作来展示隐藏的功能菜单。
## Tip
1. 该组件父级容器必须设置width和height。
2. 左右两侧都需要滑动按钮时,两侧设置的宽度总和需一致。
3. elasticity设置为false时设置damping数值小一点体验更佳。
1. 该组件的父级容器必须设置 width 和 height。
2. 两侧滑动按钮的宽度总和需一致。
3. 若 elasticity 设置为 false 时,较小的 damping 值可提供更佳的体验。
4. 每一侧的滑动二次确认只会触发第一个,其他不会触发。
5. 建议在appx2.0的小程序中使用,1.0(如:钉钉小程序)中体验存在体验缺陷(没有touchend之后滑动过渡效果)。
5. 建议在基础库 2.0 的小程序中使用,1.0 版本(如钉钉小程序)中存在滑动体验缺陷(缺少 touchend 之后的滑动过渡效果)。
## 代码示例
### 基础用法
<code src='pages/SwipeAction/index'></code>
### 按钮在左侧
<code src='pages/SwipeActionLeft/index'></code>
### 改变按钮数量
<code src='pages/SwipeActionNumber/index'></code>
### 禁用滑动回弹
<code src='pages/SwipeActionAnimation/index'></code>
### 设置按钮宽度
<code src='pages/SwipeActionWidth/index'></code>
### 设置滑动速度
<code src='pages/SwipeActionSpeed/index'></code>
### 按钮点击二次确认
<code src='pages/SwipeActionTap/index'></code>
### 按钮滑出最大距离二次确认
<code src='pages/SwipeActionMove/index'></code>
### 左右两侧都有按钮
<code src='pages/SwipeActionLeftRight/index'></code>
## API
| 属性 | 类型 | 默认值 | 说明 |
| -------------|----------------|-------|------------------------------------------- |
| leftButtons | [SwipeButton](#SwipeButton) | [] | 左侧按钮 |
| rightButtons | [SwipeButton](#SwipeButton) | [] | 右侧按钮 |
| damping | number | 70 | 滑动速度 |
| elasticity | boolean | true | 滑动弹性 |
| swiped | '' &verbar; 'left' &verbar; 'right' | false | 是否滑开 |
| defaultSwiped| '' &verbar; 'left' &verbar; 'right' | false | 是否默认滑开 |
| disabled | boolean | false | 禁止滑动 |
| onSwipeStart | 滑动开始 | (data: object, e: string) => void |e: 组件上data-xxx中的数据, data: direction(滑动的按钮是左边还是右边),swiped(是否滑开) |
| onSwipeEnd | 滑动结束 | (data: object, e: string) => void |e: 组件上data-xxx中的数据, data: direction(滑动的按钮是左边还是右边),swiped(是否滑开)|
| onButtonTap | 按钮触发 | (data: object, e: string) => void |e: 组件上data-xxx中的数据, data: direction(滑动的按钮是左边还是右边),btnIdx(按钮的index, 靠近主体的部分为0) |
| 属性 | 类型 | 默认值 | 说明 |
| ------------- | ----------------------------- | --------------------------------- | ------------------------------------------------------------------------------------------------------------ |
| leftButtons | [SwipeButton](#SwipeButton) | [] | 左侧按钮 |
| rightButtons | [SwipeButton](#SwipeButton) | [] | 右侧按钮 |
| damping | number | 70 | 滑动速度 |
| elasticity | boolean | `true` | 滑动弹性 |
| swiped | `''` \| `'left'` \| `'right'` | `false` | 是否滑开 |
| defaultSwiped | `''` \| `'left'` \| `'right'` | `false` | 是否默认滑开 |
| disabled | boolean | `false` | 禁止滑动 |
| onSwipeStart | 滑动开始的回调函数 | (data: object, e: string) => void | e: 组件上 data-xxx 中的数据;data: direction(滑动的按钮是左边还是右边),swiped(是否滑开) |
| onSwipeEnd | 滑动结束的回调函数 | (data: object, e: string) => void | e: 组件上 data-xxx 中的数据;data: direction(滑动的按钮是左边还是右边),swiped(是否滑开) |
| onButtonTap | 按钮触发的回调函数 | (data: object, e: string) => void | e: 组件上 data-xxx 中的数据;data: direction(滑动的按钮是左边还是右边),btnIdx(按钮的索引,靠近主体部分为 0) |
### SwipeButton
| 属性 | 类型 | 默认值 | 说明 |
| -------------|----------------|-------|------------------------------------------- |
| text | string | - | 按钮文字 |
| bgColor | string | - | 按钮背景颜色 |
| color | string | #fff | 按钮字体颜色 |
| width | number | 150 | 按钮长度 |
| confirmType | '' &verbar; 'move' &verbar; 'tap' | - | 二次确认的类型,不触发二次确认 &verbar; 滑动超出最大距离触发二次确认 &verbar; 点击触发二次确认 |
| confirmText | string | - | 二次确认的文案描述,不填则展示text |
| 属性 | 类型 | 默认值 | 说明 |
| ----------- | --------------------------- | ------ | -------------------------------------------------------------------------------- |
| text | string | - | 按钮文字 |
| bgColor | string | - | 按钮背景颜色 |
| color | string | `#fff` | 按钮字体颜色 |
| width | number | 150 | 按钮宽度 |
| confirmType | `''` \| `'move'` \| `'tap'` | - | 二次确认类型:不触发二次确认 \| 滑动超出最大距离触发二次确认 \| 点击触发二次确认 |
| confirmText | string | - | 二次确认的文案描述;若为空,则展示 text |

@@ -14,8 +14,8 @@ ---

开关选择器,相比较于原生 Switch 实现了 iOS 跟 android 端体验一致
Switch 开关选择器,比起原生 Switch,它实现了在 iOS 和 Android 端一致的体验。
## 何时使用
- 需要表示开关状态/两种状态之间的切换时
- 和 Checkbox 的区别是,切换 Switch 会直接触发状态改变,而 Checkbox 一般用于状态标记,需要和提交操作配合
- 当需要表示开关状态或两种状态之间切换时使用。
- 与 Checkbox 的区别在于,切换 Switch 会直接触发状态改变,而 Checkbox 通常用于状态标记,需要与提交操作配合使用。

@@ -34,8 +34,8 @@ ## 代码示例

| color | 选中背景色 | string | - |
| defaultChecked | 默认是否勾选 | boolean | false |
| disabled | 是否禁用 | boolean | false |
| loading | 是否加载状态 | boolean | false |
| defaultChecked | 默认是否勾选 | boolean | `false` |
| disabled | 是否禁用 | boolean | `false` |
| loading | 是否加载状态 | boolean | `false` |
| uncheckedText | 非选中时的内容 | string \| slot | - |
| size | 组件尺寸,可选 `medium` `small` `x-small` | string | `medium` |
| size | 组件尺寸,可选值为 `medium`、`small`、`x-small` | string | `medium` |
| style | 样式 | string | - |
| onChange | 点击 switch,触发此回调 | (checked: boolean, event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - |
| onChange | 点击 Switch 时触发的回调 | (checked: boolean, event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - |

@@ -30,6 +30,6 @@ ---

| icon | 选项卡图标作用域插槽,接收 item、index、active 参数 | slot | - |
| items | 底部图标配置 | [TabItem](#tabitem)[] | [] |
| items | 底部图标配置 | [TabItem](#tabitem)[] | [] |
| style | 样式 | string | - |
| text | 选项卡底部文字作用域插槽,接收 item、index、active 参数 | slot | - |
| onChange | Tab 切换时触发回调 | (index: number) => void | - |
| onChange | Tab 切换时触发回调 | `(index: number) => void` | - |

@@ -36,0 +36,0 @@ ### TabItem

@@ -9,2 +9,3 @@ ---

---
# Tabs 标签页

@@ -14,8 +15,7 @@

内容组之间进行导航切换
内容组之间进行导航切换。
## 何时使用
- 内容组之间进行导航切换
- 当前内容需要分成同层级结构的组,进行内容切换展示,用在表单或者标准列表界面的顶部
- 内容组之间进行导航切换。
- 当前内容需要分成同层级结构的组,进行内容切换展示,用在表单或者标准列表界面的顶部。
## 代码示例

@@ -35,19 +35,14 @@ ### 基本使用

### 电梯模式
- 滚动会对应到 tab。
- 点击 tab 可滚动到对应 tab title。
- onChange 只会在 tab 切换触发,示例里自定义 title onTap 可滚动 current tab。
- 滚动会对应到tab
- 点击tab可滚动到对应tab title
- onChange只会在tab切换触发,示例里自定义title onTap可滚动current tab
<code src='pages/TabsElevator/index'></code>
### 吸顶
- 滑动到最顶部会吸顶。
- 切换 tab content 会滚动到最顶部。
- 滑动到最顶部会吸顶,
- 切换tab content会滚动到最顶部
<code src='pages/TabsSticky/index'></code>
### 纵向模式

@@ -61,26 +56,25 @@ <code src='pages/TabsVertical/index'></code>

| 属性 | 说明 | 类型 | 默认值 |
| -----|-----|-----|-----|
| className | 类名| string | - |
| ---- | ---- | ---- | ---- |
| className | 类名 | string | - |
| current | 选中索引 | number | - |
| defaultCurrent | 选中索引初始值 | number | 0 |
| direction | tabs方向, `horizontal`(水平) `vertical` (垂直) | string | horizontal |
| direction | tabs 方向,`horizontal`(水平) `vertical`(垂直) | string | horizontal |
| items | 选项,数量必须大于 0 | `Item[]` | - |
| plus | 右上角操作按钮插槽; <br /> slot-scope 包括 `value`(对应 `Item`) `index`(对应 `Item` 的索引) | slot | - |
| plus | 右上角操作按钮插槽;<br /> `slot-scope` 包括 `value`(对应 `Item`) `index`(对应 `Item` 的索引) | slot | - |
| scrollMode | 滚动方式,可选 'edge', 'center' | string | edge |
| style | 样式| string | - |
| tabsBarClassName | tabs bar类名 | string | - |
| tabClassName | tab类名 | string | - |
| tabActiveClassName | tab active类名 | string | - |
| title | 自定义 `Items` 标题;<br /> slot-scope 包括 `value`(对应 `Item`) `index`(对应 `Item` 的索引) | slot | - |
| style | 样式 | string | - |
| tabsBarClassName | tabs bar 类名 | string | - |
| tabClassName | tab 类名 | string | - |
| tabActiveClassName | tab active 类名 | string | - |
| title | 自定义 `Items` 标题;<br /> `slot-scope` 包括 `value`(对应 `Item`) `index`(对应 `Item` 的索引) | slot | - |
| type | 类型,`basic`(基础),`capsule`(胶囊),`mixin`(混合) | string | `basic` |
| onChange | 面板切换时候,触发回调 | (index: number, e: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void| - |
| onChange | 面板切换时候,触发回调 | (index: number, e: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - |
### Item
| 属性 | 说明 | 类型 | 默认值 |
| -----|-----|-----|-----|
| ---- | ---- | ---- | ---- |
| title | 标题 | string | - |
在 Item 里除了可以有 `title`,还可以加上自定义的属性,比如 `content`, `badge` 等,这些属性可使用使用 `sloc-scope` 访问:
在 Item 里除了可以有 `title`,还可以加上自定义的属性,比如 `content`, `badge` 等,这些属性可使用 `slot-scope` 访问:
```js

@@ -100,4 +94,4 @@ Page({

title: 'tab 3',
content: 'tab 3 content',
},
content: 'tab 3 content'
}
]

@@ -111,3 +105,3 @@ }

<view slot="title" slot-scope="tab">
{{tab.index}}: {{tab.value.title}}, {{tab.value.content}}
{{ tab.index }}:{{ tab.value.title }},{{ tab.value.content }}
</view>

@@ -118,8 +112,8 @@ </tabs>

## FAQ
### onChange只有修改才能触发,想要在触发current标签的点击需要怎么做
可以受用slot来自定义
### onChange 只有修改才能触发,想要在触发 current 标签的点击需要怎么做
可以使用 `slot` 来自定义。
```html
<tabs items="{{items}}" onChange="onChange">
<view slot="title" slot-scope="tab" data-index="{{tab.index}}" onTap="onTap">
{{tab.value.title}}
{{ tab.value.title }}
</view>

@@ -132,8 +126,8 @@ </tabs>

onChange(index) {
console.log(index);
console.log(index)
},
onTap(e) {
const { index } = e.currentTarget.dataset;
const { index } = e.currentTarget.dataset
}
})
```
```
---
nav:

@@ -9,2 +10,3 @@ path: /components

---
# Tag 标签

@@ -14,6 +16,7 @@

进行标记和分类的小标签
用于标记和分类的小标签。
## 何时使用
- 用于标记事物的属性和维度
- 进行分类
- 用来标记事物的属性和维度。
- 进行分类。

@@ -26,8 +29,8 @@ ## 代码示例

## API
| 属性 | 说明 | 类型 | 默认值 |
| -----|-----|-----|-----|
| className | 类名| string | - |
| color | 标签颜色, 内建 `primary`(蓝), `success`(绿), `warning`(黄), `danger`(红) | string | `primary` |
| icon | 图标,支持Icon类型和插槽 | string\|slot | - |
| style | 样式| string | - |
| type | 类型,可选`outline` `fill` `fill-light` | string | `fill` |
| 属性 | 说明 | 类型 | 默认值 |
| ------ | -------- | --------------- | --------- |
| className | 类名 | string | - |
| color | 标签颜色,内建 `primary`(蓝色)、`success`(绿色)、`warning`(黄色)、`danger`(红色) | string | `primary` |
| icon | 图标,支持 Icon 类型和插槽 | string\|slot | - |
| style | 样式 | string | - |
| type | 类型,可选 `outline`、`fill`、`fill-light` | string | `fill` |

@@ -9,2 +9,3 @@ ---

---
# Toast 轻提示

@@ -15,3 +16,3 @@

## 何时使用
对操作结果的轻量级反馈,无需用户操作即可自行消失。最长文案不超过2行,最多可以显示24个字符,文案过长会被截断
对操作结果的轻量级反馈,无需用户操作即可自行消失。最长文案不超过 2 行,最多可以显示 24 个字符,文案过长会被截断。

@@ -22,17 +23,15 @@ ## 代码示例

## API
| 属性 | 说明 | 类型 | 默认值 |
| -----|-----|-----|----- |
| className | 组件根节点类名 | string | - |
| content | 文本内容 | string | - |
| duration | 持续时间, 为0时不会自动关闭 | number | 2000 |
| maskCloseable | 点击蒙层是否关闭 | boolean | false |
| icon | 图标,支持 Icon 组件所有type | string | - |
| image | 图片链接 | string | - |
| maskStyle | 蒙层样式 | string | - |
| showMask | 是否展示蒙层 | boolean | false |
| style | 样式 | string | - |
| type | 内置图标类型,可选`success` `error` `warning` `loading` | string | - |
| visible | 是否隐藏 | boolean | false |
| onClose | Toast 关闭后的回调 | (e) => void | - |
| 属性 | 说明 | 类型 | 默认值 |
| ------ | ---------------------- | ------- | ------ |
| className | 组件根节点类名 | string | - |
| content | 文本内容 | string | - |
| duration | 持续时间,为 0 时不会自动关闭 | number | 2000 |
| maskCloseable | 点击蒙层是否关闭 | boolean | false |
| icon | 图标,支持 Icon 组件所有 type | string | - |
| image | 图片链接 | string | - |
| maskStyle | 蒙层样式 | string | - |
| showMask | 是否展示蒙层 | boolean | false |
| style | 样式 | string | - |
| type | 内置图标类型,可选 `success` `error` `warning` `loading` | string | - |
| visible | 是否隐藏 | boolean | false |
| onClose | Toast 关闭后的回调 | (e) => void | - |

@@ -5,5 +5,5 @@ {

"form-item": "../FormItem/index",
"cascader-picker": "../../Picker/CascaderPicker/index",
"icon": "../../Icon/index"
"ant-cascader-picker": "../../Picker/CascaderPicker/index",
"ant-icon": "../../Icon/index"
}
}

@@ -7,2 +7,3 @@ import { useEvent } from 'functional-mini/component';

import { FormDatePickerDefaultProps } from './props';
import { platform } from '../../_util/platform';
var FormDatePicker = function (props) {

@@ -12,3 +13,3 @@ var _a = useFormItem(props), formData = _a.formData, emit = _a.emit;

useMultipleValueHandleCustomEvent('onOk', function (date, dateStr, e) {
emit('onChange', date);
emit('onChange', platform() === 'wechat' ? date.getTime() : date);
triggerEventValues('ok', [date, dateStr], e);

@@ -15,0 +16,0 @@ });

@@ -5,5 +5,5 @@ {

"form-item": "../FormItem/index",
"date-picker": "../../DatePicker/index",
"icon": "../../Icon/index"
"ant-date-picker": "../../DatePicker/index",
"ant-icon": "../../Icon/index"
}
}

@@ -5,5 +5,5 @@ {

"form-item": "../FormItem/index",
"picker": "../../Picker/index",
"icon": "../../Icon/index"
"ant-picker": "../../Picker/index",
"ant-icon": "../../Icon/index"
}
}

@@ -5,4 +5,4 @@ {

"form-item": "../FormItem/index",
"radio-group": "../../Radio/RadioGroup/index"
"ant-radio-group": "../../Radio/RadioGroup/index"
}
}

@@ -5,2 +5,3 @@ import { useEvent } from 'functional-mini/component';

import { useHandleCustomEvent, useHandleCustomEventOnly, useMultipleValueHandleCustomEvent, } from '../../_util/hooks/useHandleCustomEvent';
import { platform } from '../../_util/platform';
import { useFormItem } from '../use-form-item';

@@ -12,3 +13,8 @@ import { FormRangePickerDefaultProps } from './props';

useMultipleValueHandleCustomEvent('onOk', function (date, dateStr, e) {
emit('onChange', date);
emit('onChange', date.map(function (o) {
if (platform() === 'wechat') {
return o.getTime();
}
return o;
}));
triggerEventValues('ok', [date, dateStr], e);

@@ -15,0 +21,0 @@ });

@@ -5,5 +5,5 @@ {

"form-item": "../FormItem/index",
"range-picker": "../../DatePicker/RangePicker/index",
"icon": "../../Icon/index"
"ant-range-picker": "../../DatePicker/RangePicker/index",
"ant-icon": "../../Icon/index"
}
}

@@ -5,5 +5,5 @@ {

"form-item": "../FormItem/index",
"cascader-picker": "../../Picker/CascaderPicker/index",
"icon": "../../Icon/index"
"ant-cascader-picker": "../../Picker/CascaderPicker/index",
"ant-icon": "../../Icon/index"
}
}

@@ -7,2 +7,3 @@ import { useEvent } from 'functional-mini/component';

import { FormDatePickerDefaultProps } from './props';
import { platform } from '../../_util/platform';
var FormDatePicker = function (props) {

@@ -12,3 +13,3 @@ var _a = useFormItem(props), formData = _a.formData, emit = _a.emit;

useMultipleValueHandleCustomEvent('onOk', function (date, dateStr, e) {
emit('onChange', date);
emit('onChange', platform() === 'wechat' ? date.getTime() : date);
triggerEventValues('ok', [date, dateStr], e);

@@ -15,0 +16,0 @@ });

@@ -5,5 +5,5 @@ {

"form-item": "../FormItem/index",
"date-picker": "../../DatePicker/index",
"icon": "../../Icon/index"
"ant-date-picker": "../../DatePicker/index",
"ant-icon": "../../Icon/index"
}
}

@@ -5,5 +5,5 @@ {

"form-item": "../FormItem/index",
"picker": "../../Picker/index",
"icon": "../../Icon/index"
"ant-picker": "../../Picker/index",
"ant-icon": "../../Icon/index"
}
}

@@ -5,4 +5,4 @@ {

"form-item": "../FormItem/index",
"radio-group": "../../Radio/RadioGroup/index"
"ant-radio-group": "../../Radio/RadioGroup/index"
}
}

@@ -5,2 +5,3 @@ import { useEvent } from 'functional-mini/component';

import { useHandleCustomEvent, useHandleCustomEventOnly, useMultipleValueHandleCustomEvent, } from '../../_util/hooks/useHandleCustomEvent';
import { platform } from '../../_util/platform';
import { useFormItem } from '../use-form-item';

@@ -12,3 +13,8 @@ import { FormRangePickerDefaultProps } from './props';

useMultipleValueHandleCustomEvent('onOk', function (date, dateStr, e) {
emit('onChange', date);
emit('onChange', date.map(function (o) {
if (platform() === 'wechat') {
return o.getTime();
}
return o;
}));
triggerEventValues('ok', [date, dateStr], e);

@@ -15,0 +21,0 @@ });

@@ -5,5 +5,5 @@ {

"form-item": "../FormItem/index",
"range-picker": "../../DatePicker/RangePicker/index",
"icon": "../../Icon/index"
"ant-range-picker": "../../DatePicker/RangePicker/index",
"ant-icon": "../../Icon/index"
}
}
{
"name": "antd-mini",
"version": "2.27.0",
"version": "2.27.1",
"description": "antd-mini 是支付宝小程序 UI 组件库,遵循 Ant Design 规范。",

@@ -5,0 +5,0 @@ "miniprogram": "compiled/wechat/src",

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc