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 }}
-
-
-
-
-
+
+
+
-
+
+ {{ cancelText }}
+
+
+
+
+