## GoodsAction 商品导航 ### 使用指南 在 app.json 或 index.json 中引入组件 ```json "usingComponents": { "van-goods-action": "path/to/vant-weapp/dist/goods-action/index", "van-goods-action-icon": "path/to/vant-weapp/dist/goods-action-icon/index", "van-goods-action-button": "path/to/vant-weapp/dist/goods-action-button/index" } ``` ### 代码演示 #### 基础用法 ```html ``` ```javascript Page({ onClickIcon() { Toast('点击图标'); }, onClickButton() { Toast('点击按钮'); } }); ``` #### 图标提示 通过`info`属性在图标右上角增加相应的提示 ```html ``` ### GoodsAction API | 参数 | 说明 | 类型 | 默认值 | |-----------|-----------|-----------|-------------| | safe-area-inset-bottom | 是否适配iPhoneX | `Boolean` | `true` | ### GoodsActionIcon API | 参数 | 说明 | 类型 | 默认值 | |-----------|-----------|-----------|-------------| | text | 按钮文字 | `String` | - | | icon | 图标类型,可选值见`icon`组件 | `String` | - | | info | 图标右上角提示信息 | `String | Number` | - | | url | 跳转链接 | `String` | - | | link-type | 链接跳转类型,可选值为 `redirectTo` `switchTab` `reLaunch` | `String` | `navigateTo` | | id | 标识符 | `String` | - | | type | 按钮类型,可选值为 `primary` `warning` `danger` | `String` | `default` | | disabled | 是否禁用按钮 | `Boolean` | `false` | | loading | 是否显示为加载状态 | `Boolean` | `false` | | open-type | 微信开放能力,具体支持可参考 [微信官方文档](https://mp.weixin.qq.com/debug/wxadoc/dev/component/button.html) | `String` | - | | app-parameter | 打开 APP 时,向 APP 传递的参数 | `String` | - | | lang | 指定返回用户信息的语言,zh_CN 简体中文,
zh_TW 繁体中文,en 英文 | `String` | `en` | | session-from | 会话来源 | `String` | - | | send-message-title | 会话内消息卡片标题 | `String` | 当前标题 | | send-message-path | 会话内消息卡片点击跳转小程序路径 | `String` | 当前分享路径 | | send-message-img | sendMessageImg | `String` | 截图 | | show-message-card | 显示会话内消息卡片 | `String` | `false` | ### GoodsActionButton API | 参数 | 说明 | 类型 | 默认值 | |-----------|-----------|-----------|-------------| | text | 按钮文字 | `String` | - | | url | 跳转链接 | `String` | - | | link-type | 链接跳转类型,可选值为 `redirectTo` `switchTab` `reLaunch` | `String` | `navigateTo` | | id | 标识符 | `String` | - | | type | 按钮类型,可选值为 `primary` `warning` `danger` | `String` | `default` | | size | 按钮尺寸,可选值为 `normal` `large` `small` `mini` | `String` | `normal` | | disabled | 是否禁用按钮 | `Boolean` | `false` | | loading | 是否显示为加载状态 | `Boolean` | `false` | | open-type | 微信开放能力,具体支持可参考 [微信官方文档](https://mp.weixin.qq.com/debug/wxadoc/dev/component/button.html) | `String` | - | | app-parameter | 打开 APP 时,向 APP 传递的参数 | `String` | - | | lang | 指定返回用户信息的语言,zh_CN 简体中文,
zh_TW 繁体中文,en 英文 | `String` | `en` | | session-from | 会话来源 | `String` | - | | send-message-title | 会话内消息卡片标题 | `String` | 当前标题 | | send-message-path | 会话内消息卡片点击跳转小程序路径 | `String` | 当前分享路径 | | send-message-img | sendMessageImg | `String` | 截图 | | show-message-card | 显示会话内消息卡片 | `String` | `false` | ### Event | 事件名 | 说明 | 参数 | |-----------|-----------|-----------| | click | 按钮点击事件回调 | - | ### GoodsActionIcon 外部样式类 | 类名 | 说明 | |-----------|-----------| | icon-class | 图标样式类 | | text-class | 文字样式类 | ### GoodsActionButton 外部样式类 | 类名 | 说明 | |-----------|-----------| | custom-class | 根节点样式类 | ### 更新日志 | 版本 | 类型 | 内容 | |-----------|-----------|-----------| | 0.4.0 | feature | 新增组件 |