From 7a878dd0e2ead396711ea4df307bc865a81216c8 Mon Sep 17 00:00:00 2001 From: rex Date: Wed, 19 Sep 2018 15:45:39 +0800 Subject: [PATCH] =?UTF-8?q?feat(SubmitBar):=20=E5=A2=9E=E5=8A=A0submit-bar?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=20@zhongnan=20(#597)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/src/Preview.vue | 3 +- example/app.json | 3 +- example/config.js | 4 ++ example/pages/submit-bar/index.js | 11 ++++ example/pages/submit-bar/index.json | 9 +++ example/pages/submit-bar/index.wxml | 47 ++++++++++++++ example/pages/submit-bar/index.wxss | 11 ++++ packages/submit-bar/README.md | 98 +++++++++++++++++++++++++++++ packages/submit-bar/index.js | 45 +++++++++++++ packages/submit-bar/index.json | 6 ++ packages/submit-bar/index.pcss | 52 +++++++++++++++ packages/submit-bar/index.wxml | 29 +++++++++ 12 files changed, 316 insertions(+), 2 deletions(-) create mode 100644 example/pages/submit-bar/index.js create mode 100644 example/pages/submit-bar/index.json create mode 100644 example/pages/submit-bar/index.wxml create mode 100644 example/pages/submit-bar/index.wxss create mode 100644 packages/submit-bar/README.md create mode 100644 packages/submit-bar/index.js create mode 100644 packages/submit-bar/index.json create mode 100644 packages/submit-bar/index.pcss create mode 100644 packages/submit-bar/index.wxml diff --git a/docs/src/Preview.vue b/docs/src/Preview.vue index a3fd5df9..194d7929 100644 --- a/docs/src/Preview.vue +++ b/docs/src/Preview.vue @@ -42,7 +42,8 @@ const MAP = { tabbar: 'tabbar-201808160922.png', toast: 'toast-201808191046.png', transition: 'transition-20180821.png', - 'tree-select': 'tree-select-201808092138.png' + 'tree-select': 'tree-select-201808092138.png', + 'submit-bar': 'submit-bar-20180919.jpeg' }; export default { diff --git a/example/app.json b/example/app.json index f4f59f7c..bbf00167 100644 --- a/example/app.json +++ b/example/app.json @@ -29,7 +29,8 @@ "pages/toast/index", "pages/transition/index", "pages/tree-select/index", - "pages/area/index" + "pages/area/index", + "pages/submit-bar/index" ], "window": { "navigationBarBackgroundColor": "#f8f8f8", diff --git a/example/config.js b/example/config.js index a92e0565..93472137 100644 --- a/example/config.js +++ b/example/config.js @@ -137,6 +137,10 @@ export default [ { path: '/card', title: 'Card 卡片' + }, + { + path: '/submit-bar', + title: 'SubmitBar 提交订单栏' } ] } diff --git a/example/pages/submit-bar/index.js b/example/pages/submit-bar/index.js new file mode 100644 index 00000000..840f498c --- /dev/null +++ b/example/pages/submit-bar/index.js @@ -0,0 +1,11 @@ +import Page from '../../common/page'; +import Toast from '../../dist/toast/toast'; + +Page({ + onClickButton() { + Toast('点击按钮'); + }, + onClickLink() { + Toast('修改地址'); + } +}); diff --git a/example/pages/submit-bar/index.json b/example/pages/submit-bar/index.json new file mode 100644 index 00000000..90acc59c --- /dev/null +++ b/example/pages/submit-bar/index.json @@ -0,0 +1,9 @@ +{ + "navigationBarTitleText": "Steps 步骤条", + "usingComponents": { + "demo-block": "../../components/demo-block/index", + "van-submit-bar": "../../dist/submit-bar/index", + "van-tag": "../../dist/tag/index", + "van-toast": "../../dist/toast/index" + } +} diff --git a/example/pages/submit-bar/index.wxml b/example/pages/submit-bar/index.wxml new file mode 100644 index 00000000..af7a7d3f --- /dev/null +++ b/example/pages/submit-bar/index.wxml @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + + 标签 + + 您的收货地址不支持同城送 + 修改地址 + + + + + diff --git a/example/pages/submit-bar/index.wxss b/example/pages/submit-bar/index.wxss new file mode 100644 index 00000000..f2ee97bd --- /dev/null +++ b/example/pages/submit-bar/index.wxss @@ -0,0 +1,11 @@ +.van-submit-bar { + position: relative !important; +} + +.van-edit-address { + color: #38f; +} + +.van-tag { + margin-left: 15px; +} diff --git a/packages/submit-bar/README.md b/packages/submit-bar/README.md new file mode 100644 index 00000000..91818582 --- /dev/null +++ b/packages/submit-bar/README.md @@ -0,0 +1,98 @@ +## SubmitBar 提交订单栏 + +### 使用指南 +在 index.json 中引入组件 +```json +"usingComponents": { + "van-submit-bar": "path/to/vant-weapp/dist/submit-bar/index" +} +``` + +### 代码演示 + +#### 基础用法 + +```html + +``` + +#### 禁用状态 +禁用状态下不会触发`submit`事件 + +```html + +``` + +#### 加载状态 +加载状态下不会触发`submit`事件 + +```html + +``` + +#### 高级用法 +通过插槽插入自定义内容 + +```html + + 标签 + + 您的收货地址不支持同城送, 修改地址 + + +``` + +### API + +| 参数 | 说明 | 类型 | 默认值 | +|-----------|-----------|-----------|-------------| +| price | 价格（单位分） | `Number` | - | +| label | 价格文案 | `String` | `合计：` | +| button-text | 按钮文字 | `String` | - | +| button-type | 按钮类型 | `String` | `danger` | +| tip | 提示文案 | `String` / `Boolean` | - | +| disabled | 是否禁用按钮 | `Boolean` | `false` | +| loading | 是否显示加载中的按钮 | `Boolean` | `false` | +| currency | 货币符号 | `String` | `¥` | + +### Event + +| 事件名 | 说明 | 参数 | +|-----------|-----------|-----------| +| submit | 按钮点击事件回调 | - | + +### Slot + +| 名称 | 说明 | +|-----------|-----------| +| - | 自定义订单栏左侧内容 | +| top | 自定义订单栏上方内容 | +| tip | 提示文案中的额外操作和说明，`tip` 不为空时才显示 | + +### 外部样式类 + +| 类名 | 说明 | +|-----------|-----------| +| custom-class | 根节点样式类 | +| price-class | 价格样式类 | +| button-class | 按钮样式类 | diff --git a/packages/submit-bar/index.js b/packages/submit-bar/index.js new file mode 100644 index 00000000..3ca5a92c --- /dev/null +++ b/packages/submit-bar/index.js @@ -0,0 +1,45 @@ +import { create } from '../common/create'; + +create({ + classes: [ + 'price-class', + 'button-class' + ], + props: { + tip: [String, Boolean], + type: Number, + price: Number, + label: String, + loading: Boolean, + disabled: Boolean, + buttonText: String, + currency: { + type: String, + value: '¥' + }, + buttonType: { + type: String, + value: 'danger' + } + }, + options: { + multipleSlots: true + }, + computed: { + hasPrice() { + return typeof this.data.price === 'number'; + }, + priceStr() { + return (this.data.price / 100).toFixed(2); + }, + tipStr() { + const { tip } = this.data; + return typeof tip === 'string' ? tip : ''; + } + }, + methods: { + onSubmit(event) { + this.$emit('submit', event.detail); + } + } +}); diff --git a/packages/submit-bar/index.json b/packages/submit-bar/index.json new file mode 100644 index 00000000..b5676868 --- /dev/null +++ b/packages/submit-bar/index.json @@ -0,0 +1,6 @@ +{ + "component": true, + "usingComponents": { + "van-button": "../button/index" + } +} diff --git a/packages/submit-bar/index.pcss b/packages/submit-bar/index.pcss new file mode 100644 index 00000000..37d2212b --- /dev/null +++ b/packages/submit-bar/index.pcss @@ -0,0 +1,52 @@ +@import '../common/style/var.pcss'; + +.van-submit-bar { + left: 0; + bottom: 0; + width: 100%; + z-index: 100; + position: fixed; + user-select: none; + + &__tip { + color: $orange; + padding: 10px; + font-size: 12px; + line-height: 18px; + background-color: #fff7cc; + } + + &__bar { + height: 50px; + display: flex; + font-size: 14px; + align-items: center; + background-color: $white; + } + + &__text { + flex: 1; + font-weight: 500; + text-align: right; + color: $text-color; + padding-right: 12px; + + span { + display: inline-block; + } + } + + &__price { + color: $red; + } + + &__button { + button { + width: 110px; + } + + &--disabled button { + border: none !important; + } + } +} diff --git a/packages/submit-bar/index.wxml b/packages/submit-bar/index.wxml new file mode 100644 index 00000000..d40fd4f1 --- /dev/null +++ b/packages/submit-bar/index.wxml @@ -0,0 +1,29 @@ + + + + + {{ tipStr }} + + + + + + + {{ label || '合计：' }} + {{ currency }} {{ priceStr }} + + + + {{ loading ? '' : buttonText }} + + +