diff --git a/README.md b/README.md index a7ba1eae..ae5a8f26 100644 --- a/README.md +++ b/README.md @@ -94,7 +94,7 @@ PS：关于 `van-area` Area 省市区选择组件，地区数据初始化可以 ## 基础库版本 -Vant Weapp 最低支持到小程序基础库 2.2.3 版本 +Vant Weapp 最低支持到小程序基础库 2.6.5 版本 ## 链接 diff --git a/example/pages/slider/index.wxml b/example/pages/slider/index.wxml index 94dd2207..68f1c6eb 100644 --- a/example/pages/slider/index.wxml +++ b/example/pages/slider/index.wxml @@ -6,6 +6,15 @@ /> + + + + openType="getUserInfo"时有效 | - | -| bind:contact | 客服消息回调，openType="contact"时有效 | - | -| bind:getphonenumber | 获取用户手机号回调，openType="getPhoneNumber"时有效 | - | -| bind:error | 当使用开放能力时，发生错误的回调，openType="launchApp"时有效 | - | -| bind:launchapp | 打开 APP 成功的回调，openType="launchApp"时有效 | - | -| bind:opensetting | 在打开授权设置页后回调，openType="openSetting"时有效 | - | +| 事件名 | 说明 | 参数 | +| ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- | +| bind:select | 选中选项时触发，禁用或加载状态下不会触发 | event.detail: 选项对应的对象 | +| bind:close | 关闭时触发 | - | +| bind:cancel | 取消按钮点击时触发 | - | +| bind:click-overlay | 点击遮罩层时触发 | - | +| bind:getuserinfo | 用户点击该按钮时，会返回获取到的用户信息，回调的 detail 数据与 wx.getUserInfo 返回的一致，openType="getUserInfo"时有效 | - | +| bind:contact | 客服消息回调，openType="contact"时有效 | - | +| bind:getphonenumber | 获取用户手机号回调，openType="getPhoneNumber"时有效 | - | +| bind:error | 当使用开放能力时，发生错误的回调，openType="launchApp"时有效 | - | +| bind:launchapp | 打开 APP 成功的回调，openType="launchApp"时有效 | - | +| bind:opensetting | 在打开授权设置页后回调，openType="openSetting"时有效 | - | ### actions `API`中的`actions`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key`： -| 键名 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| name | 标题 | _string_ | - | -| subname | 二级标题 | _string_ | - | -| color | 选项文字颜色 | _string_ | - | -| loading | 是否为加载状态 | _boolean_ | - | -| disabled | 是否为禁用状态 | _boolean_ | - | -| className | 为对应列添加额外的 class 类名 | _string_ | - | -| openType | 微信开放能力，具体支持可参考 [微信官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html) | _string_ | - | -| lang | 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文 | _string_ | `en` | -| sessionFrom | 会话来源，openType="contact"时有效 | _string_ | - | -| sendMessageTitle | 会话内消息卡片标题，openType="contact"时有效 | _string_ | 当前标题 | -| sendMessagePath | 会话内消息卡片点击跳转小程序路径，openType="contact"时有效 | _string_ | 当前分享路径 | -| sendMessageImg | 会话内消息卡片图片，openType="contact"时有效 | _string_ | 截图 | -| showMessageCard | 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，openType="contact"时有效 | _string_ | `false` | -| appParameter | 打开 APP 时，向 APP 传递的参数，openType=launchApp 时有效 | _string_ | - | +| 键名 | 说明 | 类型 | 默认值 | +| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------------ | +| name | 标题 | _string_ | - | +| subname | 二级标题 | _string_ | - | +| color | 选项文字颜色 | _string_ | - | +| loading | 是否为加载状态 | _boolean_ | - | +| disabled | 是否为禁用状态 | _boolean_ | - | +| className | 为对应列添加额外的 class 类名 | _string_ | - | +| openType | 微信开放能力，具体支持可参考 [微信官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html) | _string_ | - | +| lang | 指定返回用户信息的语言，zh\_CN 简体中文，zh\_TW 繁体中文，en 英文 | _string_ | `en` | +| sessionFrom | 会话来源，openType="contact"时有效 | _string_ | - | +| sendMessageTitle | 会话内消息卡片标题，openType="contact"时有效 | _string_ | 当前标题 | +| sendMessagePath | 会话内消息卡片点击跳转小程序路径，openType="contact"时有效 | _string_ | 当前分享路径 | +| sendMessageImg | 会话内消息卡片图片，openType="contact"时有效 | _string_ | 截图 | +| showMessageCard | 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，openType="contact"时有效 | _string_ | `false` | +| appParameter | 打开 APP 时，向 APP 传递的参数，openType=launchApp 时有效 | _string_ | - | diff --git a/packages/area/README.md b/packages/area/README.md index c4475532..9719eb8c 100644 --- a/packages/area/README.md +++ b/packages/area/README.md @@ -126,34 +126,34 @@ db.collection('region') ### Props -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| --- | --- | --- | --- | --- | -| value | 当前选中的省市区`code` | _string_ | - | - | -| title | 顶部栏标题 | _string_ | - | - | -| area-list | 省市区数据，格式见下方 | _object_ | - | - | -| columns-num | 省市区显示列数，3-省市区，2-省市，1-省 | _string \| number_ | `3` | - | -| columns-placeholder | 列占位提示文字 | _string[]_ | `[]` | - | -| loading | 是否显示加载状态 | _boolean_ | `false` | - | -| item-height | 选项高度 | _number_ | `44` | - | -| visible-item-count | 可见的选项个数 | _number_ | `6` | - | -| confirm-button-text | 确认按钮文字 | _string_ | `确认` | - | -| cancel-button-text | 取消按钮文字 | _string_ | `取消` | - | +| 参数 | 说明 | 类型 | 默认值 | +| ------------------- | -------------------------------------- | ------------------ | ------- | +| value | 当前选中的省市区`code` | _string_ | - | +| title | 顶部栏标题 | _string_ | - | +| area-list | 省市区数据，格式见下方 | _object_ | - | +| columns-num | 省市区显示列数，3-省市区，2-省市，1-省 | _string \| number_ | `3` | +| columns-placeholder | 列占位提示文字 | _string[]_ | `[]` | +| loading | 是否显示加载状态 | _boolean_ | `false` | +| item-height | 选项高度 | _number_ | `44` | +| visible-item-count | 可见的选项个数 | _number_ | `6` | +| confirm-button-text | 确认按钮文字 | _string_ | `确认` | +| cancel-button-text | 取消按钮文字 | _string_ | `取消` | ### Events -| 事件 | 说明 | 回调参数 | -| --- | --- | --- | -| bind:confirm | 点击右上方完成按钮 | 一个数组参数，具体格式看下方数据格式章节 | -| bind:cancel | 点击取消按钮时 | - | -| bind:change | 选项改变时触发 | Picker 实例，所有列选中值，当前列对应的索引 | +| 事件 | 说明 | 回调参数 | +| ------------ | ------------------ | ------------------------------------------- | +| bind:confirm | 点击右上方完成按钮 | 一个数组参数，具体格式看下方数据格式章节 | +| bind:cancel | 点击取消按钮时 | - | +| bind:change | 选项改变时触发 | Picker 实例，所有列选中值，当前列对应的索引 | ### 方法 通过 selectComponent 可以获取到 Area 实例并调用实例方法。 -| 方法名 | 参数 | 返回值 | 介绍 | -| --- | --- | --- | --- | -| reset | code: string | - | 根据 code 重置所有选项，若不传 code，则重置到第一项 | +| 方法名 | 参数 | 返回值 | 介绍 | +| ------ | ------------ | ------ | --------------------------------------------------- | +| reset | code: string | - | 根据 code 重置所有选项，若不传 code，则重置到第一项 | ### 点击完成时返回的数据格式 diff --git a/packages/button/README.md b/packages/button/README.md index ac92eb14..1f82a1a9 100644 --- a/packages/button/README.md +++ b/packages/button/README.md @@ -117,47 +117,47 @@ ### Props -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| --- | --- | --- | --- | --- | -| id | 标识符 | _string_ | - | - | -| type | 按钮类型，可选值为 `primary` `info` `warning` `danger` | _string_ | `default` | - | -| size | 按钮尺寸，可选值为 `normal` `large` `small` `mini` | _string_ | `normal` | - | -| color | 按钮颜色，支持传入`linear-gradient`渐变色 | _string_ | - | 1.0.0 | -| icon | 左侧图标名称或图片链接，可选值见 [Icon 组件](#/icon) | _string_ | - | - | -| class-prefix | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/icon) | _string_ | `van-icon` | - | -| plain | 是否为朴素按钮 | _boolean_ | `false` | - | -| block | 是否为块级元素 | _boolean_ | `false` | - | -| round | 是否为圆形按钮 | _boolean_ | `false` | - | -| square | 是否为方形按钮 | _boolean_ | `false` | - | -| disabled | 是否禁用按钮 | _boolean_ | `false` | - | -| hairline | 是否使用 0.5px 边框 | _boolean_ | `false` | - | -| loading | 是否显示为加载状态 | _boolean_ | `false` | - | -| loading-text | 加载状态提示文字 | _string_ | - | - | -| loading-type | 加载状态图标类型，可选值为 `spinner` | _string_ | `circular` | - | -| loading-size | 加载图标大小 | _string_ | `20px` | - | -| custom-style | 自定义样式 | _string_ | - | - | -| open-type | 微信开放能力，具体支持可参考 [微信官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html) | _string_ | - | - | -| app-parameter | 打开 APP 时，向 APP 传递的参数 | _string_ | - | - | -| lang | 指定返回用户信息的语言，zh_CN 简体中文，
zh_TW 繁体中文，en 英文 | _string_ | `en` | - | - | -| session-from | 会话来源 | _string_ | - | - | -| business-id | 客服消息子商户 id | _number_ | - | - | -| send-message-title | 会话内消息卡片标题 | _string_ | 当前标题 | - | -| send-message-path | 会话内消息卡片点击跳转小程序路径 | _string_ | 当前分享路径 | - | -| send-message-img | sendMessageImg | _string_ | 截图 | - | -| show-message-card | 显示会话内消息卡片 | _string_ | `false` | - | -| dataset | 按钮 dataset，open-type 为 `share` 时，可在 onShareAppMessage 事件的 `event.target.dataset.detail` 中看到传入的值 | _any_ | - | - | -| form-type | 用于 form 组件，可选值为`submit` `reset`，点击分别会触发 form 组件的 submit/reset 事件 | _string_ | - | - | +| 参数 | 说明 | 类型 | 默认值 | +| ------------------ | ------------------------------------------------------------------------------------------------------------------- | --------- | ------------ | +| id | 标识符 | _string_ | - | +| type | 按钮类型，可选值为 `primary` `info` `warning` `danger` | _string_ | `default` | +| size | 按钮尺寸，可选值为 `normal` `large` `small` `mini` | _string_ | `normal` | +| color `v1.0.0` | 按钮颜色，支持传入`linear-gradient`渐变色 | _string_ | - | +| icon | 左侧图标名称或图片链接，可选值见 [Icon 组件](#/icon) | _string_ | - | +| class-prefix | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/icon) | _string_ | `van-icon` | +| plain | 是否为朴素按钮 | _boolean_ | `false` | +| block | 是否为块级元素 | _boolean_ | `false` | +| round | 是否为圆形按钮 | _boolean_ | `false` | +| square | 是否为方形按钮 | _boolean_ | `false` | +| disabled | 是否禁用按钮 | _boolean_ | `false` | +| hairline | 是否使用 0.5px 边框 | _boolean_ | `false` | +| loading | 是否显示为加载状态 | _boolean_ | `false` | +| loading-text | 加载状态提示文字 | _string_ | - | +| loading-type | 加载状态图标类型，可选值为 `spinner` | _string_ | `circular` | +| loading-size | 加载图标大小 | _string_ | `20px` | +| custom-style | 自定义样式 | _string_ | - | +| open-type | 微信开放能力，具体支持可参考 [微信官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html) | _string_ | - | +| app-parameter | 打开 APP 时，向 APP 传递的参数 | _string_ | - | +| lang | 指定返回用户信息的语言，zh\_CN 简体中文，
zh\_TW 繁体中文，en 英文 | _string_ | `en` | +| session-from | 会话来源 | _string_ | - | +| business-id | 客服消息子商户 id | _number_ | - | +| send-message-title | 会话内消息卡片标题 | _string_ | 当前标题 | +| send-message-path | 会话内消息卡片点击跳转小程序路径 | _string_ | 当前分享路径 | +| send-message-img | sendMessageImg | _string_ | 截图 | +| show-message-card | 显示会话内消息卡片 | _string_ | `false` | +| dataset | 按钮 dataset，open-type 为 `share` 时，可在 onShareAppMessage 事件的 `event.target.dataset.detail` 中看到传入的值 | _any_ | - | +| form-type | 用于 form 组件，可选值为`submit` `reset`，点击分别会触发 form 组件的 submit/reset 事件 | _string_ | - | ### Events -| 事件名 | 说明 | 参数 | -| --- | --- | --- | -| bind:click | 点击按钮，且按钮状态不为加载或禁用时触发 | - | -| bind:getuserinfo | 用户点击该按钮时，会返回获取到的用户信息，
从返回参数的 detail 中获取到的值同 wx.getUserInfo | - | -| bind:contact | 客服消息回调 | - | -| bind:getphonenumber | 获取用户手机号回调 | - | -| bind:error | 当使用开放能力时，发生错误的回调 | - | -| bind:opensetting | 在打开授权设置页后回调 | - | +| 事件名 | 说明 | 参数 | +| ------------------- | ----------------------------------------------------------------------------------------------- | ---- | +| bind:click | 点击按钮，且按钮状态不为加载或禁用时触发 | - | +| bind:getuserinfo | 用户点击该按钮时，会返回获取到的用户信息，
从返回参数的 detail 中获取到的值同 wx.getUserInfo | - | +| bind:contact | 客服消息回调 | - | +| bind:getphonenumber | 获取用户手机号回调 | - | +| bind:error | 当使用开放能力时，发生错误的回调 | - | +| bind:opensetting | 在打开授权设置页后回调 | - | > Button 提供的是 click 事件而不是原生 tap 事件，按钮禁用时，click 事件不会触发，tap 事件依然会触发。 diff --git a/packages/calendar/README.md b/packages/calendar/README.md index 938ec588..802c163e 100644 --- a/packages/calendar/README.md +++ b/packages/calendar/README.md @@ -321,17 +321,17 @@ Page({ ### Events -| 事件名 | 说明 | 回调参数 | -| ---------------------- | ------------------------------------------------------------------ | ------------------------------ | -| select | 点击任意日期时触发 | _value: Date \| Date[]_ | -| unselect | 当 Canlendar 的 `type` 为 `multiple` 时,点击已选中的日期时触发 | _value: Date_ | -| confirm | 日期选择完成后触发，若`show-confirm`为`true`，则点击确认按钮后触发 | _value: Date \| Date[]_ | -| open | 打开弹出层时触发 | - | -| close | 关闭弹出层时触发 | - | -| opened | 打开弹出层且动画结束后触发 | - | -| closed | 关闭弹出层且动画结束后触发 | - | -| over-range | 范围选择超过最多可选天数时触发 | - | -| click-subtitle `1.8.1` | 点击日历副标题时触发 | _WechatMiniprogram.TouchEvent_ | +| 事件名 | 说明 | 回调参数 | +| ----------------------- | ------------------------------------------------------------------ | ------------------------------ | +| select | 点击任意日期时触发 | _value: Date \| Date[]_ | +| unselect | 当 Canlendar 的 `type` 为 `multiple` 时,点击已选中的日期时触发 | _value: Date_ | +| confirm | 日期选择完成后触发，若`show-confirm`为`true`，则点击确认按钮后触发 | _value: Date \| Date[]_ | +| open | 打开弹出层时触发 | - | +| close | 关闭弹出层时触发 | - | +| opened | 打开弹出层且动画结束后触发 | - | +| closed | 关闭弹出层且动画结束后触发 | - | +| over-range | 范围选择超过最多可选天数时触发 | - | +| click-subtitle `v1.8.1` | 点击日历副标题时触发 | _WechatMiniprogram.TouchEvent_ | ### Slots diff --git a/packages/card/README.md b/packages/card/README.md index 5e921933..ddecd197 100644 --- a/packages/card/README.md +++ b/packages/card/README.md @@ -52,21 +52,21 @@ ### Props -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| --- | --- | --- | --- | --- | -| thumb | 左侧图片 | _string_ | - | - | -| thumb-mode | 左侧图片裁剪、缩放的模式，可选值参考小程序 image 组件 mode 属性值 | _string_ | `aspectFit` | - | -| title | 标题 | _string_ | - | - | -| desc | 描述 | _string_ | - | - | -| tag | 标签 | _string_ | - | - | -| num | 商品数量 | _string \| number_ | - | - | -| price | 商品价格 | _string \| number_ | - | - | -| origin-price | 商品划线原价 | _string \| number_ | - | - | -| centered | 内容是否垂直居中 | _string_ | `false` | - | -| currency | 货币符号 | _string_ | `¥` | - | -| thumb-link | 点击左侧图片后跳转的链接地址 | _string_ | - | - | -| link-type | 链接跳转类型，可选值为 `redirectTo` `switchTab` `reLaunch` | _string_ | `navigateTo` | - | -| lazy-load | 是否开启图片懒加载 | _boolean_ | `false` | - | +| 参数 | 说明 | 类型 | 默认值 | +| ------------ | ----------------------------------------------------------------- | ------------------ | ------------ | +| thumb | 左侧图片 | _string_ | - | +| thumb-mode | 左侧图片裁剪、缩放的模式，可选值参考小程序 image 组件 mode 属性值 | _string_ | `aspectFit` | +| title | 标题 | _string_ | - | +| desc | 描述 | _string_ | - | +| tag | 标签 | _string_ | - | +| num | 商品数量 | _string \| number_ | - | +| price | 商品价格 | _string \| number_ | - | +| origin-price | 商品划线原价 | _string \| number_ | - | +| centered | 内容是否垂直居中 | _string_ | `false` | +| currency | 货币符号 | _string_ | `¥` | +| thumb-link | 点击左侧图片后跳转的链接地址 | _string_ | - | +| link-type | 链接跳转类型，可选值为 `redirectTo` `switchTab` `reLaunch` | _string_ | `navigateTo` | +| lazy-load | 是否开启图片懒加载 | _boolean_ | `false` | ### Slot diff --git a/packages/circle/README.md b/packages/circle/README.md index a90b8ca7..6a70ef33 100644 --- a/packages/circle/README.md +++ b/packages/circle/README.md @@ -90,18 +90,18 @@ Page({ ### Props -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| --- | --- | --- | --- | --- | -| value | 目标进度 | _number_ | `0` | - | -| type | 指定 canvas 类型，可选值为 `2d` | _string_ | - | - | -| size | 圆环直径，默认单位为 `px` | _number_ | `100` | - | -| color | 进度条颜色，传入对象格式可以定义渐变色 | _string \| object_ | `#1989fa` | - | -| layer-color | 轨道颜色 | _string_ | `#fff` | - | -| fill | 填充颜色 | _string_ | - | - | -| speed | 动画速度（单位为 value/s） | _number_ | `50` | - | -| text | 文字 | _string_ | - | - | -| stroke-width | 进度条宽度 | _number_ | `4` | - | -| clockwise | 是否顺时针增加 | _boolean_ | `true` | - | +| 参数 | 说明 | 类型 | 默认值 | +| ------------ | -------------------------------------- | ------------------ | ------- | +| value | 目标进度 | _number_ | `0` | +| type | 指定 canvas 类型，可选值为 `2d` | _string_ | - | +| size | 圆环直径，默认单位为 `px` | _number_ | `100` | +| color | 进度条颜色，传入对象格式可以定义渐变色 | _string \| object_ | `#1989fa` | +| layer-color | 轨道颜色 | _string_ | `#fff` | +| fill | 填充颜色 | _string_ | - | +| speed | 动画速度（单位为 value/s） | _number_ | `50` | +| text | 文字 | _string_ | - | +| stroke-width | 进度条宽度 | _number_ | `4` | +| clockwise | 是否顺时针增加 | _boolean_ | `true` | ### Slots diff --git a/packages/col/README.md b/packages/col/README.md index 3c690e4c..6ba6fb30 100644 --- a/packages/col/README.md +++ b/packages/col/README.md @@ -54,16 +54,16 @@ Layout 组件提供了`24列栅格`，通过在`Col`上添加`span`属性设置 ### Row Props -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| ------ | ----------------------------- | ------------------ | ------ | ---- | -| gutter | 列元素之间的间距（单位为 px） | _string \| number_ | - | - | +| 参数 | 说明 | 类型 | 默认值 | +| ------ | ----------------------------- | ------------------ | ------ | +| gutter | 列元素之间的间距（单位为 px） | _string \| number_ | - | ### Col Props -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| ------ | -------------- | ------------------ | ------ | ---- | -| span | 列元素宽度 | _string \| number_ | - | - | -| offset | 列元素偏移距离 | _string \| number_ | - | - | +| 参数 | 说明 | 类型 | 默认值 | +| ------ | -------------- | ------------------ | ------ | +| span | 列元素宽度 | _string \| number_ | - | +| offset | 列元素偏移距离 | _string \| number_ | - | ### 外部样式类 diff --git a/packages/collapse/README.md b/packages/collapse/README.md index 818152ab..e7ed081f 100644 --- a/packages/collapse/README.md +++ b/packages/collapse/README.md @@ -152,33 +152,33 @@ Page({ ### Collapse Props -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| --- | --- | --- | --- | --- | -| value | 当前展开面板的 name | 非手风琴模式：_(string \| number)[]_
手风琴模式：_string \| number_ | - | - | -| accordion | 是否开启手风琴模式 | _boolean_ | `false` | - | -| border | 是否显示外边框 | _boolean_ | `true` | - | +| 参数 | 说明 | 类型 | 默认值 | +| --------- | ------------------- | ---------------------------------------------------------------------- | ------- | +| value | 当前展开面板的 name | 非手风琴模式：_(string \| number)[]_
手风琴模式：_string \| number_ | - | +| accordion | 是否开启手风琴模式 | _boolean_ | `false` | +| border | 是否显示外边框 | _boolean_ | `true` | ### Collapse Event -| 事件名 | 说明 | 参数 | -| ------ | -------------- | ------------------------------ | -| change | 切换面板时触发 | activeNames: _string \| Array_ | -| open | 展开面板时触发 | currentName: _string \| number_ | -| close | 关闭面板时触发 | currentName: _string \| number_ | +| 事件名 | 说明 | 参数 | +| ------ | -------------- | ------------------------------ | +| change | 切换面板时触发 | activeNames: _string \| Array_ | +| open | 展开面板时触发 | currentName: _string \| number_ | +| close | 关闭面板时触发 | currentName: _string \| number_ | ### CollapseItem Props -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| --- | --- | --- | --- | --- | -| name | 唯一标识符，默认为索引值 | _string \| number_ | `index` | - | -| title | 标题栏左侧内容 | _string \| number_ | - | - | -| icon | 标题栏左侧图标名称或图片链接，可选值见 [Icon 组件](#/icon) | _string_ | - | - | -| value | 标题栏右侧内容 | _string \| number_ | - | - | -| label | 标题栏描述信息 | _string_ | - | - | -| border | 是否显示内边框 | _boolean_ | `true` | - | -| is-link | 是否展示标题栏右侧箭头并开启点击反馈 | _boolean_ | `true` | - | -| clickable | 是否开启点击反馈 | _boolean_ | `false` | - | -| disabled | 是否禁用面板 | _boolean_ | `false` | - | +| 参数 | 说明 | 类型 | 默认值 | +| --------- | ---------------------------------------------------------- | ------------------ | ------- | +| name | 唯一标识符，默认为索引值 | _string \| number_ | `index` | +| title | 标题栏左侧内容 | _string \| number_ | - | +| icon | 标题栏左侧图标名称或图片链接，可选值见 [Icon 组件](#/icon) | _string_ | - | +| value | 标题栏右侧内容 | _string \| number_ | - | +| label | 标题栏描述信息 | _string_ | - | +| border | 是否显示内边框 | _boolean_ | `true` | +| is-link | 是否展示标题栏右侧箭头并开启点击反馈 | _boolean_ | `true` | +| clickable | 是否开启点击反馈 | _boolean_ | `false` | +| disabled | 是否禁用面板 | _boolean_ | `false` | ### CollapseItem Slot diff --git a/packages/count-down/README.md b/packages/count-down/README.md index 2bcae1e0..c33ba3a8 100644 --- a/packages/count-down/README.md +++ b/packages/count-down/README.md @@ -138,13 +138,13 @@ Page({ ### Props -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| --- | --- | --- | --- | --- | -| time | 倒计时时长，单位毫秒 | _number_ | - | - | -| format | 时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒 | _string_ | `HH:mm:ss` | - | -| auto-start | 是否自动开始倒计时 | _boolean_ | `true` | - | -| millisecond | 是否开启毫秒级渲染 | _boolean_ | `false` | - | -| use-slot | 是否使用自定义样式插槽 | _boolean_ | `false` | - | +| 参数 | 说明 | 类型 | 默认值 | +| ----------- | ---------------------------------------------- | --------- | --- | +| time | 倒计时时长，单位毫秒 | _number_ | - | +| format | 时间格式，DD-日，HH-时，mm-分，ss-秒，SSS-毫秒 | _string_ | `HH:mm:ss` | +| auto-start | 是否自动开始倒计时 | _boolean_ | `true` | +| millisecond | 是否开启毫秒级渲染 | _boolean_ | `false` | +| use-slot | 是否使用自定义样式插槽 | _boolean_ | `false` | ### Events diff --git a/packages/datetime-picker/README.md b/packages/datetime-picker/README.md index a6be06b9..e4233a27 100644 --- a/packages/datetime-picker/README.md +++ b/packages/datetime-picker/README.md @@ -70,7 +70,7 @@ Page({ formatter(type, value) { if (type === 'year') { return `${value}年`; - } + } if (type === 'month') { return `${value}月`; } @@ -175,25 +175,25 @@ Page({ ### Props -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| --- | --- | --- | --- | --- | -| value | 当前选中值 | _string \| number_ | - | - | -| type | 类型，可选值为 `date` `time` `year-month`
不建议动态修改 | _string_ | `datetime` | - | -| min-date | 可选的最小时间，精确到分钟 | _number_ | 十年前 | - | -| max-date | 可选的最大时间，精确到分钟 | _number_ | 十年后 | - | -| min-hour | 可选的最小小时，针对 time 类型 | _number_ | `0` | - | -| max-hour | 可选的最大小时，针对 time 类型 | _number_ | `23` | - | -| min-minute | 可选的最小分钟，针对 time 类型 | _number_ | `0` | - | -| max-minute | 可选的最大分钟，针对 time 类型 | _number_ | `59` | - | -| filter | 选项过滤函数 | _(type, values) => values_ | - | - | -| formatter | 选项格式化函数 | _(type, value) => value_ | - | - | -| title | 顶部栏标题 | _string_ | `''` | - | -| show-toolbar | 是否显示顶部栏 | _boolean_ | `true` | - | -| loading | 是否显示加载状态 | _boolean_ | `false` | - | -| item-height | 选项高度 | _number_ | `44` | - | -| confirm-button-text | 确认按钮文字 | _string_ | `确认` | - | -| cancel-button-text | 取消按钮文字 | _string_ | `取消` | - | -| visible-item-count | 可见的选项个数 | _number_ | `6` | - | +| 参数 | 说明 | 类型 | 默认值 | +| ------------------- | ------------------------------------------------------------------------------ | -------------------------- | ---------- | +| value | 当前选中值 | _string \| number_ | - | +| type | 类型，可选值为 `date` `time` `year-month`
不建议动态修改 | _string_ | `datetime` | +| min-date | 可选的最小时间，精确到分钟 | _number_ | 十年前 | +| max-date | 可选的最大时间，精确到分钟 | _number_ | 十年后 | +| min-hour | 可选的最小小时，针对 time 类型 | _number_ | `0` | +| max-hour | 可选的最大小时，针对 time 类型 | _number_ | `23` | +| min-minute | 可选的最小分钟，针对 time 类型 | _number_ | `0` | +| max-minute | 可选的最大分钟，针对 time 类型 | _number_ | `59` | +| filter | 选项过滤函数 | _(type, values) => values_ | - | +| formatter | 选项格式化函数 | _(type, value) => value_ | - | +| title | 顶部栏标题 | _string_ | `''` | +| show-toolbar | 是否显示顶部栏 | _boolean_ | `true` | +| loading | 是否显示加载状态 | _boolean_ | `false` | +| item-height | 选项高度 | _number_ | `44` | +| confirm-button-text | 确认按钮文字 | _string_ | `确认` | +| cancel-button-text | 取消按钮文字 | _string_ | `取消` | +| visible-item-count | 可见的选项个数 | _number_ | `6` | ### Events diff --git a/packages/dialog/README.md b/packages/dialog/README.md index 47bcfda9..0d5a7095 100644 --- a/packages/dialog/README.md +++ b/packages/dialog/README.md @@ -158,117 +158,117 @@ Page({ ### 方法 -| 方法名 | 参数 | 返回值 | 介绍 | -| --- | --- | --- | --- | -| Dialog | `options` | `Promise` | 展示弹窗 | -| Dialog.alert | `options` | `Promise` | 展示消息提示弹窗 | -| Dialog.confirm | `options` | `Promise` | 展示消息确认弹窗 | -| Dialog.setDefaultOptions | `options` | `void` | 修改默认配置，对所有 Dialog 生效 | -| Dialog.resetDefaultOptions | - | `void` | 重置默认配置，对所有 Dialog 生效 | -| Dialog.close | - | `void` | 关闭弹窗 | -| Dialog.stopLoading | - | `void` | 停止按钮的加载状态 | +| 方法名 | 参数 | 返回值 | 介绍 | +| -------------------------- | --------- | --------- | -------------------------------- | +| Dialog | `options` | `Promise` | 展示弹窗 | +| Dialog.alert | `options` | `Promise` | 展示消息提示弹窗 | +| Dialog.confirm | `options` | `Promise` | 展示消息确认弹窗 | +| Dialog.setDefaultOptions | `options` | `void` | 修改默认配置，对所有 Dialog 生效 | +| Dialog.resetDefaultOptions | - | `void` | 重置默认配置，对所有 Dialog 生效 | +| Dialog.close | - | `void` | 关闭弹窗 | +| Dialog.stopLoading | - | `void` | 停止按钮的加载状态 | ### Options 通过函数调用 Dialog 时，支持传入以下选项： -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| title | 标题 | _string_ | - | -| width | 弹窗宽度，默认单位为`px` | _string \| number_ | `320px` | -| message | 文本内容，支持通过`\n`换行 | _string_ | - | -| messageAlign | 内容对齐方式，可选值为`left` `right` | _string_ | `center` | -| theme | 样式风格，可选值为`round-button` | _string_ | `default` | -| zIndex | z-index 层级 | _number_ | `100` | -| className | 自定义类名，dialog 在自定义组件内时无效 | _string_ | '' | -| customStyle | 自定义样式 | _string_ | '' | -| selector | 自定义选择器 | _string_ | `van-dialog` | -| showConfirmButton | 是否展示确认按钮 | _boolean_ | `true` | -| showCancelButton | 是否展示取消按钮 | _boolean_ | `false` | -| confirmButtonText | 确认按钮的文案 | _string_ | `确认` | -| cancelButtonText | 取消按钮的文案 | _string_ | `取消` | -| overlay | 是否展示遮罩层 | _boolean_ | `true` | -| overlayStyle | 自定义遮罩层样式 | _object_ | - | -| closeOnClickOverlay | 点击遮罩层时是否关闭弹窗 | _boolean_ | `false` | -| asyncClose | 已废弃，将在 2.0.0 移除，请使用 `beforeClose` 属性代替 | _boolean_ | `false` | -| beforeClose | 关闭前的回调函数，返回 `false` 可阻止关闭，支持返回 Promise | _(action) => boolean \| Promise_ | - | -| context | 选择器的选择范围，可以传入自定义组件的 this 作为上下文 | _object_ | 当前页面 | -| transition | 动画名称，可选值为`fade` `none` | _string_ | `scale` | -| confirmButtonOpenType | 确认按钮的微信开放能力，具体支持可参考 [微信官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html) | _string_ | - | +| 参数 | 说明 | 类型 | 默认值 | +| --------------------- | ----------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------- | ------------ | +| title | 标题 | _string_ | - | +| width | 弹窗宽度，默认单位为`px` | _string \| number_ | `320px` | +| message | 文本内容，支持通过`\n`换行 | _string_ | - | +| messageAlign | 内容对齐方式，可选值为`left` `right` | _string_ | `center` | +| theme | 样式风格，可选值为`round-button` | _string_ | `default` | +| zIndex | z-index 层级 | _number_ | `100` | +| className | 自定义类名，dialog 在自定义组件内时无效 | _string_ | '' | +| customStyle | 自定义样式 | _string_ | '' | +| selector | 自定义选择器 | _string_ | `van-dialog` | +| showConfirmButton | 是否展示确认按钮 | _boolean_ | `true` | +| showCancelButton | 是否展示取消按钮 | _boolean_ | `false` | +| confirmButtonText | 确认按钮的文案 | _string_ | `确认` | +| cancelButtonText | 取消按钮的文案 | _string_ | `取消` | +| overlay | 是否展示遮罩层 | _boolean_ | `true` | +| overlayStyle | 自定义遮罩层样式 | _object_ | - | +| closeOnClickOverlay | 点击遮罩层时是否关闭弹窗 | _boolean_ | `false` | +| asyncClose | 已废弃，将在 2.0.0 移除，请使用 `beforeClose` 属性代替 | _boolean_ | `false` | +| beforeClose | 关闭前的回调函数，返回 `false` 可阻止关闭，支持返回 Promise | _(action) => boolean \| Promise_ | - | +| context | 选择器的选择范围，可以传入自定义组件的 this 作为上下文 | _object_ | 当前页面 | +| transition | 动画名称，可选值为`fade` `none` | _string_ | `scale` | +| confirmButtonOpenType | 确认按钮的微信开放能力，具体支持可参考 [微信官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html) | _string_ | - | ### OpenType Options 使用`confirmButtonOpenType`后，支持以下选项： -| 参数 | 说明 | 类型 | 默认值 | open-type | -| --- | --- | --- | --- | --- | -| appParameter | 打开 APP 时，向 APP 传递的参数 | _string_ | - | `launchApp` | -| lang | 指定返回用户信息的语言，zh_CN 简体中文，
zh_TW 繁体中文，en 英文 | _string_ | `en` | `getUserInfo` | -| sessionFrom | 会话来源 | _string_ | - | `contact` | -| businessId | 客服消息子商户 id | _number_ | - | `contact` | -| sendMessageTitle | 会话内消息卡片标题 | _string_ | 当前标题 | `contact` | -| sendMessagePath | 会话内消息卡片点击跳转小程序路径 | _string_ | 当前分享路径 | `contact` | -| sendMessageImg | sendMessageImg | _string_ | 截图 | `contact` | -| showMessageCard | 显示会话内消息卡片 | _string_ | `false` | `contact` | +| 参数 | 说明 | 类型 | 默认值 | open-type | +| ---------------- | ------------------------------------------------------------------- | -------- | ------------ | ------------- | +| appParameter | 打开 APP 时，向 APP 传递的参数 | _string_ | - | `launchApp` | +| lang | 指定返回用户信息的语言，zh_CN 简体中文，
zh_TW 繁体中文，en 英文 | _string_ | `en` | `getUserInfo` | +| sessionFrom | 会话来源 | _string_ | - | `contact` | +| businessId | 客服消息子商户 id | _number_ | - | `contact` | +| sendMessageTitle | 会话内消息卡片标题 | _string_ | 当前标题 | `contact` | +| sendMessagePath | 会话内消息卡片点击跳转小程序路径 | _string_ | 当前分享路径 | `contact` | +| sendMessageImg | sendMessageImg | _string_ | 截图 | `contact` | +| showMessageCard | 显示会话内消息卡片 | _string_ | `false` | `contact` | ### Props 通过组件调用 Dialog 时，支持以下 Props: -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| show | 是否显示弹窗 | _boolean_ | - | -| title | 标题 | _string_ | - | -| width | 弹窗宽度，默认单位为`px` | _string \| number_ | `320px` | -| message | 文本内容，支持通过`\n`换行 | _string_ | - | -| theme | 样式风格，可选值为`round-button` | _string_ | `default` | -| message-align | 内容对齐方式，可选值为`left` `right` | _string_ | `center` | -| z-index | z-index 层级 | _number_ | `100` | -| class-name | 自定义类名，dialog 在自定义组件内时无效 | _string_ | '' | -| custom-style | 自定义样式 | _string_ | '' | -| show-confirm-button | 是否展示确认按钮 | _boolean_ | `true` | -| show-cancel-button | 是否展示取消按钮 | _boolean_ | `false` | -| confirm-button-text | 确认按钮的文案 | _string_ | `确认` | -| cancel-button-text | 取消按钮的文案 | _string_ | `取消` | -| confirm-button-color | 确认按钮的字体颜色 | _string_ | `#ee0a24` | -| cancel-button-color | 取消按钮的字体颜色 | _string_ | `#333` | -| overlay | 是否展示遮罩层 | _boolean_ | `true` | -| overlay-style | 自定义遮罩层样式 | _object_ | - | 1.0.0 | -| close-on-click-overlay | 点击遮罩层时是否关闭弹窗 | _boolean_ | `false` | -| use-slot | 是否使用自定义内容的插槽 | _boolean_ | `false` | -| use-title-slot | 是否使用自定义标题的插槽 | _boolean_ | `false` | -| async-close | 已废弃，将在 2.0.0 移除，请使用 `beforeClose` 属性代替 | _boolean_ | `false` | -| before-close | 关闭前的回调函数，返回 `false` 可阻止关闭，支持返回 Promise | _(action) => boolean \| Promise_ | - | -| transition | 动画名称，可选值为`fade` | _string_ | `scale` | -| confirm-button-open-type | 确认按钮的微信开放能力，具体支持可参考 [微信官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html) | _string_ | - | +| 参数 | 说明 | 类型 | 默认值 | +| ------------------------ | ----------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------- | --------- | +| show | 是否显示弹窗 | _boolean_ | - | +| title | 标题 | _string_ | - | +| width | 弹窗宽度，默认单位为`px` | _string \| number_ | `320px` | +| message | 文本内容，支持通过`\n`换行 | _string_ | - | +| theme | 样式风格，可选值为`round-button` | _string_ | `default` | +| message-align | 内容对齐方式，可选值为`left` `right` | _string_ | `center` | +| z-index | z-index 层级 | _number_ | `100` | +| class-name | 自定义类名，dialog 在自定义组件内时无效 | _string_ | '' | +| custom-style | 自定义样式 | _string_ | '' | +| show-confirm-button | 是否展示确认按钮 | _boolean_ | `true` | +| show-cancel-button | 是否展示取消按钮 | _boolean_ | `false` | +| confirm-button-text | 确认按钮的文案 | _string_ | `确认` | +| cancel-button-text | 取消按钮的文案 | _string_ | `取消` | +| confirm-button-color | 确认按钮的字体颜色 | _string_ | `#ee0a24` | +| cancel-button-color | 取消按钮的字体颜色 | _string_ | `#333` | +| overlay | 是否展示遮罩层 | _boolean_ | `true` | +| overlay-style `v1.0.0` | 自定义遮罩层样式 | _object_ | - | +| close-on-click-overlay | 点击遮罩层时是否关闭弹窗 | _boolean_ | `false` | +| use-slot | 是否使用自定义内容的插槽 | _boolean_ | `false` | +| use-title-slot | 是否使用自定义标题的插槽 | _boolean_ | `false` | +| async-close | 已废弃，将在 2.0.0 移除，请使用 `beforeClose` 属性代替 | _boolean_ | `false` | +| before-close | 关闭前的回调函数，返回 `false` 可阻止关闭，支持返回 Promise | _(action) => boolean \| Promise_ | - | +| transition | 动画名称，可选值为`fade` | _string_ | `scale` | +| confirm-button-open-type | 确认按钮的微信开放能力，具体支持可参考 [微信官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html) | _string_ | - | ### OpenType Props 使用`confirm-button-open-type`后，支持以下 Props： -| 参数 | 说明 | 类型 | 默认值 | open-type | -| --- | --- | --- | --- | --- | -| app-parameter | 打开 APP 时，向 APP 传递的参数 | _string_ | - | `launchApp` | -| lang | 指定返回用户信息的语言，zh_CN 简体中文，
zh_TW 繁体中文，en 英文 | _string_ | `en` | `getUserInfo` | -| session-from | 会话来源 | _string_ | - | `contact` | -| business-id | 客服消息子商户 id | _number_ | - | `contact` | -| send-message-title | 会话内消息卡片标题 | _string_ | 当前标题 | `contact` | -| send-message-path | 会话内消息卡片点击跳转小程序路径 | _string_ | 当前分享路径 | `contact` | -| send-message-img | sendMessageImg | _string_ | 截图 | `contact` | -| show-message-card | 显示会话内消息卡片 | _string_ | `false` | `contact` | +| 参数 | 说明 | 类型 | 默认值 | open-type | +| ------------------ | ------------------------------------------------------------------- | -------- | ------------ | ------------- | +| app-parameter | 打开 APP 时，向 APP 传递的参数 | _string_ | - | `launchApp` | +| lang | 指定返回用户信息的语言，zh_CN 简体中文，
zh_TW 繁体中文，en 英文 | _string_ | `en` | `getUserInfo` | +| session-from | 会话来源 | _string_ | - | `contact` | +| business-id | 客服消息子商户 id | _number_ | - | `contact` | +| send-message-title | 会话内消息卡片标题 | _string_ | 当前标题 | `contact` | +| send-message-path | 会话内消息卡片点击跳转小程序路径 | _string_ | 当前分享路径 | `contact` | +| send-message-img | sendMessageImg | _string_ | 截图 | `contact` | +| show-message-card | 显示会话内消息卡片 | _string_ | `false` | `contact` | ### Events -| 事件 | 说明 | 回调参数 | -| --- | --- | --- | -| bind:close | 弹窗关闭时触发 | event.detail: 触发关闭事件的来源，
枚举为`confirm`,`cancel`,`overlay` | -| bind:confirm | 点击确认按钮时触发 | - | -| bind:cancel | 点击取消按钮时触发 | - | -| bind:getuserinfo | 点击确认按钮时，会返回获取到的用户信息，
从返回参数的 detail 中获取到的值同 wx.getUserInfo | - | -| bind:contact | 客服消息回调 | - | -| bind:getphonenumber | 获取用户手机号回调 | - | -| bind:error | 当使用开放能力时，发生错误的回调 | - | -| bind:opensetting | 在打开授权设置页后回调 | - | +| 事件 | 说明 | 回调参数 | +| ------------------- | --------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ | +| bind:close | 弹窗关闭时触发 | event.detail: 触发关闭事件的来源，
枚举为`confirm`,`cancel`,`overlay` | +| bind:confirm | 点击确认按钮时触发 | - | +| bind:cancel | 点击取消按钮时触发 | - | +| bind:getuserinfo | 点击确认按钮时，会返回获取到的用户信息，
从返回参数的 detail 中获取到的值同 wx.getUserInfo | - | +| bind:contact | 客服消息回调 | - | +| bind:getphonenumber | 获取用户手机号回调 | - | +| bind:error | 当使用开放能力时，发生错误的回调 | - | +| bind:opensetting | 在打开授权设置页后回调 | - | ### Slot diff --git a/packages/divider/README.md b/packages/divider/README.md index 72a02d33..fd3a5221 100644 --- a/packages/divider/README.md +++ b/packages/divider/README.md @@ -71,12 +71,12 @@ ### Props -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| --- | --- | --- | --- | --- | -| dashed | 虚线 | _boolean_ | false | - | -| hairline | 细线 | _boolean_ | false | - | -| content-position | 文本位置，`left` `center` `right` | _string_ | - | - | -| custom-style | 自定义样式 | _string_ | - | - | +| 参数 | 说明 | 类型 | 默认值 | +| ---------------- | --------------------------------- | --------- | ------ | +| dashed | 虚线 | _boolean_ | false | +| hairline | 细线 | _boolean_ | false | +| content-position | 文本位置，`left` `center` `right` | _string_ | - | +| custom-style | 自定义样式 | _string_ | - | ### Slot diff --git a/packages/dropdown-menu/README.md b/packages/dropdown-menu/README.md index 967110af..351978bc 100644 --- a/packages/dropdown-menu/README.md +++ b/packages/dropdown-menu/README.md @@ -139,15 +139,15 @@ Page({ ### DropdownMenu Props -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| active-color | 菜单标题和选项的选中态颜色 | _string_ | `#ee0a24` | -| z-index | 菜单栏 z-index 层级 | _number_ | `10` | -| duration | 动画时长，单位毫秒 | _number_ | `200` | -| direction | 菜单展开方向，可选值为 up | _string_ | `down` | -| overlay | 是否显示遮罩层 | _boolean_ | `true` | -| close-on-click-overlay | 是否在点击遮罩层后关闭菜单 | _boolean_ | `true` | -| close-on-click-outside | 是否在点击外部 menu 后关闭菜单 | _boolean_ | `true` | +| 参数 | 说明 | 类型 | 默认值 | +| ---------------------- | ------------------------------ | --------- | --- | +| active-color | 菜单标题和选项的选中态颜色 | _string_ | `#ee0a24` | +| z-index | 菜单栏 z-index 层级 | _number_ | `10` | +| duration | 动画时长，单位毫秒 | _number_ | `200` | +| direction | 菜单展开方向，可选值为 up | _string_ | `down` | +| overlay | 是否显示遮罩层 | _boolean_ | `true` | +| close-on-click-overlay | 是否在点击遮罩层后关闭菜单 | _boolean_ | `true` | +| close-on-click-outside | 是否在点击外部 menu 后关闭菜单 | _boolean_ | `true` | ### DropdownItem Props @@ -174,9 +174,9 @@ Page({ 通过 selectComponent(id) 可访问。 -| 方法名 | 说明 | 参数 | 返回值 | -| --- | --- | --- | --- | -| toggle | 切换菜单展示状态，传`true`为显示，`false`为隐藏，不传参为取反 | show?: boolean | - | +| 方法名 | 说明 | 参数 | 返回值 | +| ------ | ------------------------------------------------------------- | -------------- | ------ | +| toggle | 切换菜单展示状态，传`true`为显示，`false`为隐藏，不传参为取反 | show?: boolean | - | ### Option 数据结构 diff --git a/packages/empty/README.md b/packages/empty/README.md index 1d7c564b..e8a41acc 100644 --- a/packages/empty/README.md +++ b/packages/empty/README.md @@ -70,10 +70,10 @@ Empty 组件内置了多种占位图片类型，可以在不同业务场景下 ### Props -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| image | 图片类型，可选值为 `error` `network` `search`，支持传入图片 URL | _string_ | `default` | -| description | 图片下方的描述文字 | _string_ | - | +| 参数 | 说明 | 类型 | 默认值 | +| ----------- | --------------------------------------------------------------- | -------- | --------- | +| image | 图片类型，可选值为 `error` `network` `search`，支持传入图片 URL | _string_ | `default` | +| description | 图片下方的描述文字 | _string_ | - | ### Slots diff --git a/packages/field/README.md b/packages/field/README.md index ffb77032..893e7597 100644 --- a/packages/field/README.md +++ b/packages/field/README.md @@ -213,64 +213,65 @@ Page({ ### Props -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| name | 在表单内提交时的标识符 | _string_ | - | -| label | 输入框左侧文本 | _string_ | - | -| size | 单元格大小，可选值为 `large` | _string_ | - | -| value | 当前输入的值 | _string \| number_ | - | -| type | 可设置为任意原生类型, 如 `number` `idcard` `textarea` `digit` | _string_ | `text` | -| fixed | 如果 type 为 `textarea` 且在一个 `position:fixed` 的区域，需要显示指定属性 fixed 为 true | _boolean_ | `false` | -| focus | 获取焦点 | _boolean_ | `false` | -| border | 是否显示内边框 | _boolean_ | `true` | -| disabled | 是否禁用输入框 | _boolean_ | `false` | -| readonly | 是否只读 | _boolean_ | `false` | -| clearable | 是否启用清除控件 | _boolean_ | `false` | -| clickable | 是否开启点击反馈 | _boolean_ | `false` | -| required | 是否显示表单必填星号 | _boolean_ | `false` | -| center | 是否使内容垂直居中 | _boolean_ | `false` | -| password | 是否是密码类型 | _boolean_ | `false` | -| title-width | 标题宽度 | _string_ | `6.2em` | -| maxlength | 最大输入长度，设置为 -1 的时候不限制最大长度 | _number_ | `-1` | -| placeholder | 输入框为空时占位符 | _string_ | - | -| placeholder-style | 指定 placeholder 的样式 | _string_ | - | -| custom-style | 自定义样式 | _string_ | - | -| is-link | 是否展示右侧箭头并开启点击反馈 | _boolean_ | `false` | -| arrow-direction | 箭头方向，可选值为 `left` `up` `down` | _string_ | - | -| show-word-limit | 是否显示字数统计，需要设置`maxlength`属性 | _boolean_ | `false` | -| error | 是否将输入内容标红 | _boolean_ | `false` | -| error-message | 底部错误提示文案，为空时不展示 | _string_ | `''` | -| error-message-align | 底部错误提示文案对齐方式，可选值为 `center` `right` | _string_ | `''` | -| input-align | 输入框内容对齐方式，可选值为 `center` `right` | _string_ | `left` | -| autosize | 是否自适应内容高度，只对 textarea 有效，
可传入对象,如 { maxHeight: 100, minHeight: 50 }，
单位为`px` | _boolean \| object_ | `false` | -| left-icon | 左侧图标名称或图片链接，可选值见 [Icon 组件](#/icon) | _string_ | - | -| right-icon | 右侧图标名称或图片链接，可选值见 [Icon 组件](#/icon) | _string_ | - | -| confirm-type | 设置键盘右下角按钮的文字，仅在 type='text' 时生效 | _string_ | `done` | -| confirm-hold | 点击键盘右下角按钮时是否保持键盘不收起，在 type='textarea' 时无效 | _boolean_ | `false` | -| hold-keyboard | focus 时，点击页面的时候不收起键盘 | _boolean_ | `false` | -| cursor-spacing | 输入框聚焦时底部与键盘的距离 | _number_ | `50` | -| adjust-position | 键盘弹起时，是否自动上推页面 | _boolean_ | `true` | -| show-confirm-bar | 是否显示键盘上方带有”完成“按钮那一栏，只对 textarea 有效 | _boolean_ | `true` | -| selection-start | 光标起始位置，自动聚集时有效，需与 selection-end 搭配使用 | _number_ | `-1` | -| selection-end | 光标结束位置，自动聚集时有效，需与 selection-start 搭配使用 | _number_ | `-1` | -| auto-focus | 自动聚焦，拉起键盘 | _boolean_ | `false` | -| disable-default-padding | 是否去掉 iOS 下的默认内边距，只对 textarea 有效 | _boolean_ | `true` | -| cursor | 指定 focus 时的光标位置 | _number_ | `-1` | +| 参数 | 说明 | 类型 | 默认值 | +| ------------------------ | ----------------------------------------------------------------------------------------------------------- | ------------------- | ------- | +| name | 在表单内提交时的标识符 | _string_ | - | +| label | 输入框左侧文本 | _string_ | - | +| size | 单元格大小，可选值为 `large` | _string_ | - | +| value | 当前输入的值 | _string \| number_ | - | +| type | 可设置为任意原生类型, 如 `number` `idcard` `textarea` `digit` | _string_ | `text` | +| fixed | 如果 type 为 `textarea` 且在一个 `position:fixed` 的区域，需要显示指定属性 fixed 为 true | _boolean_ | `false` | +| focus | 获取焦点 | _boolean_ | `false` | +| border | 是否显示内边框 | _boolean_ | `true` | +| disabled | 是否禁用输入框 | _boolean_ | `false` | +| readonly | 是否只读 | _boolean_ | `false` | +| clearable | 是否启用清除控件 | _boolean_ | `false` | +| clickable | 是否开启点击反馈 | _boolean_ | `false` | +| required | 是否显示表单必填星号 | _boolean_ | `false` | +| center | 是否使内容垂直居中 | _boolean_ | `false` | +| password | 是否是密码类型 | _boolean_ | `false` | +| title-width | 标题宽度 | _string_ | `6.2em` | +| maxlength | 最大输入长度，设置为 -1 的时候不限制最大长度 | _number_ | `-1` | +| placeholder | 输入框为空时占位符 | _string_ | - | +| placeholder-style | 指定 placeholder 的样式 | _string_ | - | +| custom-style | 自定义样式 | _string_ | - | +| is-link | 是否展示右侧箭头并开启点击反馈 | _boolean_ | `false` | +| arrow-direction | 箭头方向，可选值为 `left` `up` `down` | _string_ | - | +| show-word-limit | 是否显示字数统计，需要设置`maxlength`属性 | _boolean_ | `false` | +| error | 是否将输入内容标红 | _boolean_ | `false` | +| error-message | 底部错误提示文案，为空时不展示 | _string_ | `''` | +| error-message-align | 底部错误提示文案对齐方式，可选值为 `center` `right` | _string_ | `''` | +| input-align | 输入框内容对齐方式，可选值为 `center` `right` | _string_ | `left` | +| autosize | 是否自适应内容高度，只对 textarea 有效，
可传入对象,如 { maxHeight: 100, minHeight: 50 }，
单位为`px` | _boolean \| object_ | `false` | +| left-icon | 左侧图标名称或图片链接，可选值见 [Icon 组件](#/icon) | _string_ | - | +| right-icon | 右侧图标名称或图片链接，可选值见 [Icon 组件](#/icon) | _string_ | - | +| confirm-type | 设置键盘右下角按钮的文字，仅在 type='text' 时生效 | _string_ | `done` | +| confirm-hold | 点击键盘右下角按钮时是否保持键盘不收起，在 type='textarea' 时无效 | _boolean_ | `false` | +| hold-keyboard | focus 时，点击页面的时候不收起键盘 | _boolean_ | `false` | +| cursor-spacing | 输入框聚焦时底部与键盘的距离 | _number_ | `50` | +| adjust-position | 键盘弹起时，是否自动上推页面 | _boolean_ | `true` | +| show-confirm-bar | 是否显示键盘上方带有”完成“按钮那一栏，只对 textarea 有效 | _boolean_ | `true` | +| selection-start | 光标起始位置，自动聚集时有效，需与 selection-end 搭配使用 | _number_ | `-1` | +| selection-end | 光标结束位置，自动聚集时有效，需与 selection-start 搭配使用 | _number_ | `-1` | +| auto-focus | 自动聚焦，拉起键盘 | _boolean_ | `false` | +| disable-default-padding | 是否去掉 iOS 下的默认内边距，只对 textarea 有效 | _boolean_ | `true` | +| cursor | 指定 focus 时的光标位置 | _number_ | `-1` | +| clear-trigger `v1.8.4` | 显示清除图标的时机，`always` 表示输入框不为空时展示，
`focus` 表示输入框聚焦且不为空时展示 | _string_ | `focus` | ### Events -| 事件 | 说明 | 回调参数 | -| --- | --- | --- | -| bind:input | 输入内容时触发 | event.detail: 当前输入值 | -| bind:change | 输入内容时触发 | event.detail: 当前输入值 | -| bind:confirm | 点击完成按钮时触发 | event.detail: 当前输入值 | -| bind:click-icon | 点击尾部图标时触发 | - | -| bind:focus | 输入框聚焦时触发 | event.detail.value: 当前输入值;
event.detail.height: 键盘高度 | -| bind:blur | 输入框失焦时触发 | event.detail.value: 当前输入值;
event.detail.cursor: 游标位置(如果 `type` 不为 `textarea`，值为 `0`) | -| bind:clear | 点击清空控件时触发 | - | -| bind:click-input | 点击输入区域时触发 | - | -| bind:linechange | 输入框行数变化时调用，只对 textarea 有效 | event.detail = { height: 0, heightRpx: 0, lineCount: 0 } | -| bind:keyboardheightchange | 键盘高度发生变化的时候触发此事件 | event.detail = { height: height, duration: duration } | +| 事件 | 说明 | 回调参数 | +| ------------------------- | ---------------------------------------- | -------------------------------------------------------------------------------------------------------- | +| bind:input | 输入内容时触发 | event.detail: 当前输入值 | +| bind:change | 输入内容时触发 | event.detail: 当前输入值 | +| bind:confirm | 点击完成按钮时触发 | event.detail: 当前输入值 | +| bind:click-icon | 点击尾部图标时触发 | - | +| bind:focus | 输入框聚焦时触发 | event.detail.value: 当前输入值;
event.detail.height: 键盘高度 | +| bind:blur | 输入框失焦时触发 | event.detail.value: 当前输入值;
event.detail.cursor: 游标位置(如果 `type` 不为 `textarea`，值为 `0`) | +| bind:clear | 点击清空控件时触发 | - | +| bind:click-input | 点击输入区域时触发 | - | +| bind:linechange | 输入框行数变化时调用，只对 textarea 有效 | event.detail = { height: 0, heightRpx: 0, lineCount: 0 } | +| bind:keyboardheightchange | 键盘高度发生变化的时候触发此事件 | event.detail = { height: height, duration: duration } | ### Slot diff --git a/packages/field/index.ts b/packages/field/index.ts index a01c52d6..ded9294f 100644 --- a/packages/field/index.ts +++ b/packages/field/index.ts @@ -37,6 +37,10 @@ VantComponent({ type: Boolean, observer: 'setShowClear', }, + clearTrigger: { + type: String, + value: 'focus', + }, border: { type: Boolean, value: true, @@ -45,6 +49,10 @@ VantComponent({ type: String, value: '6.2em', }, + clearIcon: { + type: String, + value: 'clear', + }, }, data: { @@ -144,12 +152,20 @@ VantComponent({ }, setShowClear() { - const { clearable, readonly } = this.data; + const { clearable, readonly, clearTrigger } = this.data; const { focused, value } = this; - this.setData({ - showClear: !!clearable && !!focused && !!value && !readonly, - }); + let showClear = false; + + if (clearable && !readonly) { + const hasValue = !!value; + const trigger = + clearTrigger === 'always' || (clearTrigger === 'focus' && focused); + + showClear = hasValue && trigger; + } + + this.setData({ showClear }); }, noop() {}, diff --git a/packages/field/index.wxml b/packages/field/index.wxml index 08eee019..ec2e0ea8 100644 --- a/packages/field/index.wxml +++ b/packages/field/index.wxml @@ -29,7 +29,7 @@ diff --git a/packages/goods-action/README.md b/packages/goods-action/README.md index 48967866..9fcb1d85 100644 --- a/packages/goods-action/README.md +++ b/packages/goods-action/README.md @@ -93,53 +93,53 @@ Page({ ### GoodsAction Props -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| --- | --- | --- | --- | --- | -| safe-area-inset-bottom | 是否为 iPhoneX 留出底部安全距离 | _boolean_ | `true` | - | +| 参数 | 说明 | 类型 | 默认值 | +| ---------------------- | ------------------------------- | --------- | ------ | +| safe-area-inset-bottom | 是否为 iPhoneX 留出底部安全距离 | _boolean_ | `true` | ### GoodsActionIcon Props -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| --- | --- | --- | --- | --- | -| text | 按钮文字 | _string_ | - | - | -| icon | 图标类型，可选值见`icon`组件 | _string_ | - | - | -| info | 图标右上角提示信息 | _string \| number_ | - | - | -| url | 点击后跳转的链接地址 | _string_ | - | - | -| link-type | 链接跳转类型，可选值为 `redirectTo` `switchTab` `reLaunch` | _string_ | `navigateTo` | - | -| id | 标识符 | _string_ | - | - | -| disabled | 是否禁用按钮 | _boolean_ | `false` | - | -| loading | 是否显示为加载状态 | _boolean_ | `false` | - | -| open-type | 微信开放能力，具体支持可参考 [微信官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html) | _string_ | - | - | -| app-parameter | 打开 APP 时，向 APP 传递的参数 | _string_ | - | - | -| lang | 指定返回用户信息的语言，zh_CN 简体中文，
zh_TW 繁体中文，en 英文 | _string_ | `en` | - | -| session-from | 会话来源 | _string_ | - | - | -| send-message-title | 会话内消息卡片标题 | _string_ | 当前标题 | - | -| send-message-path | 会话内消息卡片点击跳转小程序路径 | _string_ | 当前分享路径 | - | -| send-message-img | sendMessageImg | _string_ | 截图 | - | -| show-message-card | 显示会话内消息卡片 | _string_ | `false` | - | +| 参数 | 说明 | 类型 | 默认值 | +| ------------------ | ------------------------------------------------------------------------------------------------------------------- | ------------------ | ------------ | +| text | 按钮文字 | _string_ | - | +| icon | 图标类型，可选值见`icon`组件 | _string_ | - | +| info | 图标右上角提示信息 | _string \| number_ | - | +| url | 点击后跳转的链接地址 | _string_ | - | +| link-type | 链接跳转类型，可选值为 `redirectTo` `switchTab` `reLaunch` | _string_ | `navigateTo` | +| id | 标识符 | _string_ | - | +| disabled | 是否禁用按钮 | _boolean_ | `false` | +| loading | 是否显示为加载状态 | _boolean_ | `false` | +| open-type | 微信开放能力，具体支持可参考 [微信官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html) | _string_ | - | +| app-parameter | 打开 APP 时，向 APP 传递的参数 | _string_ | - | +| lang | 指定返回用户信息的语言，zh_CN 简体中文，
zh_TW 繁体中文，en 英文 | _string_ | `en` | +| session-from | 会话来源 | _string_ | - | +| send-message-title | 会话内消息卡片标题 | _string_ | 当前标题 | +| send-message-path | 会话内消息卡片点击跳转小程序路径 | _string_ | 当前分享路径 | +| send-message-img | sendMessageImg | _string_ | 截图 | +| show-message-card | 显示会话内消息卡片 | _string_ | `false` | ### GoodsActionButton Props -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| --- | --- | --- | --- | --- | -| text | 按钮文字 | _string_ | - | - | -| color | 按钮颜色，支持传入 `linear-gradient` 渐变色 | _string_ | - | - | -| url | 点击后跳转的链接地址 | _string_ | - | - | -| link-type | 链接跳转类型，可选值为 `redirectTo` `switchTab` `reLaunch` | _string_ | `navigateTo` | - | -| id | 标识符 | _string_ | - | - | -| type | 按钮类型，可选值为 `primary` `warning` `danger` | _string_ | `danger` | - | -| plain | 是否为朴素按钮 | _boolean_ | `false` | - | -| size | 按钮尺寸，可选值为 `normal` `large` `small` `mini` | _string_ | `normal` | - | -| disabled | 是否禁用按钮 | _boolean_ | `false` | - | -| loading | 是否显示为加载状态 | _boolean_ | `false` | - | -| open-type | 微信开放能力，具体支持可参考 [微信官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html) | _string_ | - | - | -| app-parameter | 打开 APP 时，向 APP 传递的参数 | _string_ | - | - | -| lang | 指定返回用户信息的语言，zh_CN 简体中文，
zh_TW 繁体中文，en 英文 | _string_ | `en` | - | -| session-from | 会话来源 | _string_ | - | - | -| send-message-title | 会话内消息卡片标题 | _string_ | 当前标题 | - | -| send-message-path | 会话内消息卡片点击跳转小程序路径 | _string_ | 当前分享路径 | - | -| send-message-img | sendMessageImg | _string_ | 截图 | - | -| show-message-card | 显示会话内消息卡片 | _string_ | `false` | - | +| 参数 | 说明 | 类型 | 默认值 | +| ------------------ | ------------------------------------------------------------------------------------------------------------------- | --------- | ------------ | +| text | 按钮文字 | _string_ | - | +| color | 按钮颜色，支持传入 `linear-gradient` 渐变色 | _string_ | - | +| url | 点击后跳转的链接地址 | _string_ | - | +| link-type | 链接跳转类型，可选值为 `redirectTo` `switchTab` `reLaunch` | _string_ | `navigateTo` | +| id | 标识符 | _string_ | - | +| type | 按钮类型，可选值为 `primary` `warning` `danger` | _string_ | `danger` | +| plain | 是否为朴素按钮 | _boolean_ | `false` | +| size | 按钮尺寸，可选值为 `normal` `large` `small` `mini` | _string_ | `normal` | +| disabled | 是否禁用按钮 | _boolean_ | `false` | +| loading | 是否显示为加载状态 | _boolean_ | `false` | +| open-type | 微信开放能力，具体支持可参考 [微信官方文档](https://developers.weixin.qq.com/miniprogram/dev/component/button.html) | _string_ | - | +| app-parameter | 打开 APP 时，向 APP 传递的参数 | _string_ | - | +| lang | 指定返回用户信息的语言，zh_CN 简体中文，
zh_TW 繁体中文，en 英文 | _string_ | `en` | +| session-from | 会话来源 | _string_ | - | +| send-message-title | 会话内消息卡片标题 | _string_ | 当前标题 | +| send-message-path | 会话内消息卡片点击跳转小程序路径 | _string_ | 当前分享路径 | +| send-message-img | sendMessageImg | _string_ | 截图 | +| show-message-card | 显示会话内消息卡片 | _string_ | `false` | ### Events diff --git a/packages/grid/README.md b/packages/grid/README.md index 1c45f1f1..40816eb3 100644 --- a/packages/grid/README.md +++ b/packages/grid/README.md @@ -125,18 +125,18 @@ ### Grid Props -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| --- | --- | --- | --- | --- | -| column-num | 列数 | _number_ | `4` | - | -| icon-size `v1.3.2` | 图标大小，默认单位为`px` | _string_ | `28px` | -| gutter | 格子之间的间距，默认单位为`px` | _string \| number_ | `0` | - | -| border | 是否显示边框 | _boolean_ | `true` | - | -| center | 是否将格子内容居中显示 | _boolean_ | `true` | - | -| square | 是否将格子固定为正方形 | _boolean_ | `false` | - | -| clickable | 是否开启格子点击反馈 | _boolean_ | `false` | - | -| direction | 格子内容排列的方向，可选值为 `horizontal` | _string_ | `vertical` | - | -| reverse `v1.7.0` | 是否调换图标和文本的位置 | _boolean_ | `false` | -| use-slot | 是否使用自定义内容的插槽 | _boolean_ | `false` | +| 参数 | 说明 | 类型 | 默认值 | +| ------------------ | ----------------------------------------- | ------------------ | ---------- | +| column-num | 列数 | _number_ | `4` | +| icon-size `v1.3.2` | 图标大小，默认单位为`px` | _string_ | `28px` | +| gutter | 格子之间的间距，默认单位为`px` | _string \| number_ | `0` | +| border | 是否显示边框 | _boolean_ | `true` | +| center | 是否将格子内容居中显示 | _boolean_ | `true` | +| square | 是否将格子固定为正方形 | _boolean_ | `false` | +| clickable | 是否开启格子点击反馈 | _boolean_ | `false` | +| direction | 格子内容排列的方向，可选值为 `horizontal` | _string_ | `vertical` | +| reverse `v1.7.0` | 是否调换图标和文本的位置 | _boolean_ | `false` | +| use-slot | 是否使用自定义内容的插槽 | _boolean_ | `false` | ### Grid 外部样式类 @@ -146,16 +146,16 @@ ### GridItem Props -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| --- | --- | --- | --- | --- | -| text | 文字 | _string_ | - | - | -| icon | 图标名称或图片链接，可选值见 [Icon 组件](#/icon) | _string_ | - | - | -| icon-color | 图标颜色 | _string_ | - | - | -| icon-prefix `v1.7.0` | 第三方图标前缀 | _string_ | `van-icon` | - | -| dot | 是否显示图标右上角小红点 | _boolean_ | `false` | - | -| badge | 图标右上角徽标的内容 | _string \| number_ | - | - | -| url | 点击后跳转的链接地址 | _string_ | - | - | -| link-type | 链接跳转类型，可选值为 `redirectTo` `switchTab` `reLaunch` | _string_ | `navigateTo` | - | +| 参数 | 说明 | 类型 | 默认值 | +| -------------------- | ---------------------------------------------------------- | ------------------ | ------------ | +| text | 文字 | _string_ | - | +| icon | 图标名称或图片链接，可选值见 [Icon 组件](#/icon) | _string_ | - | +| icon-color | 图标颜色 | _string_ | - | +| icon-prefix `v1.7.0` | 第三方图标前缀 | _string_ | `van-icon` | +| dot | 是否显示图标右上角小红点 | _boolean_ | `false` | +| badge | 图标右上角徽标的内容 | _string \| number_ | - | +| url | 点击后跳转的链接地址 | _string_ | - | +| link-type | 链接跳转类型，可选值为 `redirectTo` `switchTab` `reLaunch` | _string_ | `navigateTo` | ### GridItem Events diff --git a/packages/icon/README.md b/packages/icon/README.md index a593d677..01551bcd 100644 --- a/packages/icon/README.md +++ b/packages/icon/README.md @@ -76,25 +76,19 @@ ``` -## 常见问题 - -### 开发者工具上提示 Failed to load font 是什么情况？ - -这个是开发者工具本身的问题，可以忽略，具体可以查看[微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/api/ui/font/wx.loadFontFace.html) - 注意事项第 5 条。 - ## API ### Props -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| --- | --- | --- | --- | --- | -| name | 图标名称或图片链接 | _string_ | - | - | -| dot | 是否显示图标右上角小红点 | _boolean_ | `false` | - | -| info | 图标右上角文字提示 | _string \| number_ | - | - | -| color | 图标颜色 | _string_ | `inherit` | - | -| size | 图标大小，如 `20px`，`2em`，默认单位为`px` | _string \| number_ | `inherit` | - | -| custom-style | 自定义样式 | _string_ | - | - | -| class-prefix | 类名前缀 | _string_ | `van-icon` | - | +| 参数 | 说明 | 类型 | 默认值 | +| ------------ | ------------------------------------------ | ------------------ | ---------- | +| name | 图标名称或图片链接 | _string_ | - | +| dot | 是否显示图标右上角小红点 | _boolean_ | `false` | +| info | 图标右上角文字提示 | _string \| number_ | - | +| color | 图标颜色 | _string_ | `inherit` | +| size | 图标大小，如 `20px`，`2em`，默认单位为`px` | _string \| number_ | `inherit` | +| custom-style | 自定义样式 | _string_ | - | +| class-prefix | 类名前缀 | _string_ | `van-icon` | ### Events @@ -107,3 +101,9 @@ | 类名 | 说明 | | ------------ | ------------ | | custom-class | 根节点样式类 | + +## 常见问题 + +### 开发者工具上提示 Failed to load font 是什么情况？ + +这个是开发者工具本身的问题，可以忽略，具体可以查看[微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/api/ui/font/wx.loadFontFace.html) - 注意事项第 5 条。 diff --git a/packages/image/README.md b/packages/image/README.md index 370ce174..a673d719 100644 --- a/packages/image/README.md +++ b/packages/image/README.md @@ -89,21 +89,21 @@ ### Props -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| --- | --- | --- | --- | --- | -| src | 图片链接 | _string_ | - | - | -| fit | 图片填充模式 | _string_ | _fill_ | - | -| alt | 替代文本 | _string_ | - | - | -| width | 宽度，默认单位为`px` | _string \| number_ | - | - | -| height | 高度，默认单位为`px` | _string \| number_ | - | - | -| radius | 圆角大小，默认单位为`px` | _string \| number_ | `0` | - | -| round | 是否显示为圆形 | _boolean_ | `false` | - | -| lazy-load | 是否懒加载 | _boolean_ | `false` | - | -| show-error | 是否展示图片加载失败提示 | _boolean_ | `true` | - | -| show-loading | 是否展示图片加载中提示 | _boolean_ | `true` | - | -| use-error-slot | 是否使用 error 插槽 | _boolean_ | `false` | - | -| use-loading-slot | 是否使用 loading 插槽 | _boolean_ | `false` | - | -| show-menu-by-longpress | 是否开启长按图片显示识别小程序码菜单 | _boolean_ | `false` | - | +| 参数 | 说明 | 类型 | 默认值 | +| ---------------------- | ------------------------------------ | ------------------ | ------- | +| src | 图片链接 | _string_ | - | +| fit | 图片填充模式 | _string_ | _fill_ | +| alt | 替代文本 | _string_ | - | +| width | 宽度，默认单位为`px` | _string \| number_ | - | +| height | 高度，默认单位为`px` | _string \| number_ | - | +| radius | 圆角大小，默认单位为`px` | _string \| number_ | `0` | +| round | 是否显示为圆形 | _boolean_ | `false` | +| lazy-load | 是否懒加载 | _boolean_ | `false` | +| show-error | 是否展示图片加载失败提示 | _boolean_ | `true` | +| show-loading | 是否展示图片加载中提示 | _boolean_ | `true` | +| use-error-slot | 是否使用 error 插槽 | _boolean_ | `false` | +| use-loading-slot | 是否使用 loading 插槽 | _boolean_ | `false` | +| show-menu-by-longpress | 是否开启长按图片显示识别小程序码菜单 | _boolean_ | `false` | ### 图片填充模式  diff --git a/packages/index-bar/README.md b/packages/index-bar/README.md index 1cdd296f..82811a30 100644 --- a/packages/index-bar/README.md +++ b/packages/index-bar/README.md @@ -105,3 +105,12 @@ Page({ | 名称 | 说明 | | ---- | -------------------------------- | | - | 锚点位置显示内容，默认为索引字符 | + + +## 常见问题 + +### 嵌套在滚动元素中 IndexAnchor 失效？ + +由于 `` 内部使用 wx.pageScrollTo 滚动到指定位置，因此只支持页面级滚动，无法在滚动元素中嵌套使用，例如：`view` 使用 `overflow: scroll;` 或者 `scroll-view`， +具体可查看[微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/api/ui/scroll/wx.pageScrollTo.html)。 +历史issue: [#4252](https://github.com/youzan/vant-weapp/issues/4252) diff --git a/packages/loading/README.md b/packages/loading/README.md index a6a3553a..6089399a 100644 --- a/packages/loading/README.md +++ b/packages/loading/README.md @@ -44,13 +44,13 @@ ### Props -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| --- | --- | --- | --- | --- | -| color | 颜色 | _string_ | `#c9c9c9` | - | -| type | 类型，可选值为 `spinner` | _string_ | `circular` | - | -| size | 加载图标大小，默认单位为 `px` | _string \| number_ | `30px` | - | -| text-size | 文字大小，默认单位为为 `px` | _string \| number_ | `14px` | 1.0.0 | -| vertical | 是否垂直排列图标和文字内容 | _boolean_ | `false` | 1.0.0 | +| 参数 | 说明 | 类型 | 默认值 | +| ------------------ | ----------------------------- | ------------------ | ---------- | +| color | 颜色 | _string_ | `#c9c9c9` | +| type | 类型，可选值为 `spinner` | _string_ | `circular` | +| size | 加载图标大小，默认单位为 `px` | _string \| number_ | `30px` | +| text-size `v1.0.0` | 文字大小，默认单位为为 `px` | _string \| number_ | `14px` | +| vertical `v1.0.0` | 是否垂直排列图标和文字内容 | _boolean_ | `false` | ### Slots diff --git a/packages/mixins/page-scroll.ts b/packages/mixins/page-scroll.ts index 0dfb0018..f427e305 100644 --- a/packages/mixins/page-scroll.ts +++ b/packages/mixins/page-scroll.ts @@ -1,4 +1,4 @@ -import { getCurrentPage } from '../common/utils'; +import { getCurrentPage, isDef } from '../common/utils'; type IPageScrollOption = WechatMiniprogram.Page.IPageScrollOption; type Scroller = ( @@ -38,7 +38,9 @@ export const pageScrollMixin = (scroller: Scroller) => detached() { const page = getCurrentPage<{ vanPageScroller: Scroller[] }>(); - page.vanPageScroller = - page.vanPageScroller?.filter((item) => item !== scroller) || []; + if (!isDef(page)) { + page.vanPageScroller = + page.vanPageScroller?.filter((item) => item !== scroller) || []; + } }, }); diff --git a/packages/nav-bar/README.md b/packages/nav-bar/README.md index 7e430481..c92571fc 100644 --- a/packages/nav-bar/README.md +++ b/packages/nav-bar/README.md @@ -54,18 +54,18 @@ Page({ ### Props -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| --- | --- | --- | --- | --- | -| title | 标题 | _string_ | `''` | - | -| left-text | 左侧文案 | _string_ | `''` | - | -| right-text | 右侧文案 | _string_ | `''` | - | -| left-arrow | 是否显示左侧箭头 | _boolean_ | `false` | - | -| fixed | 是否固定在顶部 | _boolean_ | `false` | - | -| placeholder | 固定在顶部时是否开启占位 | _boolean_ | `false` | - | -| border | 是否显示下边框 | _boolean_ | `true` | - | -| z-index | 元素 z-index | _number_ | `1` | - | -| custom-style | 根节点自定义样式 | _string_ | - | - | -| safe-area-inset-top | 是否留出顶部安全距离（状态栏高度） | _boolean_ | `true` | - | +| 参数 | 说明 | 类型 | 默认值 | +| ------------------- | ---------------------------------- | --------- | ------- | +| title | 标题 | _string_ | `''` | +| left-text | 左侧文案 | _string_ | `''` | +| right-text | 右侧文案 | _string_ | `''` | +| left-arrow | 是否显示左侧箭头 | _boolean_ | `false` | +| fixed | 是否固定在顶部 | _boolean_ | `false` | +| placeholder | 固定在顶部时是否开启占位 | _boolean_ | `false` | +| border | 是否显示下边框 | _boolean_ | `true` | +| z-index | 元素 z-index | _number_ | `1` | +| custom-style | 根节点自定义样式 | _string_ | - | +| safe-area-inset-top | 是否留出顶部安全距离（状态栏高度） | _boolean_ | `true` | ### Slot diff --git a/packages/notice-bar/README.md b/packages/notice-bar/README.md index 51d9ac75..0a2275bf 100644 --- a/packages/notice-bar/README.md +++ b/packages/notice-bar/README.md @@ -93,18 +93,18 @@ ### Props -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| mode | 通知栏模式，可选值为 `closeable` `link` | _string_ | `''` | -| text | 通知文本内容 | _string_ | `''` | -| color | 通知文本颜色 | _string_ | `#ed6a0c` | -| background | 滚动条背景 | _string_ | `#fffbe8` | -| left-icon | 左侧[图标名称](#/icon)或图片链接 | _string_ | - | -| delay | 动画延迟时间 (s) | _number_ | `1` | -| speed | 滚动速率 (px/s) | _number_ | `60` | -| scrollable | 是否开启滚动播放，内容长度溢出时默认开启 | _boolean_ | - | -| wrapable | 是否开启文本换行，只在禁用滚动时生效 | _boolean_ | `false` | -| open-type | 微信开放能力 | _string_ | `navigate` | +| 参数 | 说明 | 类型 | 默认值 | +| ---------- | ---------------------------------------- | --------- | --- | +| mode | 通知栏模式，可选值为 `closeable` `link` | _string_ | `''` | +| text | 通知文本内容 | _string_ | `''` | +| color | 通知文本颜色 | _string_ | `#ed6a0c` | +| background | 滚动条背景 | _string_ | `#fffbe8` | +| left-icon | 左侧[图标名称](#/icon)或图片链接 | _string_ | - | +| delay | 动画延迟时间 (s) | _number_ | `1` | +| speed | 滚动速率 (px/s) | _number_ | `60` | +| scrollable | 是否开启滚动播放，内容长度溢出时默认开启 | _boolean_ | - | +| wrapable | 是否开启文本换行，只在禁用滚动时生效 | _boolean_ | `false` | +| open-type | 微信开放能力 | _string_ | `navigate` | ### Events diff --git a/packages/notify/README.md b/packages/notify/README.md index d074709a..facc6ba9 100644 --- a/packages/notify/README.md +++ b/packages/notify/README.md @@ -83,24 +83,24 @@ Notify({ ### 方法 -| 方法名 | 说明 | 参数 | 返回值 | -| ------------ | -------- | ------------------- | ----------- | -| Notify | 展示提示 | `options | message` | notify 实例 | -| Notify.clear | 关闭提示 | `options` | `void` | +| 方法名 | 说明 | 参数 | 返回值 | +| ------------ | -------- | ------------------- | ----------- | +| Notify | 展示提示 | `options \| message` | notify 实例 | +| Notify.clear | 关闭提示 | `options` | `void` | ### Options -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| --- | --- | --- | --- | --- | -| type | 类型，可选值为 `primary` `success` `warning` | _string_ | `danger` | 1.0.0 | -| message | 展示文案，支持通过`\n`换行 | _string_ | 1.0.0 | - | -| duration | 展示时长(ms)，值为 0 时，notify 不会消失 | _number_ | `3000` | - | -| selector | 自定义节点选择器 | _string_ | `van-notify` | - | -| color | 字体颜色 | _string_ | `#fff` | - | -| top | 顶部距离 | _number_ | `0` | - | -| background | 背景颜色 | _string_ | - | - | -| context | 选择器的选择范围，可以传入自定义组件的 this 作为上下文 | _object_ | 当前页面 | - | -| onClick | 点击时的回调函数 | _Function_ | - | - | -| onOpened | 完全展示后的回调函数 | _Function_ | - | - | -| onClose | 关闭时的回调函数 | _Function_ | - | - | -| safeAreaInsetTop | 是否留出顶部安全距离（状态栏高度） | _boolean_ | `false` | - | +| 参数 | 说明 | 类型 | 默认值 | +| ---------------- | ------------------------------------------------------ | ---------- | ------------ | +| type `v1.0.0` | 类型，可选值为 `primary` `success` `warning` | _string_ | `danger` | +| message `v1.0.0` | 展示文案，支持通过`\n`换行 | _string_ | `''` | +| duration | 展示时长(ms)，值为 0 时，notify 不会消失 | _number_ | `3000` | +| selector | 自定义节点选择器 | _string_ | `van-notify` | +| color | 字体颜色 | _string_ | `#fff` | +| top | 顶部距离 | _number_ | `0` | +| background | 背景颜色 | _string_ | - | +| context | 选择器的选择范围，可以传入自定义组件的 this 作为上下文 | _object_ | 当前页面 | +| onClick | 点击时的回调函数 | _Function_ | - | +| onOpened | 完全展示后的回调函数 | _Function_ | - | +| onClose | 关闭时的回调函数 | _Function_ | - | +| safeAreaInsetTop | 是否留出顶部安全距离（状态栏高度） | _boolean_ | `false` | diff --git a/packages/overlay/README.md b/packages/overlay/README.md index 723591b0..3a6ffc95 100644 --- a/packages/overlay/README.md +++ b/packages/overlay/README.md @@ -87,14 +87,14 @@ Page({ ### Props -| 参数 | 说明 | 类型 | 默认值 | -| ------------ | ------------------------------------------------ | ------------------ | ------- | -| show | 是否展示遮罩层 | _boolean_ | `false` | -| z-index | z-index 层级 | _string \| number_ | `1` | -| duration | 动画时长，单位秒 | _string \| number_ | `0.3` | -| class-name | 自定义类名 | _string_ | - | -| custom-style | 自定义样式 | _string_ | - | -| lock-scroll `1.7.3` | 是否锁定背景滚动，锁定时蒙层里的内容也将无法滚动 | _boolean_ | true | +| 参数 | 说明 | 类型 | 默认值 | +| -------------------- | ------------------------------------------------ | ------------------ | ------- | +| show | 是否展示遮罩层 | _boolean_ | `false` | +| z-index | z-index 层级 | _string \| number_ | `1` | +| duration | 动画时长，单位秒 | _string \| number_ | `0.3` | +| class-name | 自定义类名 | _string_ | - | +| custom-style | 自定义样式 | _string_ | - | +| lock-scroll `v1.7.3` | 是否锁定背景滚动，锁定时蒙层里的内容也将无法滚动 | _boolean_ | true | ### Events diff --git a/packages/panel/README.md b/packages/panel/README.md index af7bdcc2..19570173 100644 --- a/packages/panel/README.md +++ b/packages/panel/README.md @@ -40,11 +40,11 @@ ### Props -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| ------ | ---- | -------- | ------ | ---- | -| title | 标题 | _string_ | - | - | -| desc | 描述 | _string_ | - | - | -| status | 状态 | _string_ | - | - | +| 参数 | 说明 | 类型 | 默认值 | +| ------ | ---- | -------- | ------ | +| title | 标题 | _string_ | - | +| desc | 描述 | _string_ | - | +| status | 状态 | _string_ | - | ### Slot diff --git a/packages/picker/README.md b/packages/picker/README.md index fe661243..7e316bad 100644 --- a/packages/picker/README.md +++ b/packages/picker/README.md @@ -146,29 +146,29 @@ Page({ ### Props -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| --- | --- | --- | --- | --- | -| columns | 对象数组，配置每一列显示的数据 | _Array_ | `[]` | - | -| show-toolbar | 是否显示顶部栏 | _boolean_ | `false` | - | -| toolbar-position | 顶部栏位置，可选值为`bottom` | _string_ | `top` | - | -| title | 顶部栏标题 | _string_ | `''` | - | -| loading | 是否显示加载状态 | _boolean_ | `false` | - | -| value-key | 选项对象中，文字对应的 key | _string_ | `text` | - | -| item-height | 选项高度 | _number_ | `44` | - | -| confirm-button-text | 确认按钮文字 | _string_ | `确认` | - | -| cancel-button-text | 取消按钮文字 | _string_ | `取消` | - | -| visible-item-count | 可见的选项个数 | _number_ | `6` | - | -| default-index | 单列选择器的默认选中项索引，
多列选择器请参考下方的 Columns 配置 | _number_ | `0` | - | +| 参数 | 说明 | 类型 | 默认值 | +| ------------------- | ------------------------------------------------------------------- | --------- | --- | +| columns | 对象数组，配置每一列显示的数据 | _Array_ | `[]` | +| show-toolbar | 是否显示顶部栏 | _boolean_ | `false` | +| toolbar-position | 顶部栏位置，可选值为`bottom` | _string_ | `top` | +| title | 顶部栏标题 | _string_ | `''` | +| loading | 是否显示加载状态 | _boolean_ | `false` | +| value-key | 选项对象中，文字对应的 key | _string_ | `text` | +| item-height | 选项高度 | _number_ | `44` | +| confirm-button-text | 确认按钮文字 | _string_ | `确认` | +| cancel-button-text | 取消按钮文字 | _string_ | `取消` | +| visible-item-count | 可见的选项个数 | _number_ | `6` | +| default-index | 单列选择器的默认选中项索引，
多列选择器请参考下方的 Columns 配置 | _number_ | `0` | ### Events Picker 组件的事件会根据 columns 是单列或多列返回不同的参数。 -| 事件名 | 说明 | 参数 | -| --- | --- | --- | -| confirm | 点击完成按钮时触发 | 单列：选中值，选中值对应的索引
多列：所有列选中值，所有列选中值对应的索引 | -| cancel | 点击取消按钮时触发 | 单列：选中值，选中值对应的索引
多列：所有列选中值，所有列选中值对应的索引 | -| change | 选项改变时触发 | 单列：Picker 实例，选中值，选中值对应的索引
多列：Picker 实例，所有列选中值，当前列对应的索引 | +| 事件名 | 说明 | 参数 | +| ------- | ------------------ | ------------------------------------------------------------------------------------------------ | +| confirm | 点击完成按钮时触发 | 单列：选中值，选中值对应的索引
多列：所有列选中值，所有列选中值对应的索引 | +| cancel | 点击取消按钮时触发 | 单列：选中值，选中值对应的索引
多列：所有列选中值，所有列选中值对应的索引 | +| change | 选项改变时触发 | 单列：Picker 实例，选中值，选中值对应的索引
多列：Picker 实例，所有列选中值，当前列对应的索引 | ### Columns 数据结构 @@ -192,15 +192,15 @@ Picker 组件的事件会根据 columns 是单列或多列返回不同的参数 通过 selectComponent 可以获取到 picker 实例并调用实例方法。 -| 方法名 | 参数 | 返回值 | 介绍 | -| --- | --- | --- | --- | -| getValues | - | values | 获取所有列选中的值 | -| setValues | values | - | 设置所有列选中的值 | -| getIndexes | - | indexes | 获取所有列选中值对应的索引 | -| setIndexes | indexes | - | 设置所有列选中值对应的索引 | -| getColumnValue | columnIndex | value | 获取对应列选中的值 | -| setColumnValue | columnIndex, value | - | 设置对应列选中的值 | -| getColumnIndex | columnIndex | optionIndex | 获取对应列选中项的索引 | -| setColumnIndex | columnIndex, optionIndex | - | 设置对应列选中项的索引 | -| getColumnValues | columnIndex | values | 获取对应列中所有选项 | -| setColumnValues | columnIndex, values | - | 设置对应列中所有选项 | +| 方法名 | 参数 | 返回值 | 介绍 | +| --------------- | ------------------------ | ----------- | -------------------------- | +| getValues | - | values | 获取所有列选中的值 | +| setValues | values | - | 设置所有列选中的值 | +| getIndexes | - | indexes | 获取所有列选中值对应的索引 | +| setIndexes | indexes | - | 设置所有列选中值对应的索引 | +| getColumnValue | columnIndex | value | 获取对应列选中的值 | +| setColumnValue | columnIndex, value | - | 设置对应列选中的值 | +| getColumnIndex | columnIndex | optionIndex | 获取对应列选中项的索引 | +| setColumnIndex | columnIndex, optionIndex | - | 设置对应列选中项的索引 | +| getColumnValues | columnIndex | values | 获取对应列中所有选项 | +| setColumnValues | columnIndex, values | - | 设置对应列中所有选项 | diff --git a/packages/popup/README.md b/packages/popup/README.md index 98712c16..627820d2 100644 --- a/packages/popup/README.md +++ b/packages/popup/README.md @@ -133,14 +133,14 @@ Page({ | position | 弹出位置，可选值为 `top` `bottom` `right` `left` | _string_ | `center` | | duration | 动画时长，单位为毫秒 | _number \| object_ | `300` | | round | 是否显示圆角 | _boolean_ | `false` | -| custom-style | 自定义弹出层样式 | _string_ | `` | -| overlay-style | 自定义遮罩层样式 | _string_ | `` | +| custom-style | 自定义弹出层样式 | _string_ | `''` | +| overlay-style | 自定义遮罩层样式 | _string_ | `''` | | close-on-click-overlay | 是否在点击遮罩层后关闭 | _boolean_ | `true` | | closeable | 是否显示关闭图标 | _boolean_ | `false` | | close-icon | 关闭图标名称或图片链接 | _string_ | `cross` | | safe-area-inset-bottom | 是否为 iPhoneX 留出底部安全距离 | _boolean_ | `true` | | safe-area-inset-top | 是否留出顶部安全距离（状态栏高度） | _boolean_ | `false` | -| lock-scroll `1.7.3` | 是否锁定背景滚动 | _boolean_ | `true` | +| lock-scroll `v1.7.3` | 是否锁定背景滚动 | _boolean_ | `true` | ### Events diff --git a/packages/progress/README.md b/packages/progress/README.md index 1c73a58a..5e5f4b93 100644 --- a/packages/progress/README.md +++ b/packages/progress/README.md @@ -61,17 +61,17 @@ ### Props -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| inactive | 是否置灰 | _boolean_ | `false` | -| percentage | 进度百分比 | _number_ | `0` | -| stroke-width | 进度条粗细，默认单位为`px` | _string \| number_ | `4px` | -| show-pivot | 是否显示进度文字 | _boolean_ | `true` | -| color | 进度条颜色 | _string_ | `#1989fa` | -| text-color | 进度文字颜色 | _string_ | `#fff` | -| track-color | 轨道颜色 | _string_ | `#e5e5e5` | -| pivot-text | 文字显示 | _string_ | 百分比文字 | -| pivot-color | 文字背景色 | _string_ | 与进度条颜色一致 | +| 参数 | 说明 | 类型 | 默认值 | +| ------------ | -------------------------- | ------------------ | ---------------- | +| inactive | 是否置灰 | _boolean_ | `false` | +| percentage | 进度百分比 | _number_ | `0` | +| stroke-width | 进度条粗细，默认单位为`px` | _string \| number_ | `4px` | +| show-pivot | 是否显示进度文字 | _boolean_ | `true` | +| color | 进度条颜色 | _string_ | `#1989fa` | +| text-color | 进度文字颜色 | _string_ | `#fff` | +| track-color | 轨道颜色 | _string_ | `#e5e5e5` | +| pivot-text | 文字显示 | _string_ | 百分比文字 | +| pivot-color | 文字背景色 | _string_ | 与进度条颜色一致 | ### 外部样式类 diff --git a/packages/radio/README.md b/packages/radio/README.md index 3b7be1c0..65bcbc76 100644 --- a/packages/radio/README.md +++ b/packages/radio/README.md @@ -188,12 +188,12 @@ Page({ ### RadioGroup Props -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| name | 在表单内提交时的标识符 | _string_ | - | -| value | 当前选中项的标识符 | _any_ | - | -| disabled | 是否禁用所有单选框 | _boolean_ | `false` | -| direction `v1.6.7` | 排列方向，可选值为 `horizontal` | _string_ | `vertical` | +| 参数 | 说明 | 类型 | 默认值 | +| ------------------ | ------------------------------- | --------- | --- | +| name | 在表单内提交时的标识符 | _string_ | - | +| value | 当前选中项的标识符 | _any_ | - | +| disabled | 是否禁用所有单选框 | _boolean_ | `false` | +| direction `v1.6.7` | 排列方向，可选值为 `horizontal` | _string_ | `vertical` | ### Radio Props diff --git a/packages/search/README.md b/packages/search/README.md index d16fec09..a3ab12d5 100644 --- a/packages/search/README.md +++ b/packages/search/README.md @@ -135,6 +135,7 @@ Page({ | use-right-icon-slot | 是否使用输入框右侧图标 slot | _boolean_ | `false` | | left-icon | 输入框左侧图标名称或图片链接，可选值见 Icon 组件（如果设置了 use-left-icon-slot，则该属性无效） | _string_ | `search` | | right-icon | 输入框右侧图标名称或图片链接，可选值见 Icon 组件（如果设置了 use-right-icon-slot，则该属性无效） | _string_ | - | +| clear-icon `v1.8.4` | 清除[图标名称](#/icon)或图片链接 | _string_ | `clear` | ### Events diff --git a/packages/search/index.ts b/packages/search/index.ts index 43cf5fa2..46a649d2 100644 --- a/packages/search/index.ts +++ b/packages/search/index.ts @@ -48,6 +48,10 @@ VantComponent({ type: String, value: 'focus', }, + clearIcon: { + type: String, + value: 'clear', + }, }, methods: { diff --git a/packages/search/index.wxml b/packages/search/index.wxml index 15a99fba..0068cfe7 100644 --- a/packages/search/index.wxml +++ b/packages/search/index.wxml @@ -22,6 +22,7 @@ readonly="{{ readonly }}" clearable="{{ clearable }}" clear-trigger="{{ clearTrigger }}" + clear-icon="{{ clearIcon }}" maxlength="{{ maxlength }}" input-align="{{ inputAlign }}" input-class="input-class" diff --git a/packages/share-sheet/README.md b/packages/share-sheet/README.md index a9761ac6..5b934bb1 100644 --- a/packages/share-sheet/README.md +++ b/packages/share-sheet/README.md @@ -157,27 +157,27 @@ Page({ ### Props -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| options | 分享选项 | _Option[]_ | `[]` | -| title | 顶部标题 | _string_ | - | -| cancel-text | 取消按钮文字 | _string_ | `'取消'` | -| description | 标题下方的辅助描述文字 | _string_ | - | -| duration | 动画时长，单位毫秒 | _number \| string_ | `300` | -| overlay | 是否显示遮罩层 | _boolean_ | `true` | -| close-on-click-overlay | 是否在点击遮罩层后关闭 | _boolean_ | `true` | -| safe-area-inset-bottom | 是否开启底部安全区适配 | _boolean_ | `true` | +| 参数 | 说明 | 类型 | 默认值 | +| ---------------------- | ---------------------- | ------------------ | -------- | +| options | 分享选项 | _Option[]_ | `[]` | +| title | 顶部标题 | _string_ | - | +| cancel-text | 取消按钮文字 | _string_ | `'取消'` | +| description | 标题下方的辅助描述文字 | _string_ | - | +| duration | 动画时长，单位毫秒 | _number \| string_ | `300` | +| overlay | 是否显示遮罩层 | _boolean_ | `true` | +| close-on-click-overlay | 是否在点击遮罩层后关闭 | _boolean_ | `true` | +| safe-area-inset-bottom | 是否开启底部安全区适配 | _boolean_ | `true` | ### Option 数据结构 `options`属性为一个对象数组，数组中的每个对象配置一列，对象可以包含以下值： -| 键名 | 说明 | 类型 | -| --- | --- | --- | -| name | 分享渠道名称 | _string_ | -| description | 分享选项描述 | _string_ | -| icon | 图标，可选值为 `qq` `link` `weibo` `wechat` `poster` `qrcode` `weapp-qrcode` `wechat-moments`，支持传入图片 URL | _string_ | -| openType | 按钮 `open-type`，可用于实现分享功能，可选值为 `share` | _string_ | +| 键名 | 说明 | 类型 | +| ----------- | --------------------------------------------------------------------------------------------------------------- | -------- | +| name | 分享渠道名称 | _string_ | +| description | 分享选项描述 | _string_ | +| icon | 图标，可选值为 `qq` `link` `weibo` `wechat` `poster` `qrcode` `weapp-qrcode` `wechat-moments`，支持传入图片 URL | _string_ | +| openType | 按钮 `open-type`，可用于实现分享功能，可选值为 `share` | _string_ | ### Events diff --git a/packages/sidebar/README.md b/packages/sidebar/README.md index ab9c3f97..360be56c 100644 --- a/packages/sidebar/README.md +++ b/packages/sidebar/README.md @@ -95,9 +95,9 @@ Page({ ### Sidebar Props -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| --------- | ------------ | ------------------ | ------ | ---- | -| activeKey | 选中项的索引 | _string \| number_ | `0` | - | +| 参数 | 说明 | 类型 | 默认值 | +| --------- | ------------ | ------------------ | ------ | +| activeKey | 选中项的索引 | _string \| number_ | `0` | ### Sidebar Event @@ -113,13 +113,13 @@ Page({ ### SidebarItem Props -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| title | 内容 | _string_ | `''` | -| dot | 是否显示右上角小红点 | _boolean_ | `false` | -| info | 图标右上角徽标的内容（已废弃，请使用 badge 属性） | _string \| number_ | `''` | -| badge `v1.5.0` | 图标右上角徽标的内容 | _string \| number_ | `''` | -| disabled | 是否禁用该项 | _boolean_ | `false` | +| 参数 | 说明 | 类型 | 默认值 | +| -------------- | ------------------------------------------------- | ------------------ | ------- | +| title | 内容 | _string_ | `''` | +| dot | 是否显示右上角小红点 | _boolean_ | `false` | +| info | 图标右上角徽标的内容（已废弃，请使用 badge 属性） | _string \| number_ | `''` | +| badge `v1.5.0` | 图标右上角徽标的内容 | _string \| number_ | `''` | +| disabled | 是否禁用该项 | _boolean_ | `false` | ### SidebarItem Slot diff --git a/packages/skeleton/README.md b/packages/skeleton/README.md index 10d5b667..600d40df 100644 --- a/packages/skeleton/README.md +++ b/packages/skeleton/README.md @@ -61,16 +61,14 @@ Page({ ### Props -### Props - -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| --- | --- | --- | --- | --- | -| row | 段落占位图行数 | _number_ | `0` | - | -| row-width | 段落占位图宽度，可传数组来设置每一行的宽度 | _string \| string[]_ | `100%` | - | -| title | 是否显示标题占位图 | _boolean_ | `false` | - | -| title-width | 标题占位图宽度 | _string \| number_ | `40%` | - | -| avatar | 是否显示头像占位图 | _boolean_ | `false` | - | -| avatar-size | 头像占位图大小 | _string \| number_ | `32px` | - | -| avatar-shape | 头像占位图形状，可选值为`square` | _string_ | `round` | - | -| loading | 是否显示占位图，传`false`时会展示子组件内容 | _boolean_ | `true` | - | -| animate | 是否开启动画 | _boolean_ | `true` | - | +| 参数 | 说明 | 类型 | 默认值 | +| ------------ | ------------------------------------------- | -------------------- | ------- | +| row | 段落占位图行数 | _number_ | `0` | +| row-width | 段落占位图宽度，可传数组来设置每一行的宽度 | _string \| string[]_ | `100%` | +| title | 是否显示标题占位图 | _boolean_ | `false` | +| title-width | 标题占位图宽度 | _string \| number_ | `40%` | +| avatar | 是否显示头像占位图 | _boolean_ | `false` | +| avatar-size | 头像占位图大小 | _string \| number_ | `32px` | +| avatar-shape | 头像占位图形状，可选值为`square` | _string_ | `round` | +| loading | 是否显示占位图，传`false`时会展示子组件内容 | _boolean_ | `true` | +| animate | 是否开启动画 | _boolean_ | `true` | diff --git a/packages/slider/README.md b/packages/slider/README.md index e9b8670c..c34f21dd 100644 --- a/packages/slider/README.md +++ b/packages/slider/README.md @@ -85,16 +85,18 @@ Page({ ### Props -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| -------------- | -------------------------------- | ------------------ | --------- | ---- | -| value | 当前进度百分比，取值范围为 0-100 | _number_ | `0` | - | -| disabled | 是否禁用滑块 | _boolean_ | `false` | - | -| max | 最大值 | _number_ | `100` | - | -| min | 最小值 | _number_ | `0` | - | -| step | 步长 | _number_ | `1` | - | -| bar-height | 进度条高度，默认单位为 `px` | _string \| number_ | `2px` | - | -| active-color | 进度条激活态颜色 | _string_ | `#1989fa` | - | -| inactive-color | 进度条默认颜色 | _string_ | `#e5e5e5` | - | +| 参数 | 说明 | 类型 | 默认值 | +| --------------- | ---------------------------------------- | -------------------- | --------- | +| value | 当前进度百分比，在双滑块模式下为数组格式 | _number \| number[]_ | `0` | +| disabled | 是否禁用滑块 | _boolean_ | `false` | +| max | 最大值 | _number_ | `100` | +| min | 最小值 | _number_ | `0` | +| step | 步长 | _number_ | `1` | +| bar-height | 进度条高度，默认单位为 `px` | _string \| number_ | `2px` | +| active-color | 进度条激活态颜色 | _string_ | `#1989fa` | +| inactive-color | 进度条默认颜色 | _string_ | `#e5e5e5` | +| use-slot-button | 是否使用钮插槽 | _boolean_ | `false` | +| range `v1.8.4` | 是否开启双滑块模式 | _boolean_ | `false` | ### Events @@ -110,3 +112,11 @@ Page({ | 类名 | 说明 | | ------------ | ------------ | | custom-class | 根节点样式类 | + +### Slots + +| 名称 | 说明 | 参数 | +| --------------------- | ----------------------------------- | ------------------- | +| button | 自定义滑块按钮 | _{ value: number }_ | +| left-button `v1.8.4` | 自定义左侧滑块按钮（双滑块模式下） | _{ value: number }_ | +| right-button `v1.8.4` | 自定义右侧滑块按钮 （双滑块模式下） | _{ value: number }_ | diff --git a/packages/slider/index.less b/packages/slider/index.less index 8d1972e1..fd6796ee 100644 --- a/packages/slider/index.less +++ b/packages/slider/index.less @@ -34,12 +34,20 @@ .theme(box-shadow, '@slider-button-box-shadow'); .theme(background-color, '@slider-button-background-color'); - &-wrapper { + &-wrapper, + &-wrapper-right { position: absolute; top: 50%; right: 0; transform: translate3d(50%, -50%, 0); } + + &-wrapper-left { + position: absolute; + top: 50%; + left: 0; + transform: translate3d(-50%, -50%, 0); + } } &--disabled { diff --git a/packages/slider/index.ts b/packages/slider/index.ts index 5e0e24ff..1b7367e1 100644 --- a/packages/slider/index.ts +++ b/packages/slider/index.ts @@ -3,10 +3,13 @@ import { touch } from '../mixins/touch'; import { canIUseModel } from '../common/version'; import { getRect } from '../common/utils'; +type SliderValue = number | [number, number]; + VantComponent({ mixins: [touch], props: { + range: Boolean, disabled: Boolean, useButtonSlot: Boolean, activeColor: String, @@ -26,6 +29,7 @@ VantComponent({ value: { type: Number, value: 0, + optionalTypes: [Array], observer(val) { if (val !== this.value) { this.updateValue(val); @@ -43,8 +47,23 @@ VantComponent({ onTouchStart(event: WechatMiniprogram.TouchEvent) { if (this.data.disabled) return; + const { index } = event.currentTarget.dataset; + if (typeof index === 'number') { + this.buttonIndex = index; + } + this.touchStart(event); this.startValue = this.format(this.value); + this.newValue = this.value; + + if (this.isRange(this.newValue)) { + this.startValue = this.newValue.map((val) => this.format(val)) as [ + number, + number + ]; + } else { + this.startValue = this.format(this.newValue); + } this.dragStatus = 'start'; }, @@ -60,7 +79,13 @@ VantComponent({ getRect(this, '.van-slider').then((rect) => { const diff = (this.deltaX / rect.width) * this.getRange(); - this.newValue = this.startValue + diff; + + if (this.isRange(this.startValue)) { + (this.newValue as [number, number])[this.buttonIndex] = + this.startValue[this.buttonIndex] + diff; + } else { + this.newValue = this.startValue + diff; + } this.updateValue(this.newValue, false, true); }); }, @@ -82,20 +107,50 @@ VantComponent({ getRect(this, '.van-slider').then((rect) => { const value = ((event.detail.x - rect.left) / rect.width) * this.getRange() + min; - this.updateValue(value, true); + + if (this.isRange(this.value)) { + const [left, right] = this.value; + const middle = (left + right) / 2; + + if (value <= middle) { + this.updateValue([value, right], true); + } else { + this.updateValue([left, value], true); + } + } else { + this.updateValue(value, true); + } }); }, - updateValue(value: number, end?: boolean, drag?: boolean) { - value = this.format(value); - const { min } = this.data; - const width = `${((value - min) * 100) / this.getRange()}%`; + isRange(val: unknown): val is [number, number] { + const { range } = this.data; + return range && Array.isArray(val); + }, + + handleOverlap(value: [number, number]) { + if (value[0] > value[1]) { + return value.slice(0).reverse(); + } + return value; + }, + + updateValue(value: SliderValue, end?: boolean, drag?: boolean) { + if (this.isRange(value)) { + value = this.handleOverlap(value).map((val) => this.format(val)) as [ + number, + number + ]; + } else { + value = this.format(value); + } this.value = value; this.setData({ barStyle: ` - width: ${width}; + width: ${this.calcMainAxis()}; + left: ${this.isRange(value) ? `${value[0]}%` : 0}; ${drag ? 'transition: none;' : ''} `, }); @@ -113,11 +168,26 @@ VantComponent({ } }, + getScope() { + return Number(this.data.max) - Number(this.data.min); + }, + getRange() { const { max, min } = this.data; return max - min; }, + // 计算选中条的长度百分比 + calcMainAxis() { + const { value } = this; + const { min } = this.data; + const scope = this.getScope(); + if (this.isRange(value)) { + return `${((value[1] - value[0]) * 100) / scope}%`; + } + return `${((value - Number(min)) * 100) / scope}%`; + }, + format(value: number) { const { max, min, step } = this.data; return Math.round(Math.max(min, Math.min(value, max)) / step) * step; diff --git a/packages/slider/index.wxml b/packages/slider/index.wxml index 11908eda..7129a5bc 100644 --- a/packages/slider/index.wxml +++ b/packages/slider/index.wxml @@ -11,6 +11,44 @@ style="{{ barStyle }}; {{ style({ backgroundColor: activeColor }) }}" > + + + + + + + + + ``` -## 常见问题 - -### 组件从隐藏状态切换到显示状态时，底部条位置错误？ - -Tabs 组件在挂载时，会获取自身的宽度，并计算出底部条的位置。如果组件一开始处于隐藏状态，则获取到的宽度永远为 0，因此无法展示底部条位置。 - -#### 解决方法 - -方法一，使用 `wx:if` 来控制组件展示，使组件重新初始化。 - -```html - -``` - -方法二，调用组件的 resize 方法来主动触发重绘。 - -```html - -``` - -```js -this.selectComponent('#tabs').resize(); -``` - ## API ### Tabs Props -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| type | 样式风格，可选值为`card` | _string_ | `line` | -| color | 标签主题色 | _string_ | `#ee0a24` | -| active | 当前选中标签的标识符 | _string \| number_ | `0` | -| duration | 动画时间，单位秒 | _number_ | `0.3` | -| line-width | 底部条宽度，默认单位`px` | _string \| number_ | `40px` | -| line-height | 底部条高度，默认单位`px` | _string \| number_ | `3px` | -| animated | 是否开启切换标签内容时的转场动画 | _boolean_ | `false` | -| border | 是否展示外边框，仅在 `line` 风格下生效 | _boolean_ | `false` | -| ellipsis | 是否省略过长的标题文字 | _boolean_ | `true` | -| sticky | 是否使用粘性定位布局 | _boolean_ | `false` | -| swipeable | 是否开启手势滑动切换 | _boolean_ | `false` | -| lazy-render | 是否开启标签页内容延迟渲染 | _boolean_ | `true` | -| offset-top | 粘性定位布局下与顶部的最小距离，单位`px` | _number_ | - | -| swipe-threshold | 滚动阈值，标签数量超过阈值且总宽度超过标签栏宽度时开始横向滚动 | _number_ | `5` | -| title-active-color | 标题选中态颜色 | _string_ | - | -| title-inactive-color | 标题默认态颜色 | _string_ | - | -| z-index | z-index 层级 | _number_ | `1` | +| 参数 | 说明 | 类型 | 默认值 | +| -------------------- | -------------------------------------------------------------- | ------------------ | --------- | +| type | 样式风格，可选值为`card` | _string_ | `line` | +| color | 标签主题色 | _string_ | `#ee0a24` | +| active | 当前选中标签的标识符 | _string \| number_ | `0` | +| duration | 动画时间，单位秒 | _number_ | `0.3` | +| line-width | 底部条宽度，默认单位`px` | _string \| number_ | `40px` | +| line-height | 底部条高度，默认单位`px` | _string \| number_ | `3px` | +| animated | 是否开启切换标签内容时的转场动画 | _boolean_ | `false` | +| border | 是否展示外边框，仅在 `line` 风格下生效 | _boolean_ | `false` | +| ellipsis | 是否省略过长的标题文字 | _boolean_ | `true` | +| sticky | 是否使用粘性定位布局 | _boolean_ | `false` | +| swipeable | 是否开启手势滑动切换 | _boolean_ | `false` | +| lazy-render | 是否开启标签页内容延迟渲染 | _boolean_ | `true` | +| offset-top | 粘性定位布局下与顶部的最小距离，单位`px` | _number_ | - | +| swipe-threshold | 滚动阈值，标签数量超过阈值且总宽度超过标签栏宽度时开始横向滚动 | _number_ | `5` | +| title-active-color | 标题选中态颜色 | _string_ | - | +| title-inactive-color | 标题默认态颜色 | _string_ | - | +| z-index | z-index 层级 | _number_ | `1` | ### Tab Props @@ -259,12 +235,12 @@ this.selectComponent('#tabs').resize(); ### Tabs Event -| 事件名 | 说明 | 参数 | -| --- | --- | --- | -| bind:click | 点击标签时触发 | name：标签标识符，title：标题 | -| bind:change | 当前激活的标签改变时触发 | name：标签标识符，title：标题 | -| bind:disabled | 点击被禁用的标签时触发 | name：标签标识符，title：标题 | -| bind:scroll | 滚动时触发 | { scrollTop: 距离顶部位置, isFixed: 是否吸顶 } | +| 事件名 | 说明 | 参数 | +| ------------- | ------------------------ | ---------------------------------------------- | +| bind:click | 点击标签时触发 | name：标签标识符，title：标题 | +| bind:change | 当前激活的标签改变时触发 | name：标签标识符，title：标题 | +| bind:disabled | 点击被禁用的标签时触发 | name：标签标识符，title：标题 | +| bind:scroll | 滚动时触发 | { scrollTop: 距离顶部位置, isFixed: 是否吸顶 } | ### 外部样式类 @@ -279,6 +255,30 @@ this.selectComponent('#tabs').resize(); 通过 selectComponent 可以获取到 Tabs 实例并调用实例方法。 -| 方法名 | 参数 | 返回值 | 介绍 | -| --- | --- | --- | --- | -| resize | - | - | 外层元素大小或组件显示状态变化时，可以调用此方法来触发重绘 | +| 方法名 | 参数 | 返回值 | 介绍 | +| ------ | ---- | ------ | ---------------------------------------------------------- | +| resize | - | - | 外层元素大小或组件显示状态变化时，可以调用此方法来触发重绘 | + +## 常见问题 + +### 组件从隐藏状态切换到显示状态时，底部条位置错误？ + +Tabs 组件在挂载时，会获取自身的宽度，并计算出底部条的位置。如果组件一开始处于隐藏状态，则获取到的宽度永远为 0，因此无法展示底部条位置。 + +#### 解决方法 + +方法一，使用 `wx:if` 来控制组件展示，使组件重新初始化。 + +```html + +``` + +方法二，调用组件的 resize 方法来主动触发重绘。 + +```html + +``` + +```js +this.selectComponent('#tabs').resize(); +``` diff --git a/packages/tabbar/README.md b/packages/tabbar/README.md index 64dc4e2c..86d26e8c 100644 --- a/packages/tabbar/README.md +++ b/packages/tabbar/README.md @@ -176,16 +176,16 @@ Page({ ### Tabbar Props -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| --- | --- | --- | --- | --- | -| active | 当前选中标签的索引 | _number_ | - | - | -| fixed | 是否固定在底部 | _boolean_ | `true` | - | -| placeholder | 固定在底部时，是否在标签位置生成一个等高的占位元素 | _boolean_ | `false` | -| border | 是否展示外边框 | _boolean_ | `true` | - | -| z-index | 元素 z-index | _number_ | `1` | - | -| active-color | 选中标签的颜色 | _string_ | `#1989fa` | - | -| inactive-color | 未选中标签的颜色 | _string_ | `#7d7e80` | - | -| safe-area-inset-bottom | 是否为 iPhoneX 留出底部安全距离 | _boolean_ | `true` | - | +| 参数 | 说明 | 类型 | 默认值 | +| ---------------------- | -------------------------------------------------- | --------- | --- | +| active | 当前选中标签的索引 | _number_ | - | +| fixed | 是否固定在底部 | _boolean_ | `true` | +| placeholder | 固定在底部时，是否在标签位置生成一个等高的占位元素 | _boolean_ | `false` | +| border | 是否展示外边框 | _boolean_ | `true` | +| z-index | 元素 z-index | _number_ | `1` | +| active-color | 选中标签的颜色 | _string_ | `#1989fa` | +| inactive-color | 未选中标签的颜色 | _string_ | `#7d7e80` | +| safe-area-inset-bottom | 是否为 iPhoneX 留出底部安全距离 | _boolean_ | `true` | ### Tabbar Event @@ -195,13 +195,13 @@ Page({ ### TabbarItem Props -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| --- | --- | --- | --- | --- | -| name | 标签名称，作为匹配的标识符 | _string \| number_ | 当前标签的索引值 | - | -| icon | 图标名称或图片链接，可选值见 [Icon 组件](#/icon) | _string_ | - | - | -| icon-prefix | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/icon#props) | _string_ | `van-icon` | -| dot | 是否显示小红点 | _boolean_ | - | - | -| info | 图标右上角提示信息 | _string \| number_ | - | - | +| 参数 | 说明 | 类型 | 默认值 | +| ----------- | -------------------------------------------------------------- | ------------------ | ---------------- | +| name | 标签名称，作为匹配的标识符 | _string \| number_ | 当前标签的索引值 | +| icon | 图标名称或图片链接，可选值见 [Icon 组件](#/icon) | _string_ | - | +| icon-prefix | 图标类名前缀，同 Icon 组件的 [class-prefix 属性](#/icon#props) | _string_ | `van-icon` | +| dot | 是否显示小红点 | _boolean_ | - | +| info | 图标右上角提示信息 | _string \| number_ | - | ### TabbarItem Slot diff --git a/packages/tag/README.md b/packages/tag/README.md index c61979ae..4dc2ba63 100644 --- a/packages/tag/README.md +++ b/packages/tag/README.md @@ -124,16 +124,16 @@ Page({ ### Props -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| --- | --- | --- | --- | --- | -| type | 类型，可选值为 `primary` `success` `danger` `warning` | _string_ | - | - | -| size | 大小, 可选值为 `large` `medium` | _string_ | - | - | -| color | 标签颜色 | _string_ | - | - | -| plain | 是否为空心样式 | _boolean_ | `false` | - | -| round | 是否为圆角样式 | _boolean_ | `false` | - | -| mark | 是否为标记样式 | _boolean_ | `false` | - | -| text-color | 文本颜色，优先级高于 `color` 属性 | _string_ | `white` | - | -| closeable | 是否为可关闭标签 | _boolean_ | `false` | +| 参数 | 说明 | 类型 | 默认值 | +| ---------- | ----------------------------------------------------- | --------- | ------- | +| type | 类型，可选值为 `primary` `success` `danger` `warning` | _string_ | - | +| size | 大小, 可选值为 `large` `medium` | _string_ | - | +| color | 标签颜色 | _string_ | - | +| plain | 是否为空心样式 | _boolean_ | `false` | +| round | 是否为圆角样式 | _boolean_ | `false` | +| mark | 是否为标记样式 | _boolean_ | `false` | +| text-color | 文本颜色，优先级高于 `color` 属性 | _string_ | `white` | +| closeable | 是否为可关闭标签 | _boolean_ | `false` | ### Slot diff --git a/packages/toast/README.md b/packages/toast/README.md index 9f96c90a..b49a2a02 100644 --- a/packages/toast/README.md +++ b/packages/toast/README.md @@ -97,31 +97,31 @@ Toast({ ### 方法 -| 方法名 | 参数 | 返回值 | 介绍 | -| --- | --- | --- | --- | -| Toast | `options | message` | toast 实例 | 展示提示 | -| Toast.loading | `options | message` | toast 实例 | 展示加载提示 | -| Toast.success | `options | message` | toast 实例 | 展示成功提示 | -| Toast.fail | `options | message` | toast 实例 | 展示失败提示 | -| Toast.clear | `clearAll` | `void` | 关闭提示 | -| Toast.setDefaultOptions | `options` | `void` | 修改默认配置，对所有 Toast 生效 | -| Toast.resetDefaultOptions | - | `void` | 重置默认配置，对所有 Toast 生效 | +| 方法名 | 参数 | 返回值 | 介绍 | +| ------------------------- | -------------------- | ---------- | ------------------------------- | +| Toast | `options \| message` | toast 实例 | 展示提示 | +| Toast.loading | `options \| message` | toast 实例 | 展示加载提示 | +| Toast.success | `options \| message` | toast 实例 | 展示成功提示 | +| Toast.fail | `options \| message` | toast 实例 | 展示失败提示 | +| Toast.clear | `clearAll` | `void` | 关闭提示 | +| Toast.setDefaultOptions | `options` | `void` | 修改默认配置，对所有 Toast 生效 | +| Toast.resetDefaultOptions | - | `void` | 重置默认配置，对所有 Toast 生效 | ### Options -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| --- | --- | --- | --- | --- | -| type | 提示类型，可选值为 `loading` `success` `fail` `html` | _string_ | `text` | - | -| position | 位置，可选值为 `top` `middle` `bottom` | _string_ | `middle` | - | -| message | 内容 | _string_ | `''` | - | - | -| mask | 是否显示遮罩层 | _boolean_ | `false` | - | -| forbidClick | 是否禁止背景点击 | _boolean_ | `false` | - | -| loadingType | 加载图标类型, 可选值为 `spinner` | _string_ | `circular` | - | -| zIndex | z-index 层级 | _number_ | `1000` | - | -| duration | 展示时长(ms)，值为 0 时，toast 不会消失 | _number_ | `2000` | - | -| selector | 自定义选择器 | _string_ | `van-toast` | - | -| context | 选择器的选择范围，可以传入自定义组件的 this 作为上下文 | _object_ | 当前页面 | - | -| onClose | 关闭时的回调函数 | _Function_ | - | - | +| 参数 | 说明 | 类型 | 默认值 | +| ----------- | ------------------------------------------------------ | ---------------- | ----------- | +| type | 提示类型，可选值为 `loading` `success` `fail` `html` | _string_ | `text` | +| position | 位置，可选值为 `top` `middle` `bottom` | _string_ | `middle` | +| message | 内容 | _string_ | `''` | +| mask | 是否显示遮罩层 | _boolean_ | `false` | +| forbidClick | 是否禁止背景点击 | _boolean_ | `false` | +| loadingType | 加载图标类型, 可选值为 `spinner` | _string_ | `circular` | +| zIndex | z-index 层级 | _number_ | `1000` | +| duration | 展示时长(ms)，值为 0 时，toast 不会消失 | _number_ | `2000` | +| selector | 自定义选择器 | _string_ | `van-toast` | +| context | 选择器的选择范围，可以传入自定义组件的 this 作为上下文 | _object_ | 当前页面 | +| onClose | 关闭时的回调函数 | _Function_ | - | ### Slot diff --git a/packages/transition/README.md b/packages/transition/README.md index 39675257..9a7fe3f9 100644 --- a/packages/transition/README.md +++ b/packages/transition/README.md @@ -67,12 +67,12 @@ transition 组件内置了多种动画，可以通过`name`字段指定动画类 ### Props -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| ------------ | -------------------- | ------------------ | ------ | ---- | -| name | 动画类型 | _string_ | `fade` | - | -| show | 是否展示组件 | _boolean_ | `true` | - | -| duration | 动画时长，单位为毫秒 | _number \| object_ | `300` | - | -| custom-style | 自定义样式 | _string_ | - | - | +| 参数 | 说明 | 类型 | 默认值 | +| ------------ | -------------------- | ------------------ | ------ | +| name | 动画类型 | _string_ | `fade` | +| show | 是否展示组件 | _boolean_ | `true` | +| duration | 动画时长，单位为毫秒 | _number \| object_ | `300` | +| custom-style | 自定义样式 | _string_ | - | ### Events @@ -87,15 +87,15 @@ transition 组件内置了多种动画，可以通过`name`字段指定动画类 ### 外部样式类 -| 类名 | 说明 | -| --- | --- | -| custom-class | 根节点样式类 | -| enter-class | 定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。 | -| enter-active-class | 定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。 | -| enter-to-class | 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 enter-class 被移除)，在过渡/动画完成之后移除。 | -| leave-class | 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。 | +| 类名 | 说明 | +| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| custom-class | 根节点样式类 | +| enter-class | 定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。 | +| enter-active-class | 定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。 | +| enter-to-class | 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 enter-class 被移除)，在过渡/动画完成之后移除。 | +| leave-class | 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。 | | leave-active-class | 定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。 | -| leave-to-class | 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 leave-class 被删除)，在过渡/动画完成之后移除。 | +| leave-to-class | 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 leave-class 被删除)，在过渡/动画完成之后移除。 | ### 动画类型 diff --git a/packages/tree-select/README.md b/packages/tree-select/README.md index 3143f24e..1db602d1 100644 --- a/packages/tree-select/README.md +++ b/packages/tree-select/README.md @@ -112,21 +112,21 @@ Page({ ### Props -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| --- | --- | --- | --- | --- | -| items | 分类显示所需的数据 | _Array_ | `[]` | - | -| height | 高度，默认单位为`px` | _number \| string_ | `300` | -| main-active-index | 左侧选中项的索引 | _number_ | `0` | - | -| active-id | 右侧选中项的 id，支持传入数组 | _string \| number \| Array_ | `0` | - | -| max | 右侧项最大选中个数 | _number_ | _Infinity_ | - | -| selected-icon `v1.5.0` | 自定义右侧栏选中状态的图标 | _string_ | `success` | +| 参数 | 说明 | 类型 | 默认值 | +| ---------------------- | ----------------------------- | --------------------------- | ---------- | +| items | 分类显示所需的数据 | _Array_ | `[]` | +| height | 高度，默认单位为`px` | _number \| string_ | `300` | +| main-active-index | 左侧选中项的索引 | _number_ | `0` | +| active-id | 右侧选中项的 id，支持传入数组 | _string \| number \| Array_ | `0` | +| max | 右侧项最大选中个数 | _number_ | _Infinity_ | +| selected-icon `v1.5.0` | 自定义右侧栏选中状态的图标 | _string_ | `success` | ### Events -| 事件名 | 说明 | 回调参数 | -| --- | --- | --- | -| bind:click-nav | 左侧导航点击时，触发的事件 | event.detail.index：被点击的导航的索引 | -| bind:click-item | 右侧选择项被点击时，会触发的事件 | event.detail: 该点击项的数据 | +| 事件名 | 说明 | 回调参数 | +| --------------- | -------------------------------- | -------------------------------------- | +| bind:click-nav | 左侧导航点击时，触发的事件 | event.detail.index：被点击的导航的索引 | +| bind:click-item | 右侧选择项被点击时，会触发的事件 | event.detail: 该点击项的数据 | ### Slots diff --git a/packages/uploader/README.md b/packages/uploader/README.md index 05b3edce..9b177613 100644 --- a/packages/uploader/README.md +++ b/packages/uploader/README.md @@ -222,28 +222,28 @@ uploadFilePromise(fileName, chooseResult) { ### Props -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| name | 标识符，可以在回调函数的第二项参数中获取 | _string \| number_ | - | -| accept | 接受的文件类型, 可选值为`all` `media` `image` `file` `video` | _string_ | `image` | -| sizeType | 所选的图片的尺寸, 当`accept`为`image`类型时设置所选图片的尺寸可选值为`original` `compressed` | _string[]_ | `['original','compressed']` | -| preview-size | 预览图和上传区域的尺寸，默认单位为`px` | _string \| number_ | `80px` | -| preview-image | 是否在上传完成后展示预览图 | _boolean_ | `true` | -| preview-full-image | 是否在点击预览图后展示全屏图片预览 | _boolean_ | `true` | -| multiple | 是否开启图片多选，部分安卓机型不支持 | _boolean_ | `false` | -| disabled | 是否禁用文件上传 | _boolean_ | `false` | -| show-upload | 是否展示文件上传按钮 | _boolean_ | `true` | -| deletable | 是否展示删除按钮 | _boolean_ | `true` | -| capture | 图片或者视频选取模式，当`accept`为`image`类型时设置`capture`可选值为`camera`可以直接调起摄像头 | _string \| string[]_ | `['album', 'camera']` | -| max-size | 文件大小限制，单位为`byte` | _number_ | - | -| max-count | 文件上传数量限制 | _number_ | - | -| upload-text | 上传区域文字提示 | _string_ | - | -| image-fit | 预览图裁剪模式，可选值参考小程序`image`组件的`mode`属性 | _string_ | `scaleToFill` | -| use-before-read | 是否开启文件读取前事件 | _boolean_ | - | -| camera | 当 accept 为 `video` 时生效，可选值为 `back` `front` | _string_ | - | -| compressed | 当 accept 为 `video` 时生效，是否压缩视频，默认为`true` | _boolean_ | - | -| max-duration | 当 accept 为 `video` 时生效，拍摄视频最长拍摄时间，单位秒 | _number_ | - | -| upload-icon | 上传区域图标，可选值见 [Icon 组件](#/icon) | _string_ | `plus` | +| 参数 | 说明 | 类型 | 默认值 | +| ------------------ | ---------------------------------------------------------------------------------------------- | -------------------- | --------------------------- | +| name | 标识符，可以在回调函数的第二项参数中获取 | _string \| number_ | - | +| accept | 接受的文件类型, 可选值为`all` `media` `image` `file` `video` | _string_ | `image` | +| sizeType | 所选的图片的尺寸, 当`accept`为`image`类型时设置所选图片的尺寸可选值为`original` `compressed` | _string[]_ | `['original','compressed']` | +| preview-size | 预览图和上传区域的尺寸，默认单位为`px` | _string \| number_ | `80px` | +| preview-image | 是否在上传完成后展示预览图 | _boolean_ | `true` | +| preview-full-image | 是否在点击预览图后展示全屏图片预览 | _boolean_ | `true` | +| multiple | 是否开启图片多选，部分安卓机型不支持 | _boolean_ | `false` | +| disabled | 是否禁用文件上传 | _boolean_ | `false` | +| show-upload | 是否展示文件上传按钮 | _boolean_ | `true` | +| deletable | 是否展示删除按钮 | _boolean_ | `true` | +| capture | 图片或者视频选取模式，当`accept`为`image`类型时设置`capture`可选值为`camera`可以直接调起摄像头 | _string \| string[]_ | `['album', 'camera']` | +| max-size | 文件大小限制，单位为`byte` | _number_ | - | +| max-count | 文件上传数量限制 | _number_ | - | +| upload-text | 上传区域文字提示 | _string_ | - | +| image-fit | 预览图裁剪模式，可选值参考小程序`image`组件的`mode`属性 | _string_ | `scaleToFill` | +| use-before-read | 是否开启文件读取前事件 | _boolean_ | - | +| camera | 当 accept 为 `video` 时生效，可选值为 `back` `front` | _string_ | - | +| compressed | 当 accept 为 `video` 时生效，是否压缩视频，默认为`true` | _boolean_ | - | +| max-duration | 当 accept 为 `video` 时生效，拍摄视频最长拍摄时间，单位秒 | _number_ | - | +| upload-icon | 上传区域图标，可选值见 [Icon 组件](#/icon) | _string_ | `plus` | #### accept 的合法值 @@ -276,10 +276,10 @@ uploadFilePromise(fileName, chooseResult) { ### Event -| 事件名 | 说明 | 回调参数 | -| --- | --- | --- | -| bind:before-read | 文件读取前，在回调函数中返回 `false` 可终止文件读取，绑定事件的同时需要将`use-before-read`属性设置为`true` | `event.detail.file`: 当前读取的文件，`event.detail.callback`: 回调函数，调用`callback(false)`终止文件读取 | -| bind:after-read | 文件读取完成后 | `event.detail.file`: 当前读取的文件 | -| bind:oversize | 文件超出大小限制 | - | -| bind:click-preview | 点击预览图片 | `event.detail.index`: 点击图片的序号值 | -| bind:delete | 删除图片 | `event.detail.index`: 删除图片的序号值 | +| 事件名 | 说明 | 回调参数 | +| ------------------ | ---------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- | +| bind:before-read | 文件读取前，在回调函数中返回 `false` 可终止文件读取，绑定事件的同时需要将`use-before-read`属性设置为`true` | `event.detail.file`: 当前读取的文件，`event.detail.callback`: 回调函数，调用`callback(false)`终止文件读取 | +| bind:after-read | 文件读取完成后 | `event.detail.file`: 当前读取的文件 | +| bind:oversize | 文件超出大小限制 | - | +| bind:click-preview | 点击预览图片 | `event.detail.index`: 点击图片的序号值 | +| bind:delete | 删除图片 | `event.detail.index`: 删除图片的序号值 |