From 9480e01b9b42dddb61083e661fa6e7be5153fbbe Mon Sep 17 00:00:00 2001 From: WyTiny Date: Mon, 2 Apr 2018 22:24:01 +0800 Subject: [PATCH] =?UTF-8?q?[refactor]=20Actionsheet:=20=E5=8D=87=E7=BA=A7?= =?UTF-8?q?=E5=88=B0=E8=87=AA=E5=AE=9A=E4=B9=89=E7=BB=84=E4=BB=B6=20(#175)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: temp commit * fix: temp commit * fix: add custom actionsheet --- example/pages/actionsheet/index.js | 65 ++++++++--------- example/pages/actionsheet/index.json | 6 +- example/pages/actionsheet/index.wxml | 18 ++--- example/pages/actionsheet/index.wxss | 3 + packages/actionsheet/README.md | 103 +++++++++++++++------------ packages/actionsheet/index.js | 69 +++++++++--------- packages/actionsheet/index.json | 6 ++ packages/actionsheet/index.pcss | 35 ++++++--- packages/actionsheet/index.wxml | 71 +++++++++--------- packages/btn/index.js | 9 +++ packages/btn/index.wxml | 4 +- 11 files changed, 213 insertions(+), 176 deletions(-) create mode 100644 example/pages/actionsheet/index.wxss create mode 100644 packages/actionsheet/index.json diff --git a/example/pages/actionsheet/index.js b/example/pages/actionsheet/index.js index 1366ea32..b4af6c71 100644 --- a/example/pages/actionsheet/index.js +++ b/example/pages/actionsheet/index.js @@ -1,27 +1,22 @@ -const { Actionsheet, extend } = require('../../dist/index'); - -Page(extend({}, Actionsheet, { +Page({ data: { - baseActionsheet: { - show: false, - cancelText: '关闭 Action', - closeOnClickOverlay: true, - componentId: 'baseActionsheet', - actions: [{ - name: '选项1', - subname: '选项描述语1', - className: 'action-class', - loading: false - }, { - name: '选项2', - subname: '选项描述语2', - className: 'action-class', - loading: false - }, { - name: '去分享', - openType: 'share' - }] - } + 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' }, onShareAppMessage() { @@ -31,36 +26,32 @@ Page(extend({}, Actionsheet, { }; }, - toggleActionsheet() { + openActionsheet() { this.setData({ - 'baseActionsheet.show': true + 'show': true }); }, - handleZanActionsheetCancel({ componentId }) { + closeActionSheet() { this.setData({ - [`${componentId}.show`]: false + 'show': false }); }, - handleZanActionsheetClick({ componentId, index }) { - console.log(`item index ${index} clicked`); - + clickAction({ detail }) { // 如果是分享按钮被点击, 不处理关闭 + const { index } = detail; if (index === 2) { return; } - this.setData({ - [`${componentId}.actions[${index}].loading`]: true + [`actions[${index}].loading`]: true }); - setTimeout(() => { this.setData({ - [`${componentId}.show`]: false, - [`${componentId}.actions[${index}].loading`]: false + [`show`]: false, + [`actions[${index}].loading`]: false }); }, 1500); } - -})); +}); diff --git a/example/pages/actionsheet/index.json b/example/pages/actionsheet/index.json index 175d8120..9dda7a69 100644 --- a/example/pages/actionsheet/index.json +++ b/example/pages/actionsheet/index.json @@ -1,3 +1,7 @@ { - "navigationBarTitleText": "Actionsheet 行动按钮" + "navigationBarTitleText": "Actionsheet 行动按钮", + "usingComponents": { + "zan-actionsheet": "../../dist/actionsheet/index", + "zan-btn": "../../dist/btn/index" + } } diff --git a/example/pages/actionsheet/index.wxml b/example/pages/actionsheet/index.wxml index 52c5659d..f24e1299 100644 --- a/example/pages/actionsheet/index.wxml +++ b/example/pages/actionsheet/index.wxml @@ -1,15 +1,17 @@ - - - ACTIONSHEET - - + - - - diff --git a/example/pages/actionsheet/index.wxss b/example/pages/actionsheet/index.wxss new file mode 100644 index 00000000..91f2fc3c --- /dev/null +++ b/example/pages/actionsheet/index.wxss @@ -0,0 +1,3 @@ +.tiny { + background: rgba(30, 30, 40, 0.7) !important; +} diff --git a/packages/actionsheet/README.md b/packages/actionsheet/README.md index 96721602..346c15bd 100644 --- a/packages/actionsheet/README.md +++ b/packages/actionsheet/README.md @@ -1,65 +1,80 @@ ## Actionsheet 行动按钮 ### 使用指南 -在 app.wxss 中引入组件库所有样式 -```css -@import "path/to/zanui-weapp/dist/index.wxss"; -``` - -在需要使用的页面里引入组件库模板和脚本 -```html - - - -``` -```js -const { Actionsheet, extend } = require('path/to/zanui-weapp/dist/index'); - -// 在 Page 中混入 Actionsheet 里面声明的方法 -Page(extend({}, Actionsheet, { - data: { - actionsheet: { - show: false, - actions: [] - } +在 index.json 中引入组件 +```json +{ + "usingComponents": { + "zan-actionsheet": "path/to/zanui-weapp/dist/actionsheet/index" } - // ... -})); +} ``` -### 代码演示 -#### 基础功能 -在 js 中设置传入的 show 为 true，即可展示出 actionsheet。actionsheet 会根据传入的 actions 展示按钮。 -```js -this.setData({ - 'actionsheet.show': true -}) +### 使用指南 + +```html + + + + + + ``` -当行动按钮被点击或者弹层被关掉时，都可以在可以在页面中注册 `handleZanActionsheetClick` 和 `handleZanActionsheetCancel` 方法来监听。 ```js +// 在 Page 中混入 Actionsheet 里面声明的方法 Page({ - // 当行动按钮被关闭时，触发该函数 - // componentId 即为在模板中传入的 componentId - // 用于在一个页面上使用多个 actionsheet 时，进行区分 - handleZanActionsheetCancel({ componentId }) { + data: { + show: false, + cancelWithMask: true, + actions: [{ + name: '选项1', + subname: '选项描述语1', + loading: false + }, { + name: '选项2', + subname: '选项描述语2', + loading: false + }, { + name: '去分享', + openType: 'share' + }], + cancelText: '关闭 Action' }, - - // 当行动按钮中有一个被点击时触发 - // index 代表被点击按钮在传入参数 actions 中的位置 - handleZanActionsheetClick({ componentId, index }) { + openActionSheet() { + this.setData({ + 'show': true + }); + }, + closeActionSheet() { + this.setData({ + 'show': false + }); + }, + handleActionClick({ detail }) { + // 获取被点击的按钮 index + const { index } = detail; } }); ``` -#### `Actionsheet` 支持的具体参数如下 + +#### `Actionsheet` 支持的具体参数如下（ 传入时使用分隔线写法 ） | 参数 | 说明 | 类型 | 默认值 | 必须 | |-----------|-----------|-----------|-------------|-------------| | show | 用来表示是否展示行动按钮 | Boolean | false | | +| actions | 指定弹层里的按钮 | Array | [] | | | cancelText | 行动按钮底部取消按钮的文案，不传则不显示取消按钮 | String | | | -| closeOnClickOverlay | 是否在点击背景时，关闭行动按钮 | Boolean | false | | -| componentId | 用于区分行动按钮之间的唯一名称 | String | | | -| actions | 行动按钮的按钮显示配置 | Array | [] | | +| cancelWithMask | 是否在点击背景时，关闭行动按钮 | Boolean | false | | +| mask-class | 用于控制蒙层样式的外部类 | String | | | +| container-class | 用于控制容器样式的外部类 | String | | | actions 的具体数据结构 ```js @@ -69,8 +84,6 @@ actions 的具体数据结构 name: '选项1', // 按钮描述文案，不传就不显示 subname: '选项描述语1', - // 按钮特殊类，可以通过传入这个，为按钮增加特殊样式 - className: 'action-class', // 按钮是否显示为 loading loading: false, // 按钮的微信开放能力 diff --git a/packages/actionsheet/index.js b/packages/actionsheet/index.js index 02a64544..406df277 100644 --- a/packages/actionsheet/index.js +++ b/packages/actionsheet/index.js @@ -1,41 +1,36 @@ -const { extractComponentId } = require('../common/helper'); - -module.exports = { - _handleZanActionsheetMaskClick({ currentTarget = {} }) { - const dataset = currentTarget.dataset || {}; - const { componentId, closeOnClickOverlay } = dataset; - - // 判断是否在点击背景时需要关闭弹层 - if (!closeOnClickOverlay) { - return; +Component({ + externalClasses: ['mask-class', 'container-class'], + properties: { + actions: { + type: Array, + value: [] + }, + show: { + type: Boolean, + value: false + }, + cancelWithMask: { + type: Boolean, + value: true + }, + cancelText: { + type: String, + value: '' } - - resolveCancelClick.call(this, { componentId }); }, - - _handleZanActionsheetCancelBtnClick(e) { - const componentId = extractComponentId(e); - - resolveCancelClick.call(this, { componentId }); - }, - - _handleZanActionsheetBtnClick({ currentTarget = {} }) { - const dataset = currentTarget.dataset || {}; - const { componentId, index } = dataset; - - if (this.handleZanActionsheetClick) { - this.handleZanActionsheetClick({ componentId, index }); - } else { - console.warn('页面缺少 handleZanActionsheetClick 回调函数'); + methods: { + onMaskClick() { + if (this.data.cancelWithMask) { + this.cancelClick(); + } + }, + cancelClick() { + this.triggerEvent('cancel'); + }, + handleBtnClick({ currentTarget = {} }) { + const dataset = currentTarget.dataset || {}; + const { index } = dataset; + this.triggerEvent('actionclick', { index }); } } -}; - -function resolveCancelClick({ componentId }) { - console.info('[zan:actionsheet:cancel]'); - if (this.handleZanActionsheetCancel) { - this.handleZanActionsheetCancel({ componentId }); - } else { - console.warn('页面缺少 handleZanActionsheetCancel 回调函数'); - } -} +}); diff --git a/packages/actionsheet/index.json b/packages/actionsheet/index.json new file mode 100644 index 00000000..9d70aaf4 --- /dev/null +++ b/packages/actionsheet/index.json @@ -0,0 +1,6 @@ +{ + "component": true, + "usingComponents": { + "zan-btn": "../btn/index" + } +} diff --git a/packages/actionsheet/index.pcss b/packages/actionsheet/index.pcss index 19e2b2fb..1531d269 100644 --- a/packages/actionsheet/index.pcss +++ b/packages/actionsheet/index.pcss @@ -30,17 +30,31 @@ visibility: hidden; } -.zan-actionsheet__btn.zan-btn { - height: 50px; - line-height: 50px; - margin-bottom: 0; - - &::after { - border-width: 0; - border-bottom-width: 1px; - } +.zan-actionsheet__btn { + margin-bottom: 0 !important; } +.zan-actionsheet__footer .zan-actionsheet__btn { + background: #fff; +} + +.zan-actionsheet__btn-content { + display: flex; + flex-direction: row; + justify-content: center; +} + +.zan-actionsheet__subname { + color: $gray-dark; +} + +.zan-actionsheet__subname, +.zan-actionsheet__name { + height: 45px; + line-height: 45px; +} + + .zan-actionsheet__btn.zan-btn:last-child { &::after { border-bottom-width: 0; @@ -50,7 +64,6 @@ .zan-actionsheet__subname { margin-left: 2px; font-size: 12px; - color: $gray-darker; } .zan-actionsheet__footer { @@ -58,7 +71,7 @@ } /* btn-loading 状态 */ -.zan-actionsheet__btn.zan-btn--loading .zan-actionsheet__subname { +.zan-actionsheet__btn--loading .zan-actionsheet__subname { color: transparent; } diff --git a/packages/actionsheet/index.wxml b/packages/actionsheet/index.wxml index 2e54d6eb..de6b80d0 100644 --- a/packages/actionsheet/index.wxml +++ b/packages/actionsheet/index.wxml @@ -1,40 +1,39 @@ - + diff --git a/packages/btn/index.js b/packages/btn/index.js index 901367ac..8795e4ee 100644 --- a/packages/btn/index.js +++ b/packages/btn/index.js @@ -22,5 +22,14 @@ Component({ type: Boolean, value: false, }, + openType: { + type: String, + value: '' + } }, + methods: { + handleTap() { + this.triggerEvent('btnclick'); + } + } }); \ No newline at end of file diff --git a/packages/btn/index.wxml b/packages/btn/index.wxml index 772e8973..0b673194 100644 --- a/packages/btn/index.wxml +++ b/packages/btn/index.wxml @@ -1,7 +1,9 @@ \ No newline at end of file