diff --git a/docs/src/Preview.vue b/docs/src/Preview.vue index 582d8e7f..ca042309 100644 --- a/docs/src/Preview.vue +++ b/docs/src/Preview.vue @@ -15,18 +15,19 @@ const PREFIX = 'https://img.yzcdn.cn/vant-weapp/'; const MAP = { index: 'index-201808121630.png', 'action-sheet': 'action-sheet-201809071648.png', - area: 'area-201809271357.png', + area: 'area-20181015.png', badge: 'badge-201808092138.png', - button: 'button-201808092138.png', + button: 'button-20181015.png', card: 'card-201808092138.png', col: 'layout-201808092138.png', cell: 'cell-201808092138.png', dialog: 'dialog-201809071648.png', field: 'field-201808092138.png', + 'goods-action': 'goods-action-20181015.png', icon: 'icon-201808092138.png', loading: 'loading-201808092138.png', 'nav-bar': 'nav-bar-201808110751.png', - 'notice-bar': 'notice-bar-201808092138.png', + 'notice-bar': 'notice-bar-20181015.png', notify: 'notify-201808112050.png', panel: 'panel-201808092138.png', popup: 'popup-201808092138.png', @@ -35,11 +36,11 @@ const MAP = { slider: 'slider-201808221024.png', stepper: 'stepper-201808092138.png', search: 'search-201808092138.png', - steps: 'steps-201808092138.png', + steps: 'steps-20181015.png', switch: 'switch-201808092138.png', 'switch-cell': 'switch-cell-201808221124.png', 'submit-bar': 'submit-bar-a-201809271357.png', - tab: 'tab-201809051457.png', + tab: 'tab-20181015.png', tag: 'tag-201808092138.png', tabbar: 'tabbar-201808160922.png', toast: 'toast-201808191046.png', diff --git a/example/pages/goods-action/index.js b/example/pages/goods-action/index.js index 217c2b67..dd9a1357 100644 --- a/example/pages/goods-action/index.js +++ b/example/pages/goods-action/index.js @@ -2,74 +2,11 @@ import Page from '../../common/page'; import Toast from '../../dist/toast/toast'; Page({ - data: { - btnList: [ - { - type: 'mini', - icon: 'chat', - text: '客服', - bindClickEventName: 'onClickChatBtn' - }, - { - type: 'mini', - icon: 'cart', - text: '购物车' - }, - { - type: 'big', - text: '加入购物车' - }, - { - type: 'big', - text: '立即购买', - primary: true, - bindClickEventName: 'onClickBuyBtn' - } - ], - btnListInfo: [ - { - type: 'mini', - icon: 'chat', - text: '客服', - url: '/pages/submit-bar/index', - replace: true, - info: 15 - }, - { - type: 'mini', - icon: 'cart', - text: '购物车', - info: '5' - }, - { - type: 'mini', - icon: 'shop', - text: '店铺' - }, - { - type: 'big', - text: '加入购物车' - }, - { - type: 'big', - text: '立即购买', - primary: true, - url: '/pages/submit-bar/index', - replace: false - } - ] - }, - - onClick(event) { - const { bindClickEventName } = event.detail; - this[`${bindClickEventName}`](); - }, - - onClickChatBtn() { + onClickIcon() { Toast('点击图标'); }, - onClickBuyBtn() { + onClickButton() { Toast('点击按钮'); } }); diff --git a/example/pages/goods-action/index.json b/example/pages/goods-action/index.json index 2654ffe3..cbfec5fc 100644 --- a/example/pages/goods-action/index.json +++ b/example/pages/goods-action/index.json @@ -3,8 +3,8 @@ "usingComponents": { "demo-block": "../../components/demo-block/index", "van-goods-action": "../../dist/goods-action/index", - "van-goods-action-big-btn": "../../dist/goods-action-big-btn/index", - "van-goods-action-mini-btn": "../../dist/goods-action-mini-btn/index", + "van-goods-action-icon": "../../dist/goods-action-icon/index", + "van-goods-action-button": "../../dist/goods-action-button/index", "van-submit-bar": "../../dist/submit-bar/index", "van-toast": "../../dist/toast/index" } diff --git a/example/pages/goods-action/index.wxml b/example/pages/goods-action/index.wxml index 00b2c0ed..ab31dfb8 100644 --- a/example/pages/goods-action/index.wxml +++ b/example/pages/goods-action/index.wxml @@ -1,11 +1,35 @@ - + + + + + + - + + + + + + + - - diff --git a/example/pages/goods-action/index.wxss b/example/pages/goods-action/index.wxss index b8a12f0d..0ff15223 100644 --- a/example/pages/goods-action/index.wxss +++ b/example/pages/goods-action/index.wxss @@ -1,7 +1,3 @@ -.van-goods-action { +.goods-action { position: relative !important; } - -.icon-color { - color: #06bf04!important; -} diff --git a/packages/cell/index.ts b/packages/cell/index.ts index 2dd8ca41..46a0a92c 100644 --- a/packages/cell/index.ts +++ b/packages/cell/index.ts @@ -42,5 +42,12 @@ VantComponent({ const { titleWidth } = this.data; return titleWidth ? `max-width: ${titleWidth};min-width: ${titleWidth}` : ''; } + }, + + methods: { + onClick(event: Weapp.Event) { + this.$emit('click', event.detail); + this.jumpLink(); + } } }); diff --git a/packages/common/component.ts b/packages/common/component.ts index 8885f72b..5d9d9b69 100644 --- a/packages/common/component.ts +++ b/packages/common/component.ts @@ -21,7 +21,7 @@ function VantComponent( Methods, Computed, CombinedComponentInstance - > + > = {} ): void { const options: any = {}; diff --git a/packages/goods-action-big-btn/index.less b/packages/goods-action-big-btn/index.less deleted file mode 100644 index 8b137891..00000000 --- a/packages/goods-action-big-btn/index.less +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/goods-action-big-btn/index.ts b/packages/goods-action-big-btn/index.ts deleted file mode 100644 index b8cb3da9..00000000 --- a/packages/goods-action-big-btn/index.ts +++ /dev/null @@ -1,24 +0,0 @@ -import { VantComponent } from '../common/component'; - -VantComponent({ - props: { - url: String, - text: String, - bindClickEventName: String, - primary: { - type: Boolean, - value: false - }, - replace: { - type: Boolean, - value: false - } - }, - - methods: { - onClick(event: Weapp.Event) { - const { bindClickEventName } = this.data; - this.$emit('click', {...event.detail, bindClickEventName}); - } - } -}); diff --git a/packages/goods-action-big-btn/index.wxml b/packages/goods-action-big-btn/index.wxml deleted file mode 100644 index 19a99a20..00000000 --- a/packages/goods-action-big-btn/index.wxml +++ /dev/null @@ -1,20 +0,0 @@ - - - - - - - - - - - diff --git a/packages/goods-action-big-btn/index.json b/packages/goods-action-button/index.json similarity index 100% rename from packages/goods-action-big-btn/index.json rename to packages/goods-action-button/index.json diff --git a/packages/goods-action-button/index.less b/packages/goods-action-button/index.less new file mode 100644 index 00000000..5f81e6c6 --- /dev/null +++ b/packages/goods-action-button/index.less @@ -0,0 +1,3 @@ +:host { + flex: 1; +} diff --git a/packages/goods-action-button/index.ts b/packages/goods-action-button/index.ts new file mode 100644 index 00000000..255f7925 --- /dev/null +++ b/packages/goods-action-button/index.ts @@ -0,0 +1,21 @@ +import { link } from '../mixins/link'; +import { VantComponent } from '../common/component'; + +VantComponent({ + mixins: [link], + + props: { + text: String, + type: { + type: String, + value: 'danger' + } + }, + + methods: { + onClick(event: Weapp.Event) { + this.$emit('click', event.detail); + this.jumpLink(); + } + } +}); diff --git a/packages/goods-action-button/index.wxml b/packages/goods-action-button/index.wxml new file mode 100644 index 00000000..1dcf10f4 --- /dev/null +++ b/packages/goods-action-button/index.wxml @@ -0,0 +1,8 @@ + + {{ text }} + diff --git a/packages/goods-action-icon/index.json b/packages/goods-action-icon/index.json new file mode 100644 index 00000000..93bfe8ab --- /dev/null +++ b/packages/goods-action-icon/index.json @@ -0,0 +1,7 @@ +{ + "component": true, + "usingComponents": { + "van-icon": "../icon/index", + "van-button": "../button/index" + } +} diff --git a/packages/goods-action-icon/index.less b/packages/goods-action-icon/index.less new file mode 100644 index 00000000..92cc3494 --- /dev/null +++ b/packages/goods-action-icon/index.less @@ -0,0 +1,20 @@ +@import '../common/style/var.less'; + +.van-goods-action-icon { + width: 50px !important; + border: none !important; + + &__content { + height: 100%; + display: flex; + line-height: 1; + font-size: 10px; + color: @gray-darker; + flex-direction: column; + justify-content: center; + } + + &__icon { + margin-bottom: 5px; + } +} diff --git a/packages/goods-action-icon/index.ts b/packages/goods-action-icon/index.ts new file mode 100644 index 00000000..41a5de74 --- /dev/null +++ b/packages/goods-action-icon/index.ts @@ -0,0 +1,19 @@ +import { link } from '../mixins/link'; +import { VantComponent } from '../common/component'; + +VantComponent({ + mixins: [link], + + props: { + text: String, + info: String, + icon: String + }, + + methods: { + onClick(event: Weapp.Event) { + this.$emit('click', event.detail); + this.jumpLink(); + } + } +}); diff --git a/packages/goods-action-icon/index.wxml b/packages/goods-action-icon/index.wxml new file mode 100644 index 00000000..647b287c --- /dev/null +++ b/packages/goods-action-icon/index.wxml @@ -0,0 +1,15 @@ + + + + {{ text }} + + diff --git a/packages/goods-action-mini-btn/index.json b/packages/goods-action-mini-btn/index.json deleted file mode 100644 index 0a336c08..00000000 --- a/packages/goods-action-mini-btn/index.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "component": true, - "usingComponents": { - "van-icon": "../icon/index" - } -} diff --git a/packages/goods-action-mini-btn/index.less b/packages/goods-action-mini-btn/index.less deleted file mode 100644 index 029a534a..00000000 --- a/packages/goods-action-mini-btn/index.less +++ /dev/null @@ -1,19 +0,0 @@ -@import '../common/style/var.less'; - -.van-goods-action-mini-btn { - color: @gray-darker; - display: flex; - height: 50px; - font-size: 10px; - line-height: 1; - text-align: center; - background-color: @white; - flex-direction: column; - justify-content: center; -} - -.van-goods-action-mini-btn__icon { - width: 1em; - font-size: 20px; - margin: 0 auto 5px; -} diff --git a/packages/goods-action-mini-btn/index.ts b/packages/goods-action-mini-btn/index.ts deleted file mode 100644 index 1f28db8b..00000000 --- a/packages/goods-action-mini-btn/index.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { VantComponent } from '../common/component'; - -VantComponent({ - classes: [ - 'icon-class' - ], - - props: { - url: String, - text: String, - info: String, - icon: String, - bindClickEventName: String, - replace: { - type: Boolean, - value: false - } - }, - - methods: { - onClick(event: Weapp.Event) { - const { bindClickEventName } = this.data; - this.$emit('click', {...event.detail, bindClickEventName}); - } - } -}); diff --git a/packages/goods-action-mini-btn/index.wxml b/packages/goods-action-mini-btn/index.wxml deleted file mode 100644 index a089ab2b..00000000 --- a/packages/goods-action-mini-btn/index.wxml +++ /dev/null @@ -1,18 +0,0 @@ - - - - - - - - - diff --git a/packages/goods-action/README.md b/packages/goods-action/README.md index 5f536bcb..918aa1d3 100644 --- a/packages/goods-action/README.md +++ b/packages/goods-action/README.md @@ -4,7 +4,9 @@ 在 index.json 中引入组件 ```json "usingComponents": { - "van-goods-action": "path/to/vant-weapp/dist/goods-action/index" + "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" } ``` @@ -13,76 +15,73 @@ #### 基础用法 ```html - + + + + + + ``` ```javascript Page({ - data: { - btnList: [ - { - type: 'mini', - icon: 'chat', - text: '客服', - bindClickEventName: 'onClickChatBtn' - }, - { - type: 'mini', - icon: 'cart', - text: '购物车', - info: 5, - url: '/pages/submit-bar/index', - replace: true - }, - { - type: 'big', - text: '加入购物车', - bindClickEventName: 'onClickBuyBtn' - }, - { - type: 'big', - text: '立即购买', - primary: true, - url: '/pages/submit-bar/index', - replace: false - } - ] + onClickIcon() { + Toast('点击图标'); }, - onClick(event) { - const { bindClickEventName } = event.detail; - this[`${bindClickEventName}`](); - }, - - onClickChatBtn() { - console.log('点击图标'); - }, - - onClickBuyBtn() { - console.log('点击按钮'); + onClickButton() { + Toast('点击按钮'); } }); -```` +``` -### API +#### 图标提示 + +通过`info`属性在图标右上角增加相应的提示 + +```html + + + + + + + +``` + +### GoodsActionIcon API | 参数 | 说明 | 类型 | 默认值 | |-----------|-----------|-----------|-------------| -| btn-list | 按钮列表 | `Array` | - | - -#### btn-list -| 参数 | 说明 | 类型 | 默认值 | -|-----------|-----------|-----------|-------------| -| type | 按钮类型，可选值为 `mini` `big` | `String` | - | | text | 按钮文字 | `String` | - | -| icon | 图标 | `String` | - | +| icon | 图标类型，可选值见`icon`组件 | `String` | - | | info | 图标右上角提示信息 | `String | Number` | - | | url | 跳转链接 | `String` | - | -| replace | 跳转时是否替换当前 history | `String` | `false` | -| primary | 是否主行动按钮，主行动按钮默认为红色 | `Boolean` | `false` | +| link-type | 链接跳转类型，可选值为 `redirectTo` `switchTab` `reLaunch` | `String` | `navigateTo` | + +### GoodsActionButton API + +| 参数 | 说明 | 类型 | 默认值 | +|-----------|-----------|-----------|-------------| +| text | 按钮文字 | `String` | - | +| type | 按钮类型 | `String` | `danger` | +| url | 跳转链接 | `String` | - | +| link-type | 链接跳转类型，可选值为 `redirectTo` `switchTab` `reLaunch` | `String` | `navigateTo` | ### Event @@ -90,14 +89,8 @@ Page({ |-----------|-----------|-----------| | click | 按钮点击事件回调 | - | -### 外部样式类 - -| 类名 | 说明 | -|-----------|-----------| -| icon-class | icon按钮样式类 | - ### 更新日志 | 版本 | 类型 | 内容 | |-----------|-----------|-----------| -| 0.3.6 | feature | 新增组件 | +| 0.3.9 | feature | 新增组件 | diff --git a/packages/goods-action/index.json b/packages/goods-action/index.json index 3a32fb91..467ce294 100644 --- a/packages/goods-action/index.json +++ b/packages/goods-action/index.json @@ -1,7 +1,3 @@ { - "component": true, - "usingComponents": { - "van-goods-action-mini-btn": "../goods-action-mini-btn/index", - "van-goods-action-big-btn": "../goods-action-big-btn/index" - } + "component": true } diff --git a/packages/goods-action/index.less b/packages/goods-action/index.less index 868c7072..f9bfb4e7 100644 --- a/packages/goods-action/index.less +++ b/packages/goods-action/index.less @@ -7,24 +7,3 @@ display: flex; position: fixed; } - -.van-goods-action-big-btn { - flex: 1; - padding: 0; -} - -.van-goods-action-mini-btn { - min-width: 15%; -} - -.van-goods-action-mini-btn::after { - border-width: 1px 0 0 1px; -} - -.van-goods-action-mini-btn:first-child::after { - border-left-width: 0; -} - -.van-goods-action-mini-btn:active { - background-color: @active-color; -} diff --git a/packages/goods-action/index.ts b/packages/goods-action/index.ts index 6e5f2831..5d0c1360 100644 --- a/packages/goods-action/index.ts +++ b/packages/goods-action/index.ts @@ -1,20 +1,3 @@ import { VantComponent } from '../common/component'; -VantComponent({ - classes: [ - 'icon-class' - ], - - props: { - btnList: Array - }, - - methods: { - onClick(event: Weapp.Event) { - const { bindClickEventName } = event.detail; - if (bindClickEventName) { - this.$emit('click', event.detail); - } - } - } -}); +VantComponent(); diff --git a/packages/goods-action/index.wxml b/packages/goods-action/index.wxml index 34f86aed..831d1685 100644 --- a/packages/goods-action/index.wxml +++ b/packages/goods-action/index.wxml @@ -1,27 +1,3 @@ - - - - - - + +