mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-05 02:12:43 +08:00
chore: merge two prettier config (#4491)
This commit is contained in:
neverland
GitHub
parent
8629da1b75
commit
e3c07e52f9
@ -1,5 +1,4 @@
|
||||
{
|
||||
"printWidth": 90,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "none"
|
||||
"proseWrap": "never"
|
||||
}
|
||||
|
||||
@ -52,10 +52,6 @@
|
||||
"vue": "^3.2.1",
|
||||
"@vue/compiler-sfc": "^3.2.1"
|
||||
},
|
||||
"prettier": {
|
||||
"singleQuote": true,
|
||||
"proseWrap": "never"
|
||||
},
|
||||
"browserslist": [
|
||||
"Chrome >= 53",
|
||||
"ChromeAndroid >= 53",
|
||||
|
||||
@ -153,51 +153,51 @@ Page({
|
||||
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ---------------------- | ------------------------------- | --------- | ------ |
|
||||
| actions | 菜单选项 | _Array_ | `[]` |
|
||||
| title | 标题 | _string_ | - |
|
||||
| description `v1.0.0` | 选项上方的描述信息 | _string_ | - |
|
||||
| z-index | z-index 层级 | _number_ | `100` |
|
||||
| cancel-text | 取消按钮文字 | _string_ | - |
|
||||
| overlay | 是否显示遮罩层 | _boolean_ | - |
|
||||
| round `v1.0.0` | 是否显示圆角 | _boolean_ | `true` |
|
||||
| close-on-click-action | 是否在点击选项后关闭 | _boolean_ | `true` |
|
||||
| close-on-click-overlay | 点击遮罩是否关闭菜单 | _boolean_ | - |
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| actions | 菜单选项 | _Array_ | `[]` |
|
||||
| title | 标题 | _string_ | - |
|
||||
| description `v1.0.0` | 选项上方的描述信息 | _string_ | - |
|
||||
| z-index | z-index 层级 | _number_ | `100` |
|
||||
| cancel-text | 取消按钮文字 | _string_ | - |
|
||||
| overlay | 是否显示遮罩层 | _boolean_ | - |
|
||||
| round `v1.0.0` | 是否显示圆角 | _boolean_ | `true` |
|
||||
| close-on-click-action | 是否在点击选项后关闭 | _boolean_ | `true` |
|
||||
| close-on-click-overlay | 点击遮罩是否关闭菜单 | _boolean_ | - |
|
||||
| safe-area-inset-bottom | 是否为 iPhoneX 留出底部安全距离 | _boolean_ | `true` |
|
||||
|
||||
### Events
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
| ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- |
|
||||
| bind:select | 选中选项时触发，禁用或加载状态下不会触发 | event.detail: 选项对应的对象 |
|
||||
| bind:close | 关闭时触发 | - |
|
||||
| bind:cancel | 取消按钮点击时触发 | - |
|
||||
| bind:click-overlay | 点击遮罩层时触发 | - |
|
||||
| bind:getuserinfo | 用户点击该按钮时，会返回获取到的用户信息，回调的 detail 数据与 wx.getUserInfo 返回的一致，<a href="#/action-sheet#actions">openType</a>="getUserInfo"时有效 | - |
|
||||
| bind:contact | 客服消息回调，<a href="#/action-sheet#actions">openType</a>="contact"时有效 | - |
|
||||
| bind:getphonenumber | 获取用户手机号回调，<a href="#/action-sheet#actions">openType</a>="getPhoneNumber"时有效 | - |
|
||||
| bind:error | 当使用开放能力时，发生错误的回调，<a href="#/action-sheet#actions">openType</a>="launchApp"时有效 | - |
|
||||
| bind:launchapp | 打开 APP 成功的回调，<a href="#/action-sheet#actions">openType</a>="launchApp"时有效 | - |
|
||||
| bind:opensetting | 在打开授权设置页后回调，<a href="#/action-sheet#actions">openType</a>="openSetting"时有效 | - |
|
||||
| 事件名 | 说明 | 参数 |
|
||||
| --- | --- | --- |
|
||||
| bind:select | 选中选项时触发，禁用或加载状态下不会触发 | event.detail: 选项对应的对象 |
|
||||
| bind:close | 关闭时触发 | - |
|
||||
| bind:cancel | 取消按钮点击时触发 | - |
|
||||
| bind:click-overlay | 点击遮罩层时触发 | - |
|
||||
| bind:getuserinfo | 用户点击该按钮时，会返回获取到的用户信息，回调的 detail 数据与 wx.getUserInfo 返回的一致，<a href="#/action-sheet#actions">openType</a>="getUserInfo"时有效 | - |
|
||||
| bind:contact | 客服消息回调，<a href="#/action-sheet#actions">openType</a>="contact"时有效 | - |
|
||||
| bind:getphonenumber | 获取用户手机号回调，<a href="#/action-sheet#actions">openType</a>="getPhoneNumber"时有效 | - |
|
||||
| bind:error | 当使用开放能力时，发生错误的回调，<a href="#/action-sheet#actions">openType</a>="launchApp"时有效 | - |
|
||||
| bind:launchapp | 打开 APP 成功的回调，<a href="#/action-sheet#actions">openType</a>="launchApp"时有效 | - |
|
||||
| bind:opensetting | 在打开授权设置页后回调，<a href="#/action-sheet#actions">openType</a>="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_ | - |
|
||||
|
||||
@ -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，则重置到第一项 |
|
||||
|
||||
### 点击完成时返回的数据格式
|
||||
|
||||
|
||||
@ -117,47 +117,47 @@
|
||||
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------------------ | ------------------------------------------------------------------------------------------------------------------- | --------- | ------------ |
|
||||
| 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 简体中文，<br>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 简体中文，<br>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 | 用户点击该按钮时，会返回获取到的用户信息，<br>从返回参数的 detail 中获取到的值同 wx.getUserInfo | - |
|
||||
| bind:contact | 客服消息回调 | - |
|
||||
| bind:getphonenumber | 获取用户手机号回调 | - |
|
||||
| bind:error | 当使用开放能力时，发生错误的回调 | - |
|
||||
| bind:opensetting | 在打开授权设置页后回调 | - |
|
||||
| 事件名 | 说明 | 参数 |
|
||||
| --- | --- | --- |
|
||||
| bind:click | 点击按钮，且按钮状态不为加载或禁用时触发 | - |
|
||||
| bind:getuserinfo | 用户点击该按钮时，会返回获取到的用户信息，<br>从返回参数的 detail 中获取到的值同 wx.getUserInfo | - |
|
||||
| bind:contact | 客服消息回调 | - |
|
||||
| bind:getphonenumber | 获取用户手机号回调 | - |
|
||||
| bind:error | 当使用开放能力时，发生错误的回调 | - |
|
||||
| bind:opensetting | 在打开授权设置页后回调 | - |
|
||||
|
||||
> Button 提供的是 click 事件而不是原生 tap 事件，按钮禁用时，click 事件不会触发，tap 事件依然会触发。
|
||||
|
||||
|
||||
@ -56,7 +56,12 @@ VantComponent({
|
||||
onClick(event: WechatMiniprogram.TouchEvent) {
|
||||
this.$emit('click', event);
|
||||
|
||||
const { canIUseGetUserProfile, openType, getUserProfileDesc, lang } = this.data;
|
||||
const {
|
||||
canIUseGetUserProfile,
|
||||
openType,
|
||||
getUserProfileDesc,
|
||||
lang,
|
||||
} = this.data;
|
||||
|
||||
if (openType === 'getUserInfo' && canIUseGetUserProfile) {
|
||||
wx.getUserProfile({
|
||||
|
||||
@ -265,73 +265,73 @@ Page({
|
||||
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --------------------- | -------------------------------------------------------------------------------------------------- | -------------------- | ------------------ |
|
||||
| type | 选择类型:<br>`single`表示选择单个日期，<br>`multiple`表示选择多个日期，<br>`range`表示选择日期区间 | _string_ | `single` |
|
||||
| title | 日历标题 | _string_ | `日期选择` |
|
||||
| color | 主题色，对底部按钮和选中日期生效 | _string_ | `#ee0a24` |
|
||||
| min-date | 可选择的最小日期 | _timestamp_ | 当前日期 |
|
||||
| max-date | 可选择的最大日期 | _timestamp_ | 当前日期的六个月后 |
|
||||
| default-date | 默认选中的日期，`type`为`multiple`或`range`时为数组 | _timestamp \| timestamp[]_ | 今天 |
|
||||
| row-height | 日期行高 | _number \| string_ | `64` |
|
||||
| formatter | 日期格式化函数 | _(day: Day) => Day_ | - |
|
||||
| poppable | 是否以弹层的形式展示日历 | _boolean_ | `true` |
|
||||
| show-mark | 是否显示月份背景水印 | _boolean_ | `true` |
|
||||
| show-title | 是否展示日历标题 | _boolean_ | `true` |
|
||||
| show-subtitle | 是否展示日历副标题（年月） | _boolean_ | `true` |
|
||||
| show-confirm | 是否展示确认按钮 | _boolean_ | `true` |
|
||||
| confirm-text | 确认按钮的文字 | _string_ | `确定` |
|
||||
| confirm-disabled-text | 确认按钮处于禁用状态时的文字 | _string_ | `确定` |
|
||||
| first-day-of-week | 设置周起始日 | _0~6_ | `0` |
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| type | 选择类型:<br>`single`表示选择单个日期，<br>`multiple`表示选择多个日期，<br>`range`表示选择日期区间 | _string_ | `single` |
|
||||
| title | 日历标题 | _string_ | `日期选择` |
|
||||
| color | 主题色，对底部按钮和选中日期生效 | _string_ | `#ee0a24` |
|
||||
| min-date | 可选择的最小日期 | _timestamp_ | 当前日期 |
|
||||
| max-date | 可选择的最大日期 | _timestamp_ | 当前日期的六个月后 |
|
||||
| default-date | 默认选中的日期，`type`为`multiple`或`range`时为数组 | _timestamp \| timestamp[]_ | 今天 |
|
||||
| row-height | 日期行高 | _number \| string_ | `64` |
|
||||
| formatter | 日期格式化函数 | _(day: Day) => Day_ | - |
|
||||
| poppable | 是否以弹层的形式展示日历 | _boolean_ | `true` |
|
||||
| show-mark | 是否显示月份背景水印 | _boolean_ | `true` |
|
||||
| show-title | 是否展示日历标题 | _boolean_ | `true` |
|
||||
| show-subtitle | 是否展示日历副标题（年月） | _boolean_ | `true` |
|
||||
| show-confirm | 是否展示确认按钮 | _boolean_ | `true` |
|
||||
| confirm-text | 确认按钮的文字 | _string_ | `确定` |
|
||||
| confirm-disabled-text | 确认按钮处于禁用状态时的文字 | _string_ | `确定` |
|
||||
| first-day-of-week | 设置周起始日 | _0~6_ | `0` |
|
||||
|
||||
### Poppable Props
|
||||
|
||||
当 Calendar 的 `poppable` 为 `true` 时，支持以下 props:
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ---------------------- | --------------------------------------- | --------- | -------- |
|
||||
| show | 是否显示日历弹窗 | _boolean_ | `false` |
|
||||
| position | 弹出位置，可选值为 `top` `right` `left` | _string_ | `bottom` |
|
||||
| round | 是否显示圆角弹窗 | _boolean_ | `true` |
|
||||
| close-on-click-overlay | 是否在点击遮罩层后关闭 | _boolean_ | `true` |
|
||||
| safe-area-inset-bottom | 是否开启底部安全区适配 | _boolean_ | `true` |
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| show | 是否显示日历弹窗 | _boolean_ | `false` |
|
||||
| position | 弹出位置，可选值为 `top` `right` `left` | _string_ | `bottom` |
|
||||
| round | 是否显示圆角弹窗 | _boolean_ | `true` |
|
||||
| close-on-click-overlay | 是否在点击遮罩层后关闭 | _boolean_ | `true` |
|
||||
| safe-area-inset-bottom | 是否开启底部安全区适配 | _boolean_ | `true` |
|
||||
|
||||
### Range Props
|
||||
|
||||
当 Calendar 的 `type` 为 `range` 时，支持以下 props:
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------------------ | --------------------------------------------- | ------------------ | ------------------------ |
|
||||
| max-range | 日期区间最多可选天数，默认无限制 | _number \| string_ | - |
|
||||
| range-prompt | 范围选择超过最多可选天数时的提示文案 | _string \| null_ | `选择天数不能超过 xx 天` |
|
||||
| show-range-prompt | 范围选择超过最多可选天数时，是否展示提示文案 | _boolean_ | `true` |
|
||||
| allow-same-day | 是否允许日期范围的起止时间为同一天 | _boolean_ | `false` |
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| max-range | 日期区间最多可选天数，默认无限制 | _number \| string_ | - |
|
||||
| range-prompt | 范围选择超过最多可选天数时的提示文案 | _string \| null_ | `选择天数不能超过 xx 天` |
|
||||
| show-range-prompt | 范围选择超过最多可选天数时，是否展示提示文案 | _boolean_ | `true` |
|
||||
| allow-same-day | 是否允许日期范围的起止时间为同一天 | _boolean_ | `false` |
|
||||
|
||||
### Day 数据结构
|
||||
|
||||
日历中的每个日期都对应一个 Day 对象，通过`formatter`属性可以自定义 Day 对象的内容。
|
||||
|
||||
| 键名 | 说明 | 类型 |
|
||||
| ---------- | ------------------------------------------------------------------ | -------- |
|
||||
| date | 日期对应的 Date 对象 | _Date_ |
|
||||
| type | 日期类型，可选值为`selected`、`start`、`middle`、`end`、`disabled` | _string_ |
|
||||
| text | 中间显示的文字 | _string_ |
|
||||
| topInfo | 上方的提示信息 | _string_ |
|
||||
| bottomInfo | 下方的提示信息 | _string_ |
|
||||
| 键名 | 说明 | 类型 |
|
||||
| --- | --- | --- |
|
||||
| date | 日期对应的 Date 对象 | _Date_ |
|
||||
| type | 日期类型，可选值为`selected`、`start`、`middle`、`end`、`disabled` | _string_ |
|
||||
| text | 中间显示的文字 | _string_ |
|
||||
| topInfo | 上方的提示信息 | _string_ |
|
||||
| bottomInfo | 下方的提示信息 | _string_ |
|
||||
|
||||
### Events
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
| ----------------------- | ------------------------------------------------------------------ | ------------------------------ |
|
||||
| select | 点击任意日期时触发 | _value: Date \| Date[]_ |
|
||||
| unselect | 当 Calendar 的 `type` 为 `multiple` 时,点击已选中的日期时触发 | _value: Date_ |
|
||||
| confirm | 日期选择完成后触发，若`show-confirm`为`true`，则点击确认按钮后触发 | _value: Date \| Date[]_ |
|
||||
| open | 打开弹出层时触发 | - |
|
||||
| close | 关闭弹出层时触发 | - |
|
||||
| opened | 打开弹出层且动画结束后触发 | - |
|
||||
| closed | 关闭弹出层且动画结束后触发 | - |
|
||||
| over-range | 范围选择超过最多可选天数时触发 | - |
|
||||
| click-subtitle `v1.8.1` | 点击日历副标题时触发 | _WechatMiniprogram.TouchEvent_ |
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
| --- | --- | --- |
|
||||
| select | 点击任意日期时触发 | _value: Date \| Date[]_ |
|
||||
| unselect | 当 Calendar 的 `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
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -134,24 +134,24 @@
|
||||
|
||||
### Cell Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| -------------------- | ---------------------------------------------------------- | ------------------ | ------------ |
|
||||
| icon | 左侧图标名称或图片链接，可选值见 [Icon 组件](#/icon) | _string_ | - |
|
||||
| title | 左侧标题 | _string \| number_ | - |
|
||||
| title-width | 标题宽度，须包含单位 | _string_ | - |
|
||||
| value | 右侧内容 | _string \| number_ | - |
|
||||
| label | 标题下方的描述信息 | _string_ | - |
|
||||
| size | 单元格大小，可选值为 `large` | _string_ | - |
|
||||
| border | 是否显示下边框 | _boolean_ | `true` |
|
||||
| center | 是否使内容垂直居中 | _boolean_ | `false` |
|
||||
| url | 点击后跳转的链接地址 | _string_ | - |
|
||||
| link-type | 链接跳转类型，可选值为 `redirectTo` `switchTab` `reLaunch` | _string_ | `navigateTo` |
|
||||
| clickable | 是否开启点击反馈 | _boolean_ | `false` |
|
||||
| is-link | 是否展示右侧箭头并开启点击反馈 | _boolean_ | `false` |
|
||||
| required | 是否显示表单必填星号 | _boolean_ | `false` |
|
||||
| arrow-direction | 箭头方向，可选值为 `left` `up` `down` | _string_ | - |
|
||||
| use-label-slot | 是否使用 label slot | _boolean_ | `false` |
|
||||
| title-style `v1.4.0` | 标题样式 | _string_ | - |
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| icon | 左侧图标名称或图片链接，可选值见 [Icon 组件](#/icon) | _string_ | - |
|
||||
| title | 左侧标题 | _string \| number_ | - |
|
||||
| title-width | 标题宽度，须包含单位 | _string_ | - |
|
||||
| value | 右侧内容 | _string \| number_ | - |
|
||||
| label | 标题下方的描述信息 | _string_ | - |
|
||||
| size | 单元格大小，可选值为 `large` | _string_ | - |
|
||||
| border | 是否显示下边框 | _boolean_ | `true` |
|
||||
| center | 是否使内容垂直居中 | _boolean_ | `false` |
|
||||
| url | 点击后跳转的链接地址 | _string_ | - |
|
||||
| link-type | 链接跳转类型，可选值为 `redirectTo` `switchTab` `reLaunch` | _string_ | `navigateTo` |
|
||||
| clickable | 是否开启点击反馈 | _boolean_ | `false` |
|
||||
| is-link | 是否展示右侧箭头并开启点击反馈 | _boolean_ | `false` |
|
||||
| required | 是否显示表单必填星号 | _boolean_ | `false` |
|
||||
| arrow-direction | 箭头方向，可选值为 `left` `up` `down` | _string_ | - |
|
||||
| use-label-slot | 是否使用 label slot | _boolean_ | `false` |
|
||||
| title-style `v1.4.0` | 标题样式 | _string_ | - |
|
||||
|
||||
### Cell Event
|
||||
|
||||
|
||||
@ -182,12 +182,12 @@ Page({
|
||||
Page({
|
||||
data: {
|
||||
list: ['a', 'b', 'c'],
|
||||
result: ['a', 'b']
|
||||
result: ['a', 'b'],
|
||||
},
|
||||
|
||||
onChange(event) {
|
||||
this.setData({
|
||||
result: event.detail
|
||||
result: event.detail,
|
||||
});
|
||||
},
|
||||
|
||||
@ -197,7 +197,7 @@ Page({
|
||||
checkbox.toggle();
|
||||
},
|
||||
|
||||
noop() {}
|
||||
noop() {},
|
||||
});
|
||||
```
|
||||
|
||||
@ -211,27 +211,27 @@ Page({
|
||||
|
||||
### Checkbox Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| -------------- | ------------------------------- | ------------------ | --------- |
|
||||
| name | 标识 Checkbox 名称 | _string_ | - |
|
||||
| shape | 形状，可选值为 `round` `square` | _string_ | `round` |
|
||||
| value | 是否为选中状态 | _boolean_ | `false` |
|
||||
| disabled | 是否禁用单选框 | _boolean_ | `false` |
|
||||
| label-disabled | 是否禁用单选框内容点击 | _boolean_ | `false` |
|
||||
| label-position | 文本位置，可选值为 `left` | _string_ | `right` |
|
||||
| use-icon-slot | 是否使用 icon slot | _boolean_ | `false` |
|
||||
| checked-color | 选中状态颜色 | _string_ | `#1989fa` |
|
||||
| icon-size | icon 大小 | _string \| number_ | `20px` |
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| name | 标识 Checkbox 名称 | _string_ | - |
|
||||
| shape | 形状，可选值为 `round` `square` | _string_ | `round` |
|
||||
| value | 是否为选中状态 | _boolean_ | `false` |
|
||||
| disabled | 是否禁用单选框 | _boolean_ | `false` |
|
||||
| label-disabled | 是否禁用单选框内容点击 | _boolean_ | `false` |
|
||||
| label-position | 文本位置，可选值为 `left` | _string_ | `right` |
|
||||
| use-icon-slot | 是否使用 icon slot | _boolean_ | `false` |
|
||||
| checked-color | 选中状态颜色 | _string_ | `#1989fa` |
|
||||
| icon-size | icon 大小 | _string \| number_ | `20px` |
|
||||
|
||||
### CheckboxGroup Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------------------ | ------------------------------- | --------- | ------------- |
|
||||
| name | 在表单内提交时的标识符 | _string_ | - |
|
||||
| value | 所有选中项的 name | _Array_ | - |
|
||||
| disabled | 是否禁用所有单选框 | _boolean_ | `false` |
|
||||
| max | 设置最大可选数 | _number_ | `0`（无限制） |
|
||||
| direction `v1.7.0` | 排列方向，可选值为 `horizontal` | _string_ | `vertical` |
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| name | 在表单内提交时的标识符 | _string_ | - |
|
||||
| value | 所有选中项的 name | _Array_ | - |
|
||||
| disabled | 是否禁用所有单选框 | _boolean_ | `false` |
|
||||
| max | 设置最大可选数 | _number_ | `0`（无限制） |
|
||||
| direction `v1.7.0` | 排列方向，可选值为 `horizontal` | _string_ | `vertical` |
|
||||
|
||||
### Checkbox Event
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -152,33 +152,33 @@ Page({
|
||||
|
||||
### Collapse Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --------- | ------------------- | ---------------------------------------------------------------------- | ------- |
|
||||
| value | 当前展开面板的 name | 非手风琴模式：_(string \| number)[]_<br>手风琴模式：_string \| number_ | - |
|
||||
| accordion | 是否开启手风琴模式 | _boolean_ | `false` |
|
||||
| border | 是否显示外边框 | _boolean_ | `true` |
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| value | 当前展开面板的 name | 非手风琴模式：_(string \| number)[]_<br>手风琴模式：_string \| number_ | - |
|
||||
| accordion | 是否开启手风琴模式 | _boolean_ | `false` |
|
||||
| border | 是否显示外边框 | _boolean_ | `true` |
|
||||
|
||||
### Collapse Event
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
| ------ | -------------- | ------------------------------ |
|
||||
| ------ | -------------- | ------------------------------- |
|
||||
| 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
|
||||
|
||||
|
||||
@ -26,9 +26,12 @@ Vant Weapp 组件通过丰富的 [CSS 变量](https://developer.mozilla.org/zh-C
|
||||
|
||||
```css
|
||||
.van-button--primary {
|
||||
color: var(--button-primary-color,#fff);
|
||||
background: var(--button-primary-background-color,#07c160);
|
||||
border: var(--button-border-width,1px) solid var(--button-primary-border-color,#07c160);
|
||||
color: var(--button-primary-color, #fff);
|
||||
background: var(--button-primary-background-color, #07c160);
|
||||
border: var(--button-border-width, 1px) solid var(
|
||||
--button-primary-border-color,
|
||||
#07c160
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
@ -54,12 +57,20 @@ page {
|
||||
<van-cell-group>
|
||||
<van-field label="评分">
|
||||
<view slot="input" style="width: 100%">
|
||||
<van-rate model:value="{{ rate }}" data-key="rate" bind:change="onChange" />
|
||||
<van-rate
|
||||
model:value="{{ rate }}"
|
||||
data-key="rate"
|
||||
bind:change="onChange"
|
||||
/>
|
||||
</view>
|
||||
</van-field>
|
||||
<van-field label="滑块" border="{{ false }}">
|
||||
<view slot="input" style="width: 100%">
|
||||
<van-slider value="{{ slider }}" data-key="slider" bind:change="onChange" />
|
||||
<van-slider
|
||||
value="{{ slider }}"
|
||||
data-key="slider"
|
||||
bind:change="onChange"
|
||||
/>
|
||||
</view>
|
||||
</van-field>
|
||||
</van-cell-group>
|
||||
@ -85,7 +96,7 @@ Page({
|
||||
sliderActiveBackgroundColor: '#07c160',
|
||||
buttonPrimaryBorderColor: '#07c160',
|
||||
buttonPrimaryBackgroundColor: '#07c160',
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
onChange(event) {
|
||||
@ -93,7 +104,7 @@ Page({
|
||||
this.setData({
|
||||
[key]: event.detail,
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -175,25 +175,25 @@ Page({
|
||||
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------------------- | ------------------------------------------------------------------------------ | -------------------------- | ---------- |
|
||||
| value | 当前选中值 | _string \| number_ | - |
|
||||
| type | 类型，可选值为 `date` `time` `year-month` <br> <strong>不建议动态修改</strong> | _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` <br> <strong>不建议动态修改</strong> | _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
|
||||
|
||||
|
||||
@ -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<boolean>_ | - |
|
||||
| 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<boolean>_ | - |
|
||||
| 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 简体中文，<br>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 简体中文，<br>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 `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<boolean>_ | - |
|
||||
| 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<boolean>_ | - |
|
||||
| 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 简体中文，<br>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 简体中文，<br>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: 触发关闭事件的来源，<br>枚举为`confirm`,`cancel`,`overlay` |
|
||||
| bind:confirm | 点击确认按钮时触发 | - |
|
||||
| bind:cancel | 点击取消按钮时触发 | - |
|
||||
| bind:getuserinfo | 点击确认按钮时，会返回获取到的用户信息，<br>从返回参数的 detail 中获取到的值同 wx.getUserInfo | - |
|
||||
| bind:contact | 客服消息回调 | - |
|
||||
| bind:getphonenumber | 获取用户手机号回调 | - |
|
||||
| bind:error | 当使用开放能力时，发生错误的回调 | - |
|
||||
| bind:opensetting | 在打开授权设置页后回调 | - |
|
||||
| 事件 | 说明 | 回调参数 |
|
||||
| --- | --- | --- |
|
||||
| bind:close | 弹窗关闭时触发 | event.detail: 触发关闭事件的来源，<br>枚举为`confirm`,`cancel`,`overlay` |
|
||||
| bind:confirm | 点击确认按钮时触发 | - |
|
||||
| bind:cancel | 点击取消按钮时触发 | - |
|
||||
| bind:getuserinfo | 点击确认按钮时，会返回获取到的用户信息，<br>从返回参数的 detail 中获取到的值同 wx.getUserInfo | - |
|
||||
| bind:contact | 客服消息回调 | - |
|
||||
| bind:getphonenumber | 获取用户手机号回调 | - |
|
||||
| bind:error | 当使用开放能力时，发生错误的回调 | - |
|
||||
| bind:opensetting | 在打开授权设置页后回调 | - |
|
||||
|
||||
### Slot
|
||||
|
||||
|
||||
@ -51,9 +51,7 @@
|
||||
<van-divider contentPosition="center" borderColor="#1989fa">
|
||||
border 颜色
|
||||
</van-divider>
|
||||
<van-divider contentPosition="center" fontSize="18">
|
||||
字体大小
|
||||
</van-divider>
|
||||
<van-divider contentPosition="center" fontSize="18">字体大小</van-divider>
|
||||
```
|
||||
|
||||
### 自定义样式
|
||||
|
||||
@ -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 数据结构
|
||||
|
||||
|
||||
@ -53,16 +53,14 @@ Empty 组件内置了多种占位图片类型，可以在不同业务场景下
|
||||
|
||||
```html
|
||||
<van-empty description="描述文字">
|
||||
<van-button round type="danger" class="bottom-button">
|
||||
按钮
|
||||
</van-button>
|
||||
<van-button round type="danger" class="bottom-button">按钮</van-button>
|
||||
</van-empty>
|
||||
|
||||
<style>
|
||||
.bottom-button {
|
||||
width: 160px;
|
||||
height: 40px;
|
||||
}
|
||||
.bottom-button {
|
||||
width: 160px;
|
||||
height: 40px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
@ -70,10 +68,10 @@ Empty 组件内置了多种占位图片类型，可以在不同业务场景下
|
||||
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ----------- | --------------------------------------------------------------- | -------- | --------- |
|
||||
| image | 图片类型，可选值为 `error` `network` `search`，支持传入图片 URL | _string_ | `default` |
|
||||
| description | 图片下方的描述文字 | _string_ | - |
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| image | 图片类型，可选值为 `error` `network` `search`，支持传入图片 URL | _string_ | `default` |
|
||||
| description | 图片下方的描述文字 | _string_ | - |
|
||||
|
||||
### Slots
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
}
|
||||
|
||||
@ -213,65 +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 有效，<br>可传入对象,如 { maxHeight: 100, minHeight: 50 }，<br>单位为`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` 表示输入框不为空时展示，<br>`focus` 表示输入框聚焦且不为空时展示 | _string_ | `focus` |
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| 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 有效，<br>可传入对象,如 { maxHeight: 100, minHeight: 50 }，<br>单位为`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` 表示输入框不为空时展示，<br>`focus` 表示输入框聚焦且不为空时展示 | _string_ | `focus` |
|
||||
|
||||
### Events
|
||||
|
||||
| 事件 | 说明 | 回调参数 |
|
||||
| ------------------------- | ---------------------------------------- | -------------------------------------------------------------------------------------------------------- |
|
||||
| bind:input | 输入内容时触发 | event.detail: 当前输入值 |
|
||||
| bind:change | 输入内容时触发 | event.detail: 当前输入值 |
|
||||
| bind:confirm | 点击完成按钮时触发 | event.detail: 当前输入值 |
|
||||
| bind:click-icon | 点击尾部图标时触发 | - |
|
||||
| bind:focus | 输入框聚焦时触发 | event.detail.value: 当前输入值; <br>event.detail.height: 键盘高度 |
|
||||
| bind:blur | 输入框失焦时触发 | event.detail.value: 当前输入值; <br>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: 当前输入值; <br>event.detail.height: 键盘高度 |
|
||||
| bind:blur | 输入框失焦时触发 | event.detail.value: 当前输入值; <br>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
|
||||
|
||||
|
||||
@ -93,53 +93,53 @@ Page({
|
||||
|
||||
### GoodsAction Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ---------------------- | ------------------------------- | --------- | ------ |
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| 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 简体中文，<br>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 简体中文，<br>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 简体中文，<br>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 简体中文，<br>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
|
||||
|
||||
|
||||
@ -43,12 +43,12 @@
|
||||
|
||||
&--horizontal {
|
||||
flex-direction: row;
|
||||
|
||||
|
||||
.van-grid-item__text {
|
||||
margin: 0 0 0 @padding-xs;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&--reverse {
|
||||
flex-direction: column-reverse;
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -80,15 +80,15 @@
|
||||
|
||||
### 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
|
||||
|
||||
|
||||
@ -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` |
|
||||
|
||||
### 图片填充模式
|
||||
|
||||
|
||||
@ -106,11 +106,8 @@ Page({
|
||||
| ---- | -------------------------------- |
|
||||
| - | 锚点位置显示内容，默认为索引字符 |
|
||||
|
||||
|
||||
## 常见问题
|
||||
|
||||
### 嵌套在滚动元素中 IndexAnchor 失效？
|
||||
|
||||
由于 `<IndexBar />` 内部使用 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)
|
||||
由于 `<IndexBar />` 内部使用 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)
|
||||
|
||||
@ -44,13 +44,13 @@
|
||||
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------------------ | ----------------------------- | ------------------ | ---------- |
|
||||
| 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` |
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| 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
|
||||
|
||||
|
||||
@ -10,8 +10,11 @@ export const link = Behavior({
|
||||
methods: {
|
||||
jumpLink(urlKey = 'url') {
|
||||
const url = this.data[urlKey];
|
||||
if (url) {
|
||||
if (this.data.linkType === 'navigateTo' && getCurrentPages().length > 9) {
|
||||
if (url) {
|
||||
if (
|
||||
this.data.linkType === 'navigateTo' &&
|
||||
getCurrentPages().length > 9
|
||||
) {
|
||||
wx.redirectTo({ url });
|
||||
} else {
|
||||
wx[this.data.linkType]({ url });
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -84,23 +84,23 @@ Notify({
|
||||
### 方法
|
||||
|
||||
| 方法名 | 说明 | 参数 | 返回值 |
|
||||
| ------------ | -------- | ------------------- | ----------- |
|
||||
| ------------ | -------- | -------------------- | ----------- |
|
||||
| Notify | 展示提示 | `options \| message` | notify 实例 |
|
||||
| Notify.clear | 关闭提示 | `options` | `void` |
|
||||
|
||||
### Options
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ---------------- | ------------------------------------------------------ | ---------- | ------------ |
|
||||
| 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` |
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| 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` |
|
||||
|
||||
@ -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 `v1.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
|
||||
|
||||
|
||||
@ -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 | 单列选择器的默认选中项索引，<br>多列选择器请参考下方的 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 | 单列选择器的默认选中项索引，<br>多列选择器请参考下方的 Columns 配置 | _number_ | `0` |
|
||||
|
||||
### Events
|
||||
|
||||
Picker 组件的事件会根据 columns 是单列或多列返回不同的参数。
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
| ------- | ------------------ | ------------------------------------------------------------------------------------------------ |
|
||||
| confirm | 点击完成按钮时触发 | 单列：选中值，选中值对应的索引<br>多列：所有列选中值，所有列选中值对应的索引 |
|
||||
| cancel | 点击取消按钮时触发 | 单列：选中值，选中值对应的索引<br>多列：所有列选中值，所有列选中值对应的索引 |
|
||||
| change | 选项改变时触发 | 单列：Picker 实例，选中值，选中值对应的索引<br>多列：Picker 实例，所有列选中值，当前列对应的索引 |
|
||||
| 事件名 | 说明 | 参数 |
|
||||
| --- | --- | --- |
|
||||
| confirm | 点击完成按钮时触发 | 单列：选中值，选中值对应的索引<br>多列：所有列选中值，所有列选中值对应的索引 |
|
||||
| cancel | 点击取消按钮时触发 | 单列：选中值，选中值对应的索引<br>多列：所有列选中值，所有列选中值对应的索引 |
|
||||
| change | 选项改变时触发 | 单列：Picker 实例，选中值，选中值对应的索引<br>多列：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 | - | 设置对应列中所有选项 |
|
||||
|
||||
@ -107,8 +107,7 @@ Page({
|
||||
|
||||
使用组件时，会发现内容部分滚动到底时，继续划动会导致底层页面的滚动，这就是滚动穿透。
|
||||
|
||||
目前，组件可以通过 `lock-scroll` 属性处理部分滚动穿透问题。 **但由于小程序自身原因，弹窗内容区域仍会出现滚动穿透。**
|
||||
不过，我们为开发者提供了一个推荐方案以完整解决滚动穿透：
|
||||
目前，组件可以通过 `lock-scroll` 属性处理部分滚动穿透问题。 **但由于小程序自身原因，弹窗内容区域仍会出现滚动穿透。** 不过，我们为开发者提供了一个推荐方案以完整解决滚动穿透：
|
||||
|
||||
#### [page-meta](https://developers.weixin.qq.com/miniprogram/dev/component/page-meta.html)
|
||||
|
||||
@ -125,22 +124,22 @@ Page({
|
||||
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ---------------------- | ------------------------------------------------ | ------------------ | -------- |
|
||||
| show | 是否显示弹出层 | _boolean_ | `false` |
|
||||
| z-index | z-index 层级 | _number_ | `100` |
|
||||
| overlay | 是否显示遮罩层 | _boolean_ | `true` |
|
||||
| position | 弹出位置，可选值为 `top` `bottom` `right` `left` | _string_ | `center` |
|
||||
| duration | 动画时长，单位为毫秒 | _number \| object_ | `300` |
|
||||
| round | 是否显示圆角 | _boolean_ | `false` |
|
||||
| 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 `v1.7.3` | 是否锁定背景滚动 | _boolean_ | `true` |
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| show | 是否显示弹出层 | _boolean_ | `false` |
|
||||
| z-index | z-index 层级 | _number_ | `100` |
|
||||
| overlay | 是否显示遮罩层 | _boolean_ | `true` |
|
||||
| position | 弹出位置，可选值为 `top` `bottom` `right` `left` | _string_ | `center` |
|
||||
| duration | 动画时长，单位为毫秒 | _number \| object_ | `300` |
|
||||
| round | 是否显示圆角 | _boolean_ | `false` |
|
||||
| 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 `v1.7.3` | 是否锁定背景滚动 | _boolean_ | `true` |
|
||||
|
||||
### Events
|
||||
|
||||
|
||||
@ -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_ | 与进度条颜色一致 |
|
||||
|
||||
### 外部样式类
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -128,22 +128,22 @@ Page({
|
||||
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| -------------- | ----------------------------------------------------------- | ------------------ | --------- |
|
||||
| name | 在表单内提交时的标识符 | _string_ | - |
|
||||
| value | 当前分值 | _number_ | - |
|
||||
| count | 图标总数 | _number_ | `5` |
|
||||
| size | 图标大小，默认单位为 `px` | _string \| number_ | `20px` |
|
||||
| gutter | 图标间距，默认单位为 `px` | _string \| number_ | `4px` |
|
||||
| color | 选中时的颜色 | _string_ | `#ffd21e` |
|
||||
| void-color | 未选中时的颜色 | _string_ | `#c7c7c7` |
|
||||
| icon | 选中时的图标名称或图片链接，可选值见 [Icon 组件](#/icon) | _string_ | `star` |
|
||||
| void-icon | 未选中时的图标名称或图片链接，可选值见 [Icon 组件](#/icon) | _string_ | `star-o` |
|
||||
| allow-half | 是否允许半选 | _boolean_ | `false` |
|
||||
| readonly | 是否为只读状态 | _boolean_ | `false` |
|
||||
| disabled | 是否禁用评分 | _boolean_ | `false` |
|
||||
| disabled-color | 禁用时的颜色 | _string_ | `#bdbdbd` |
|
||||
| touchable | 是否可以通过滑动手势选择评分 | _boolean_ | `true` |
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| name | 在表单内提交时的标识符 | _string_ | - |
|
||||
| value | 当前分值 | _number_ | - |
|
||||
| count | 图标总数 | _number_ | `5` |
|
||||
| size | 图标大小，默认单位为 `px` | _string \| number_ | `20px` |
|
||||
| gutter | 图标间距，默认单位为 `px` | _string \| number_ | `4px` |
|
||||
| color | 选中时的颜色 | _string_ | `#ffd21e` |
|
||||
| void-color | 未选中时的颜色 | _string_ | `#c7c7c7` |
|
||||
| icon | 选中时的图标名称或图片链接，可选值见 [Icon 组件](#/icon) | _string_ | `star` |
|
||||
| void-icon | 未选中时的图标名称或图片链接，可选值见 [Icon 组件](#/icon) | _string_ | `star-o` |
|
||||
| allow-half | 是否允许半选 | _boolean_ | `false` |
|
||||
| readonly | 是否为只读状态 | _boolean_ | `false` |
|
||||
| disabled | 是否禁用评分 | _boolean_ | `false` |
|
||||
| disabled-color | 禁用时的颜色 | _string_ | `#bdbdbd` |
|
||||
| touchable | 是否可以通过滑动手势选择评分 | _boolean_ | `true` |
|
||||
|
||||
### Events
|
||||
|
||||
|
||||
@ -111,31 +111,31 @@ Page({
|
||||
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ---------------------- | ------------------------------------------------------------------------------------------------- | ------------------ | --- |
|
||||
| name | 在表单内提交时的标识符 | _string_ | - |
|
||||
| label | 搜索框左侧文本 | _string_ | - |
|
||||
| shape | 形状，可选值为 `round` | _string_ | `square` |
|
||||
| value | 当前输入的值 | _string \| number_ | - |
|
||||
| background | 搜索框背景色 | _string_ | `#f2f2f2` |
|
||||
| show-action | 是否在搜索框右侧显示取消按钮 | _boolean_ | `false` |
|
||||
| action-text `v1.0.0` | 取消按钮文字 | _string_ | `取消` |
|
||||
| focus | 获取焦点 | _boolean_ | `false` |
|
||||
| error | 是否将输入内容标红 | _boolean_ | `false` |
|
||||
| disabled | 是否禁用输入框 | _boolean_ | `false` |
|
||||
| readonly | 是否只读 | _boolean_ | `false` |
|
||||
| clearable | 是否启用清除控件 | _boolean_ | `true` |
|
||||
| clear-trigger `v1.8.4` | 显示清除图标的时机，`always` 表示输入框不为空时展示，<br>`focus` 表示输入框聚焦且不为空时展示 | _string_ | `focus` |
|
||||
| clear-icon `v1.8.4` | 清除[图标名称](#/icon)或图片链接 | _string_ | `clear` |
|
||||
| maxlength | 最大输入长度，设置为 -1 的时候不限制最大长度 | _number_ | `-1` |
|
||||
| use-action-slot | 是否使用 action slot | _boolean_ | `false` |
|
||||
| placeholder | 输入框为空时占位符 | _string_ | - |
|
||||
| placeholder-style | 指定占位符的样式 | _string_ | - |
|
||||
| input-align | 输入框内容对齐方式，可选值为 `center` `right` | _string_ | `left` |
|
||||
| use-left-icon-slot | 是否使用输入框左侧图标 slot | _boolean_ | `false` |
|
||||
| use-right-icon-slot | 是否使用输入框右侧图标 slot | _boolean_ | `false` |
|
||||
| left-icon | 输入框左侧图标名称或图片链接，可选值见 Icon 组件（如果设置了 use-left-icon-slot，则该属性无效） | _string_ | `search` |
|
||||
| right-icon | 输入框右侧图标名称或图片链接，可选值见 Icon 组件（如果设置了 use-right-icon-slot，则该属性无效） | _string_ | - |
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| name | 在表单内提交时的标识符 | _string_ | - |
|
||||
| label | 搜索框左侧文本 | _string_ | - |
|
||||
| shape | 形状，可选值为 `round` | _string_ | `square` |
|
||||
| value | 当前输入的值 | _string \| number_ | - |
|
||||
| background | 搜索框背景色 | _string_ | `#f2f2f2` |
|
||||
| show-action | 是否在搜索框右侧显示取消按钮 | _boolean_ | `false` |
|
||||
| action-text `v1.0.0` | 取消按钮文字 | _string_ | `取消` |
|
||||
| focus | 获取焦点 | _boolean_ | `false` |
|
||||
| error | 是否将输入内容标红 | _boolean_ | `false` |
|
||||
| disabled | 是否禁用输入框 | _boolean_ | `false` |
|
||||
| readonly | 是否只读 | _boolean_ | `false` |
|
||||
| clearable | 是否启用清除控件 | _boolean_ | `true` |
|
||||
| clear-trigger `v1.8.4` | 显示清除图标的时机，`always` 表示输入框不为空时展示，<br>`focus` 表示输入框聚焦且不为空时展示 | _string_ | `focus` |
|
||||
| clear-icon `v1.8.4` | 清除[图标名称](#/icon)或图片链接 | _string_ | `clear` |
|
||||
| maxlength | 最大输入长度，设置为 -1 的时候不限制最大长度 | _number_ | `-1` |
|
||||
| use-action-slot | 是否使用 action slot | _boolean_ | `false` |
|
||||
| placeholder | 输入框为空时占位符 | _string_ | - |
|
||||
| placeholder-style | 指定占位符的样式 | _string_ | - |
|
||||
| input-align | 输入框内容对齐方式，可选值为 `center` `right` | _string_ | `left` |
|
||||
| use-left-icon-slot | 是否使用输入框左侧图标 slot | _boolean_ | `false` |
|
||||
| use-right-icon-slot | 是否使用输入框右侧图标 slot | _boolean_ | `false` |
|
||||
| left-icon | 输入框左侧图标名称或图片链接，可选值见 Icon 组件（如果设置了 use-left-icon-slot，则该属性无效） | _string_ | `search` |
|
||||
| right-icon | 输入框右侧图标名称或图片链接，可选值见 Icon 组件（如果设置了 use-right-icon-slot，则该属性无效） | _string_ | - |
|
||||
|
||||
### Events
|
||||
|
||||
@ -151,11 +151,11 @@ Page({
|
||||
|
||||
### Slot
|
||||
|
||||
| 名称 | 说明 |
|
||||
| ---------- | ------------------------------------------------------------------- |
|
||||
| action | 自定义搜索框右侧按钮，需要在`use-action-slot`为 true 时才会显示 |
|
||||
| label | 自定义搜索框左侧文本 |
|
||||
| left-icon | 自定义输入框左侧图标，需要在`use-left-icon-slot`为 true 时才会显示 |
|
||||
| 名称 | 说明 |
|
||||
| --- | --- |
|
||||
| action | 自定义搜索框右侧按钮，需要在`use-action-slot`为 true 时才会显示 |
|
||||
| label | 自定义搜索框左侧文本 |
|
||||
| left-icon | 自定义输入框左侧图标，需要在`use-left-icon-slot`为 true 时才会显示 |
|
||||
| right-icon | 自定义输入框右侧图标，需要在`use-right-icon-slot`为 true 时才会显示 |
|
||||
|
||||
### 外部样式类
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -61,14 +61,14 @@ Page({
|
||||
|
||||
### 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` |
|
||||
|
||||
@ -61,9 +61,7 @@ Page({
|
||||
|
||||
```html
|
||||
<van-slider value="{{ currentValue }}" use-button-slot bind:drag="onDrag">
|
||||
<view class="custom-button" slot="button">
|
||||
{{ currentValue }}/100
|
||||
</view>
|
||||
<view class="custom-button" slot="button">{{ currentValue }}/100</view>
|
||||
</van-slider>
|
||||
```
|
||||
|
||||
@ -85,18 +83,18 @@ Page({
|
||||
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --------------- | ---------------------------------------- | -------------------- | --------- |
|
||||
| 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` |
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| 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
|
||||
|
||||
@ -115,8 +113,8 @@ Page({
|
||||
|
||||
### Slots
|
||||
|
||||
| 名称 | 说明 | 参数 |
|
||||
| --------------------- | ----------------------------------- | ------------------- |
|
||||
| button | 自定义滑块按钮 | _{ value: number }_ |
|
||||
| left-button `v1.8.4` | 自定义左侧滑块按钮（双滑块模式下） | _{ value: number }_ |
|
||||
| 名称 | 说明 | 参数 |
|
||||
| --- | --- | --- |
|
||||
| button | 自定义滑块按钮 | _{ value: number }_ |
|
||||
| left-button `v1.8.4` | 自定义左侧滑块按钮（双滑块模式下） | _{ value: number }_ |
|
||||
| right-button `v1.8.4` | 自定义右侧滑块按钮 （双滑块模式下） | _{ value: number }_ |
|
||||
|
||||
@ -117,26 +117,26 @@ Page({
|
||||
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| -------------- | --------------------------------------------------------- | ------------------ | ------- |
|
||||
| name | 在表单内提交时的标识符 | _string_ | - |
|
||||
| value | 输入值 | _string \| number_ | 最小值 |
|
||||
| min | 最小值 | _string \| number_ | `1` |
|
||||
| max | 最大值 | _string \| number_ | - |
|
||||
| step | 步长 | _string \| number_ | `1` |
|
||||
| integer | 是否只允许输入整数 | _boolean_ | `false` |
|
||||
| disabled | 是否禁用 | _boolean_ | `false` |
|
||||
| disable-input | 是否禁用输入框 | _boolean_ | `false` |
|
||||
| async-change | 是否开启异步变更，开启后需要手动控制输入值 | _boolean_ | `false` |
|
||||
| input-width | 输入框宽度，默认单位为 `px` | _string \| number_ | `32px` |
|
||||
| button-size | 按钮大小，默认单位为 `px`，输入框高度会和按钮大小保持一致 | _string \| number_ | `28px` |
|
||||
| show-plus | 是否显示增加按钮 | _boolean_ | `true` |
|
||||
| show-minus | 是否显示减少按钮 | _boolean_ | `true` |
|
||||
| decimal-length | 固定显示的小数位数 | _number_ | - |
|
||||
| theme | 样式风格，可选值为 `round` | _string_ | - |
|
||||
| disable-plus | 是否禁用增加按钮 | _boolean_ | - |
|
||||
| disable-minus | 是否禁用减少按钮 | _boolean_ | - |
|
||||
| long-press | 是否开启长按手势 | _boolean_ | `true` |
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| name | 在表单内提交时的标识符 | _string_ | - |
|
||||
| value | 输入值 | _string \| number_ | 最小值 |
|
||||
| min | 最小值 | _string \| number_ | `1` |
|
||||
| max | 最大值 | _string \| number_ | - |
|
||||
| step | 步长 | _string \| number_ | `1` |
|
||||
| integer | 是否只允许输入整数 | _boolean_ | `false` |
|
||||
| disabled | 是否禁用 | _boolean_ | `false` |
|
||||
| disable-input | 是否禁用输入框 | _boolean_ | `false` |
|
||||
| async-change | 是否开启异步变更，开启后需要手动控制输入值 | _boolean_ | `false` |
|
||||
| input-width | 输入框宽度，默认单位为 `px` | _string \| number_ | `32px` |
|
||||
| button-size | 按钮大小，默认单位为 `px`，输入框高度会和按钮大小保持一致 | _string \| number_ | `28px` |
|
||||
| show-plus | 是否显示增加按钮 | _boolean_ | `true` |
|
||||
| show-minus | 是否显示减少按钮 | _boolean_ | `true` |
|
||||
| decimal-length | 固定显示的小数位数 | _number_ | - |
|
||||
| theme | 样式风格，可选值为 `round` | _string_ | - |
|
||||
| disable-plus | 是否禁用增加按钮 | _boolean_ | - |
|
||||
| disable-minus | 是否禁用减少按钮 | _boolean_ | - |
|
||||
| long-press | 是否开启长按手势 | _boolean_ | `true` |
|
||||
|
||||
### Events
|
||||
|
||||
|
||||
@ -118,14 +118,14 @@ Page({
|
||||
|
||||
### Steps Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| -------------- | ------------------------------------------------ | -------- | ------------ |
|
||||
| active | 当前步骤 | _number_ | 0 |
|
||||
| direction | 显示方向，可选值为 `horizontal` `vertical` | _string_ | `horizontal` |
|
||||
| active-color | 激活状态颜色 | _string_ | `#07c160` |
|
||||
| inactive-color | 未激活状态颜色 | _string_ | `#969799` |
|
||||
| active-icon | 激活状态底部图标，可选值见 [Icon 组件](#/icon) | _string_ | `checked` |
|
||||
| inactive-icon | 未激活状态底部图标，可选值见 [Icon 组件](#/icon) | _string_ | - |
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| active | 当前步骤 | _number_ | 0 |
|
||||
| direction | 显示方向，可选值为 `horizontal` `vertical` | _string_ | `horizontal` |
|
||||
| active-color | 激活状态颜色 | _string_ | `#07c160` |
|
||||
| inactive-color | 未激活状态颜色 | _string_ | `#969799` |
|
||||
| active-icon | 激活状态底部图标，可选值见 [Icon 组件](#/icon) | _string_ | `checked` |
|
||||
| inactive-icon | 未激活状态底部图标，可选值见 [Icon 组件](#/icon) | _string_ | - |
|
||||
|
||||
### Events
|
||||
|
||||
|
||||
@ -45,9 +45,7 @@ Sticky 组件与 CSS 中`position: sticky`属性实现的效果一致，当组
|
||||
```html
|
||||
<view id="container" style="height: 150px;">
|
||||
<van-sticky container="{{ container }}">
|
||||
<van-button type="warning">
|
||||
指定容器
|
||||
</van-button>
|
||||
<van-button type="warning">指定容器</van-button>
|
||||
</van-sticky>
|
||||
</view>
|
||||
```
|
||||
@ -79,9 +77,7 @@ Page({
|
||||
>
|
||||
<view style="height: 400px; padding-top: 50px;">
|
||||
<van-sticky scroll-top="{{ scrollTop }}" offset-top="{{ offsetTop }}">
|
||||
<van-button type="warning">
|
||||
嵌套在 scroll-view 内
|
||||
</van-button>
|
||||
<van-button type="warning">嵌套在 scroll-view 内</van-button>
|
||||
</van-sticky>
|
||||
</view>
|
||||
</scroll-view>
|
||||
@ -112,12 +108,12 @@ Page({
|
||||
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ---------- | ------------------------------------------------------------ | ---------- | ------ |
|
||||
| offset-top | 吸顶时与顶部的距离，单位`px` | _number_ | `0` |
|
||||
| z-index | 吸顶时的 z-index | _number_ | `99` |
|
||||
| container | 一个函数，返回容器对应的 NodesRef 节点 | _function_ | - |
|
||||
| scroll-top | 当前滚动区域的滚动位置，非 `null` 时会禁用页面滚动事件的监听 | _number_ | - |
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| offset-top | 吸顶时与顶部的距离，单位`px` | _number_ | `0` |
|
||||
| z-index | 吸顶时的 z-index | _number_ | `99` |
|
||||
| container | 一个函数，返回容器对应的 NodesRef 节点 | _function_ | - |
|
||||
| scroll-top | 当前滚动区域的滚动位置，非 `null` 时会禁用页面滚动事件的监听 | _number_ | - |
|
||||
|
||||
### Events
|
||||
|
||||
|
||||
@ -74,20 +74,20 @@
|
||||
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ---------------------- | ------------------------------------------------ | ------------------- | -------- |
|
||||
| price | 价格（单位分） | _number_ | - |
|
||||
| label | 价格文案 | _string_ | `合计：` |
|
||||
| suffix-label | 价格右侧文案 | _string_ | - |
|
||||
| button-text | 按钮文字 | _string_ | - |
|
||||
| button-type | 按钮类型 | _string_ | `danger` |
|
||||
| tip | 提示文案 | _string \| boolean_ | - |
|
||||
| tip-icon | 图标名称或图片链接，可选值见 [Icon 组件](#/icon) | _string_ | - |
|
||||
| disabled | 是否禁用按钮 | _boolean_ | `false` |
|
||||
| loading | 是否显示加载中的按钮 | _boolean_ | `false` |
|
||||
| currency | 货币符号 | _string_ | `¥` |
|
||||
| safe-area-inset-bottom | 是否为 iPhoneX 留出底部安全距离 | _boolean_ | `true` |
|
||||
| decimal-length | 价格小数点后位数 | _number_ | `2` |
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| price | 价格（单位分） | _number_ | - |
|
||||
| label | 价格文案 | _string_ | `合计：` |
|
||||
| suffix-label | 价格右侧文案 | _string_ | - |
|
||||
| button-text | 按钮文字 | _string_ | - |
|
||||
| button-type | 按钮类型 | _string_ | `danger` |
|
||||
| tip | 提示文案 | _string \| boolean_ | - |
|
||||
| tip-icon | 图标名称或图片链接，可选值见 [Icon 组件](#/icon) | _string_ | - |
|
||||
| disabled | 是否禁用按钮 | _boolean_ | `false` |
|
||||
| loading | 是否显示加载中的按钮 | _boolean_ | `false` |
|
||||
| currency | 货币符号 | _string_ | `¥` |
|
||||
| safe-area-inset-bottom | 是否为 iPhoneX 留出底部安全距离 | _boolean_ | `true` |
|
||||
| decimal-length | 价格小数点后位数 | _number_ | `2` |
|
||||
|
||||
### Events
|
||||
|
||||
|
||||
@ -113,13 +113,13 @@ Page({
|
||||
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ----------------- | --------------------------------------- | ------------------ | ------- |
|
||||
| name | 标识符，可以在 close 事件的参数中获取到 | _string \| number_ | - |
|
||||
| left-width | 左侧滑动区域宽度 | _number_ | `0` |
|
||||
| right-width | 右侧滑动区域宽度 | _number_ | `0` |
|
||||
| async-close | 是否异步关闭 | _boolean_ | `false` |
|
||||
| disabled `v1.3.4` | 是否禁用滑动 | _boolean_ | `false` |
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| name | 标识符，可以在 close 事件的参数中获取到 | _string \| number_ | - |
|
||||
| left-width | 左侧滑动区域宽度 | _number_ | `0` |
|
||||
| right-width | 右侧滑动区域宽度 | _number_ | `0` |
|
||||
| async-close | 是否异步关闭 | _boolean_ | `false` |
|
||||
| disabled `v1.3.4` | 是否禁用滑动 | _boolean_ | `false` |
|
||||
|
||||
### Slot
|
||||
|
||||
@ -131,11 +131,11 @@ Page({
|
||||
|
||||
### Events
|
||||
|
||||
| 事件名 | 说明 | 参数 |
|
||||
| ------ | ---------- | --------------------------------------------------------- |
|
||||
| click | 点击时触发 | 关闭时的点击位置 (`left` `right` `cell` `outside`) |
|
||||
| close | 关闭时触发 | { position: 'left' \| 'right' , instance , name: string } |
|
||||
| open | 打开时触发 | { position: 'left' \| 'right' , name: string } |
|
||||
| 事件名 | 说明 | 参数 |
|
||||
| --- | --- | --- |
|
||||
| click | 点击时触发 | 关闭时的点击位置 (`left` `right` `cell` `outside`) |
|
||||
| close | 关闭时触发 | { position: 'left' \| 'right' , instance , name: string } |
|
||||
| open | 打开时触发 | { position: 'left' \| 'right' , name: string } |
|
||||
|
||||
### close 参数
|
||||
|
||||
|
||||
@ -189,25 +189,25 @@ Page({
|
||||
|
||||
### 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
|
||||
|
||||
@ -235,12 +235,12 @@ Page({
|
||||
|
||||
### 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: 是否吸顶 } |
|
||||
|
||||
### 外部样式类
|
||||
|
||||
@ -255,9 +255,9 @@ Page({
|
||||
|
||||
通过 selectComponent 可以获取到 Tabs 实例并调用实例方法。
|
||||
|
||||
| 方法名 | 参数 | 返回值 | 介绍 |
|
||||
| ------ | ---- | ------ | ---------------------------------------------------------- |
|
||||
| resize | - | - | 外层元素大小或组件显示状态变化时，可以调用此方法来触发重绘 |
|
||||
| 方法名 | 参数 | 返回值 | 介绍 |
|
||||
| --- | --- | --- | --- |
|
||||
| resize | - | - | 外层元素大小或组件显示状态变化时，可以调用此方法来触发重绘 |
|
||||
|
||||
## 常见问题
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -21,9 +21,7 @@
|
||||
将元素包裹在 transition 组件内，在元素展示/隐藏时，会有相应的过渡动画。
|
||||
|
||||
```html
|
||||
<van-transition show="{{ show }}" custom-class="block">
|
||||
内容
|
||||
</van-transition>
|
||||
<van-transition show="{{ show }}" custom-class="block">内容</van-transition>
|
||||
```
|
||||
|
||||
### 动画类型
|
||||
@ -87,15 +85,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 被删除)，在过渡/动画完成之后移除。 |
|
||||
|
||||
### 动画类型
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -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`: 删除图片的序号值 |
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user