From 1e828d225734d3c392157301c96dc05e05cb7784 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= Date: Mon, 6 Aug 2018 11:22:42 +0800 Subject: [PATCH] [breaking change] Actionsheet: rewrite --- example/pages/actionsheet/index.js | 65 ++++------- example/pages/actionsheet/index.json | 1 + example/pages/actionsheet/index.wxml | 45 +++++--- example/pages/actionsheet/index.wxss | 6 +- packages/actionsheet/README.md | 163 +++++++++++++++------------ packages/actionsheet/index.js | 35 +++--- packages/actionsheet/index.json | 4 +- packages/actionsheet/index.pcss | 123 +++++++++----------- packages/actionsheet/index.wxml | 69 ++++++------ 9 files changed, 255 insertions(+), 256 deletions(-) diff --git a/example/pages/actionsheet/index.js b/example/pages/actionsheet/index.js index fc771956..4568c164 100644 --- a/example/pages/actionsheet/index.js +++ b/example/pages/actionsheet/index.js @@ -1,57 +1,36 @@ Page({ data: { - show: false, - cancelWithMask: true, - actions: [{ - name: '选项1', - subname: '选项描述语1', - className: 'action-class', - loading: false - }, { - name: '选项2', - subname: '选项描述语2', - className: 'action-class', - loading: false - }, { - name: '去分享', - openType: 'share' - }], - cancelText: '关闭 Action' + show1: false, + show2: false, + show3: false }, - onShareAppMessage() { - return { - title: 'vant-weapp', - imageUrl: 'https://img.yzcdn.cn/public_files/2017/02/06/ee0ebced79a80457d77ce71c7d414c74.png' - }; - }, - - openActionsheet() { + onLoad() { this.setData({ - 'show': true + actions: [ + { name: '选项' }, + { name: '选项', subname: '禁用' }, + { name: '选项', loading: true }, + { name: '禁用选项', disabled: true } + ] }); }, - closeActionSheet() { + toggle(type) { this.setData({ - 'show': false + [type]: !this.data[type] }); }, - clickAction({ detail }) { - // 如果是分享按钮被点击, 不处理关闭 - const { index } = detail; - if (index === 2) { - return; - } - this.setData({ - [`actions[${index}].loading`]: true - }); - setTimeout(() => { - this.setData({ - [`show`]: false, - [`actions[${index}].loading`]: false - }); - }, 1500); + toggleActionsheet1() { + this.toggle('show1'); + }, + + toggleActionsheet2() { + this.toggle('show2'); + }, + + toggleActionsheet3() { + this.toggle('show3'); } }); diff --git a/example/pages/actionsheet/index.json b/example/pages/actionsheet/index.json index 64eb6d9b..5cd3456f 100644 --- a/example/pages/actionsheet/index.json +++ b/example/pages/actionsheet/index.json @@ -1,6 +1,7 @@ { "navigationBarTitleText": "Actionsheet 上拉菜单", "usingComponents": { + "demo-block": "../../components/demo-block/index", "van-actionsheet": "../../dist/actionsheet/index", "van-button": "../../dist/button/index" } diff --git a/example/pages/actionsheet/index.wxml b/example/pages/actionsheet/index.wxml index 549f87e1..264e3045 100644 --- a/example/pages/actionsheet/index.wxml +++ b/example/pages/actionsheet/index.wxml @@ -1,15 +1,32 @@ - - - Actionsheet - - + + 弹出 Actionsheet + + - + + 弹出带取消按钮的 Actionsheet + + + + + 弹出带标题的 Actionsheet + + 内容 + + diff --git a/example/pages/actionsheet/index.wxss b/example/pages/actionsheet/index.wxss index 91f2fc3c..c4db16ed 100644 --- a/example/pages/actionsheet/index.wxss +++ b/example/pages/actionsheet/index.wxss @@ -1,3 +1,3 @@ -.tiny { - background: rgba(30, 30, 40, 0.7) !important; -} +.content { + padding: 20px; +} \ No newline at end of file diff --git a/packages/actionsheet/README.md b/packages/actionsheet/README.md index 11ae5def..e0b6fb6b 100644 --- a/packages/actionsheet/README.md +++ b/packages/actionsheet/README.md @@ -3,92 +3,111 @@ ### 使用指南 在 index.json 中引入组件 ```json -{ - "usingComponents": { - "van-actionsheet": "path/to/vant-weapp/dist/actionsheet/index" - } +"usingComponents": { + "van-actionsheet": "path/to/vant-weapp/dist/actionsheet/index" } ``` -### 使用指南 +### 代码演示 + +#### 基础用法 +需要传入一个`actions`的数组，数组的每一项是一个对象，对象属性见文档下方表格。 ```html - - - - - - + ``` -```js -// 在 Page 中混入 Actionsheet 里面声明的方法 +```javascript Page({ - data: { - show: false, - cancelWithMask: true, - actions: [{ - name: '选项1', - subname: '选项描述语1', - loading: false - }, { - name: '选项2', - subname: '选项描述语2', - loading: false - }, { - name: '去分享', - openType: 'share' - }], - cancelText: '关闭 Action' + data() { + return { + show: false, + actions: [ + { + name: '选项' + }, + { + name: '选项', + subname: '描述信息' + }, + { + name: '选项', + loading: true + }, + { + name: '禁用选项', + disabled: true + } + ] + }; }, - openActionSheet() { - this.setData({ - 'show': true - }); - }, - closeActionSheet() { - this.setData({ - 'show': false - }); - }, - handleActionClick({ detail }) { - // 获取被点击的按钮 index - const { index } = detail; + + methods: { + onClose() { + this.setData({ show: false }); + }, + + onSelect(event) { + console.log(event.detail); + } } }); ``` +#### 带取消按钮的 Actionsheet -#### `Actionsheet` 支持的具体参数如下（ 传入时使用分隔线写法 ） -| 参数 | 说明 | 类型 | 默认值 | 必须 | -|-----------|-----------|-----------|-------------|-------------| -| show | 用来表示是否展示上拉菜单 | Boolean | false | | -| actions | 指定弹层里的按钮 | Array | [] | | -| cancelText | 上拉菜单底部取消按钮的文案，不传则不显示取消按钮 | String | | | -| cancelWithMask | 是否在点击背景时，关闭上拉菜单 | Boolean | false | | -| mask-class | 用于控制蒙层样式的外部类 | String | | | -| container-class | 用于控制容器样式的外部类 | String | | | +如果传入了`cancelText`属性，且不为空，则会在下方显示一个取消按钮，点击会将当前`Actionsheet`关闭。 -actions 的具体数据结构 -```js -// actions 为数组结构传入 -[{ - // 按钮文案 - name: '选项1', - // 按钮描述文案，不传就不显示 - subname: '选项描述语1', - // 按钮是否显示为 loading - loading: false, - // 按钮的微信开放能力 - // 具体支持可参考微信官方文档：https://mp.weixin.qq.com/debug/wxadoc/dev/component/button.html - openType: 'share' -}] +```html + ``` +#### 带标题的 Actionsheet + +如果传入了`title`属性，且不为空，则另外一种样式的`Actionsheet`，里面内容需要自定义。 + +```html + + 一些内容 + +``` + +### API + +| 参数 | 说明 | 类型 | 默认值 | +|-----------|-----------|-----------|-------------| +| actions | 菜单选项 | `Array` | `[]` | +| title | 标题 | `String` | - | +| cancel-text | 取消按钮文字 | `String` | - | +| overlay | 是否显示遮罩层 | `Boolean` | - | +| close-on-click-overlay | 点击遮罩是否关闭菜单 | `Boolean` | - | + +### Event + +| 事件名 | 说明 | 参数 | +|-----------|-----------|-----------| +| close | 关闭时触发 | - | +| cancel | 取消按钮点击时触发 | - | +| select | 选中选项时触发，选项禁用或加载时不会触发 | event.detail: 选项对应的对象 | + +### actions + +`API`中的`actions`为一个对象数组，数组中的每一个对象配置每一列，每一列有以下`key`： + +| key | 说明 | +|-----------|-----------| +| name | 标题 | +| subname | 二级标题 | +| className | 为对应列添加额外的 class | +| loading | 是否为加载状态 | +| disabled | 是否为禁用状态 | diff --git a/packages/actionsheet/index.js b/packages/actionsheet/index.js index 406df277..88fe03fc 100644 --- a/packages/actionsheet/index.js +++ b/packages/actionsheet/index.js @@ -1,36 +1,39 @@ Component({ externalClasses: ['mask-class', 'container-class'], + properties: { + show: Boolean, + title: String, + cancelText: String, actions: { type: Array, value: [] }, - show: { - type: Boolean, - value: false - }, - cancelWithMask: { + overlay: { type: Boolean, value: true }, - cancelText: { - type: String, - value: '' + closeOnClickOverlay: { + type: Boolean, + value: true } }, + methods: { - onMaskClick() { - if (this.data.cancelWithMask) { - this.cancelClick(); + onSelect(event) { + const { index } = event.currentTarget.dataset; + const item = this.data.actions[index]; + if (item && !item.disabled && !item.loading) { + this.triggerEvent('select', item); } }, - cancelClick() { + + onCancel() { this.triggerEvent('cancel'); }, - handleBtnClick({ currentTarget = {} }) { - const dataset = currentTarget.dataset || {}; - const { index } = dataset; - this.triggerEvent('actionclick', { index }); + + onClose() { + this.triggerEvent('close'); } } }); diff --git a/packages/actionsheet/index.json b/packages/actionsheet/index.json index b5676868..19bf9891 100644 --- a/packages/actionsheet/index.json +++ b/packages/actionsheet/index.json @@ -1,6 +1,8 @@ { "component": true, "usingComponents": { - "van-button": "../button/index" + "van-icon": "../icon/index", + "van-popup": "../popup/index", + "van-loading": "../loading/index" } } diff --git a/packages/actionsheet/index.pcss b/packages/actionsheet/index.pcss index 7d65c870..d4aa11e8 100644 --- a/packages/actionsheet/index.pcss +++ b/packages/actionsheet/index.pcss @@ -1,85 +1,64 @@ -@import "../common/index.pcss"; +@import '../common/index.pcss'; .van-actionsheet { - background-color: #f8f8f8; -} + color: $text-color; + max-height: 90%; + overflow-y: auto; + -webkit-overflow-scrolling: touch; + background-color: $background-color; -.van-actionsheet__mask { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: 10; - background: rgba(0, 0, 0, 0.7); - display: none; -} + &--withtitle { + background-color: $white; + } -.van-actionsheet__container { - position: fixed; - left: 0; - right: 0; - bottom: 0; - background: $background-color; - transform: translate3d(0, 50%, 0); - transform-origin: center; - transition: all 0.2s ease; - z-index: 11; - opacity: 0; - visibility: hidden; -} + &__item, + &__cancel { + height: 50px; + line-height: 50px; + font-size: 16px; + text-align: center; + background-color: $white; -.van-actionsheet__button { - margin-bottom: 0 !important; -} + &:active { + background-color: $active-color; + } + } -.van-actionsheet__footer .van-actionsheet__button { - background: #fff; -} + &__item--disabled { + color: $gray; -.van-actionsheet__button-content { - display: flex; - flex-direction: row; - justify-content: center; -} + &:active { + background-color: $white; + } + } -.van-actionsheet__subname { - color: $gray-dark; -} + &__subname { + font-size: 12px; + color: $gray-darker; + margin-left: 5px; + } -.van-actionsheet__subname, -.van-actionsheet__name { - height: 45px; - line-height: 45px; -} + &__loading { + display: inline-block; + } + &__cancel { + margin-top: 10px; + } -.van-actionsheet__button.van-button:last-child { - &::after { - border-bottom-width: 0; + &__header { + font-size: 16px; + line-height: 44px; + text-align: center; + } + + &__close { + top: 0; + right: 0; + padding: 0 15px; + font-size: 18px; + color: $gray-dark; + position: absolute; + line-height: inherit; } } - -.van-actionsheet__subname { - margin-left: 2px; - font-size: 12px; -} - -.van-actionsheet__footer { - margin-top: 10px; -} - -/* button-loading 状态 */ -.van-actionsheet__button--loading .van-actionsheet__subname { - color: transparent; -} - -/* van-actionsheet 展示出来的样式 */ -.van-actionsheet--show .van-actionsheet__container { - opacity: 1; - transform: translate3d(0, 0, 0); - visibility: visible; -} -.van-actionsheet--show .van-actionsheet__mask { - display: block; -} diff --git a/packages/actionsheet/index.wxml b/packages/actionsheet/index.wxml index 555597e2..a4dbfed8 100644 --- a/packages/actionsheet/index.wxml +++ b/packages/actionsheet/index.wxml @@ -1,39 +1,38 @@ - - - - - - - - {{ item.name }} - - {{ item.subname }} - - - - - + + + {{ title }} + + + - {{ cancelText }} + + {{ item.name }} + {{ item.subname }} + + - + + {{ cancelText }} + + + + +