diff --git a/example/pages/dialog/index.js b/example/pages/dialog/index.js index c6553092..4c8c7db6 100644 --- a/example/pages/dialog/index.js +++ b/example/pages/dialog/index.js @@ -1,30 +1,33 @@ -const Zan = require('../../dist/index'); +const Dialog = require('../../dist/dialog/dialog'); -Page(Object.assign({}, Zan.Dialog, { +Page({ toggleBaseDialog() { - this.showZanDialog({ + Dialog({ title: '弹窗', - content: '这是一个模态弹窗', - showCancel: true + message: '这是一个模态弹窗', + selector: '#zan-base-dialog', + showCancelButton: true }).then(() => { - console.log('=== dialog ===', 'type: confirm'); + console.log('=== dialog resolve ===', 'type: confirm'); }).catch(() => { - console.log('=== dialog ===', 'type: cancel'); + console.log('=== dialog reject ===', 'type: cancel'); }); }, toggleWithoutTitleDialog() { - this.showZanDialog({ - content: '这是一个模态弹窗' + Dialog({ + message: '这是一个模态弹窗', + selector: '#zan-no-title-dialog' }).then(() => { - console.log('=== dialog without title ===', 'type: confirm'); + console.log('=== dialog ===', 'type: confirm'); }); }, toggleButtonDialog() { - this.showZanDialog({ + Dialog({ title: '弹窗', - content: '这是一个模态弹窗', + message: '这是一个模态弹窗', + selector: '#zan-button-dialog', buttons: [{ text: '现金支付', color: 'red', @@ -43,9 +46,10 @@ Page(Object.assign({}, Zan.Dialog, { }, toggleVerticalDialog() { - this.showZanDialog({ + Dialog({ title: '弹窗', - content: '这是一个模态弹窗', + message: '这是一个模态弹窗', + selector: '#zan-vertical-dialog', buttonsShowVertical: true, buttons: [{ text: '现金支付', @@ -63,4 +67,4 @@ Page(Object.assign({}, Zan.Dialog, { console.log('=== dialog with vertical buttons ===', `type: ${type}`); }); } -})); +}); diff --git a/example/pages/dialog/index.json b/example/pages/dialog/index.json index b5bc7f6b..6df5df6c 100644 --- a/example/pages/dialog/index.json +++ b/example/pages/dialog/index.json @@ -1,3 +1,8 @@ { - "navigationBarTitleText": "Dialog 弹出框" + "navigationBarTitleText": "Dialog 弹出框", + "usingComponents": { + "doc-page": "../../components/doc-page/index", + "zan-dialog": "../../dist/dialog/index", + "zan-button": "../../dist/btn/index" + } } diff --git a/example/pages/dialog/index.wxml b/example/pages/dialog/index.wxml index ac1c1431..41a48074 100644 --- a/example/pages/dialog/index.wxml +++ b/example/pages/dialog/index.wxml @@ -1,4 +1,18 @@ - + + + 基础 Dialog + Dialog - 无标题 + Dialog - 自定义显示按钮 + Dialog - 按钮纵向排布 + + + + + + + + + diff --git a/package-lock.json b/package-lock.json index 33ead41f..3cdafe6c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4079,6 +4079,24 @@ } } }, + "eslint-config-airbnb": { + "version": "16.1.0", + "resolved": "https://registry.npmjs.org/eslint-config-airbnb/-/eslint-config-airbnb-16.1.0.tgz", + "integrity": "sha512-zLyOhVWhzB/jwbz7IPSbkUuj7X2ox4PHXTcZkEmDqTvd0baJmJyuxlFPDlZOE/Y5bC+HQRaEkT3FoHo9wIdRiw==", + "dev": true, + "requires": { + "eslint-config-airbnb-base": "12.1.0" + } + }, + "eslint-config-airbnb-base": { + "version": "12.1.0", + "resolved": "https://registry.npmjs.org/eslint-config-airbnb-base/-/eslint-config-airbnb-base-12.1.0.tgz", + "integrity": "sha512-/vjm0Px5ZCpmJqnjIzcFb9TKZrKWz0gnuG/7Gfkt0Db1ELJR51xkZth+t14rYdqWgX836XbuxtArbIHlVhbLBA==", + "dev": true, + "requires": { + "eslint-restricted-globals": "0.1.1" + } + }, "eslint-config-standard": { "version": "10.2.1", "resolved": "https://registry.npmjs.org/eslint-config-standard/-/eslint-config-standard-10.2.1.tgz", @@ -4313,6 +4331,12 @@ "vue-eslint-parser": "2.0.3" } }, + "eslint-restricted-globals": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/eslint-restricted-globals/-/eslint-restricted-globals-0.1.1.tgz", + "integrity": "sha1-NfDVy8ZMLj7WLpO0saevBbp+1Nc=", + "dev": true + }, "eslint-scope": { "version": "3.7.1", "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-3.7.1.tgz", @@ -14685,6 +14709,7 @@ "version": "0.2.5", "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz", "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=", + "dev": true, "requires": { "is-descriptor": "0.1.6" } @@ -14693,6 +14718,7 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz", "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=", + "dev": true, "requires": { "is-extendable": "0.1.1" } @@ -14701,6 +14727,7 @@ "version": "0.1.6", "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz", "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=", + "dev": true, "requires": { "kind-of": "3.2.2" }, @@ -14709,6 +14736,7 @@ "version": "3.2.2", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", + "dev": true, "requires": { "is-buffer": "1.1.6" } @@ -14719,6 +14747,7 @@ "version": "0.1.4", "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz", "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=", + "dev": true, "requires": { "kind-of": "3.2.2" }, @@ -14727,6 +14756,7 @@ "version": "3.2.2", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz", "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=", + "dev": true, "requires": { "is-buffer": "1.1.6" } @@ -14737,6 +14767,7 @@ "version": "0.1.6", "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz", "integrity": "sha512-avDYr0SB3DwO9zsMov0gKCESFYqCnE4hq/4z3TdUlukEy5t9C0YRq7HLrsN52NAcqXKaepeCD0n+B0arnVG3Hg==", + "dev": true, "requires": { "is-accessor-descriptor": "0.1.6", "is-data-descriptor": "0.1.4", @@ -14746,7 +14777,8 @@ "kind-of": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz", - "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==" + "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==", + "dev": true }, "source-map": { "version": "0.5.7", diff --git a/package.json b/package.json index d68ceb9b..f496909e 100644 --- a/package.json +++ b/package.json @@ -32,7 +32,9 @@ "homepage": "https://github.com/youzan/zanui-weapp#readme", "devDependencies": { "cross-env": "^5.1.4", + "eslint-config-airbnb": "^16.1.0", "fs-extra": "^4.0.2", + "gh-pages": "^1.1.0", "gulp": "^3.9.1", "gulp-clean-css": "^3.9.0", "gulp-postcss": "^7.0.0", @@ -44,7 +46,6 @@ "postcss-easy-import": "^3.0.0", "precss": "^2.0.0", "shelljs": "^0.7.8", - "gh-pages": "^1.1.0", "wedoc": "0.0.13" } } diff --git a/packages/btn/index.pcss b/packages/btn/index.pcss index 7fc54a73..c62145c8 100644 --- a/packages/btn/index.pcss +++ b/packages/btn/index.pcss @@ -15,6 +15,7 @@ text-decoration: none; text-align: center; vertical-align: middle; + overflow: visible; } .zan-btn::after { @mixin hairline; diff --git a/packages/btn/index.wxml b/packages/btn/index.wxml index 0b673194..ab1e53a6 100644 --- a/packages/btn/index.wxml +++ b/packages/btn/index.wxml @@ -1,4 +1,3 @@ - \ No newline at end of file + diff --git a/packages/dialog/README.md b/packages/dialog/README.md index 32b1ef9f..69225374 100644 --- a/packages/dialog/README.md +++ b/packages/dialog/README.md @@ -1,57 +1,54 @@ ## Dialog 弹出框 ### 使用指南 -在 app.wxss 中引入组件库所有样式 -```css -@import "path/to/zanui-weapp/dist/index.wxss"; +在 index.json 中引入组件 +```json +{ + "usingComponents": { + "zan-dialog": "path/to/zanui-weapp/dist/dialog/index" + } +} ``` 在需要使用的页面里引入组件库模板和脚本 ```html - - - + ``` ```js -const { Dialog, extend } = require('path/to/zanui-weapp/dist/index'); +const Dialog = require('path/to/zanui-weapp/dist/dialog/dialog'); -// 在 Page 中混入 Dialog 里面声明的方法 -Page(extend({}, Dialog, { +Page({ // ... -})); + // 可以在任意方法里直接调用，即可唤起 + handleClick() { + Dialog({ + title: '', + message: '', + selector: '#zan-dialog-test' + }).then((res) => { + console.log(res); + }) + } +}); ``` ### 代码演示 -#### 基础功能 -在 js 中直接调用 this.showZanDialog 即可，可以在 title 或者 content 传入需要展示的内容。 - -showZanDialog 调用后返回 promise 对象。点击确定后，可以在 resolve 状态中监听到。点击取消后，可以在 reject 状态中监听到。 -```js -this.showZanDialog({ - content: '这是一个模态弹窗', - showCancel: true -}).then(() => { - console.log('=== dialog ===', 'type: confirm'); -}).catch(() => { - console.log('=== dialog ===', 'type: cancel'); -}); -``` #### 按钮展示方式 按钮可以通过设置 buttonsShowVertical 来切换按钮纵向展示或者横向并排展示，方便各种场景下使用。 ```js -this.showZanDialog({ - content: '这是一个模态弹窗', +Dialog({ + message: '这是一个模态弹窗', buttonsShowVertical: true, - showCancel: true + showCancelButton: true }); ``` #### 自定义展示按钮 `dialog` 支持自定义展示按钮。设置 buttons 数组即可实现。自定义按钮的点击后，都会在 resolve 状态中监听到。 ```js -this.showZanDialog({ - content: '这是一个模态弹窗', +Dialog({ + message: '这是一个模态弹窗', buttons: [{ // 按钮文案 text: '现金支付', @@ -75,15 +72,16 @@ this.showZanDialog({ | 参数 | 说明 | 类型 | 默认值 | 必须 | |-----------|-----------|-----------|-------------|-------------| +| message | 弹窗内容 | String | - | 必须 | +| selector | 显示弹窗对应组件节点的选择器 | String | - | 必须 | | title | 弹窗标题 | String | - | | -| content | 弹窗内容 | String | - | 必须 | | buttonsShowVertical | 按钮是否纵向展示 | Boolean | false | | -| showConfirm | 是否展示确认按钮 | Boolean | true | | -| confirmText | 确认按钮文案 | String | 确定 | | -| confirmColor | 确认按钮文字颜色 | String | #3CC51F | | -| showCancel | 是否展示取消按钮 | Boolean | false | | -| cancelText | 取消按钮文案 | String | 取消 | | -| cancelColor | 取消按钮文字颜色 | String | #333 | | +| showConfirmButton | 是否展示确认按钮 | Boolean | true | | +| confirmButtonText | 确认按钮文案 | String | 确定 | | +| confirmButtonColor | 确认按钮文字颜色 | String | #3CC51F | | +| showCancelButton | 是否展示取消按钮 | Boolean | false | | +| cancelButtonText | 取消按钮文案 | String | 取消 | | +| cancelButtonColor | 取消按钮文字颜色 | String | #333 | | | buttons | 自定义按钮列表，设置以后，以上关于 确认 和 取消 按钮的设置全部不生效。| Array | - | | buttons 参考格式： diff --git a/packages/dialog/data.js b/packages/dialog/data.js new file mode 100644 index 00000000..9a624d0f --- /dev/null +++ b/packages/dialog/data.js @@ -0,0 +1,25 @@ +module.exports = { + // 标题 + title: '', + // 自定义 btn 列表 + // { type: 按钮类型，回调时以此作为区分依据，text: 按钮文案, color: 按钮文字颜色 } + buttons: [], + // 内容 + message: ' ', + // 选择节点 + selector: '#zan-dialog', + // 按钮是否展示为纵向 + buttonsShowVertical: false, + // 是否展示确定 + showConfirmButton: true, + // 确认按钮文案 + confirmButtonText: '确定', + // 确认按钮颜色 + confirmButtonColor: '#3CC51F', + // 是否展示取消 + showCancelButton: false, + // 取消按钮文案 + cancelButtonText: '取消', + // 取消按钮颜色 + cancelButtonColor: '#333' +}; diff --git a/packages/dialog/dialog.js b/packages/dialog/dialog.js new file mode 100644 index 00000000..45242ad1 --- /dev/null +++ b/packages/dialog/dialog.js @@ -0,0 +1,64 @@ +const defaultData = require('./data'); + +// options 使用参数 +// pageCtx 页面 page 上下文 +function Dialog(options, pageCtx) { + const parsedOptions = { + ...defaultData, + ...options + }; + + let ctx = pageCtx; + if (!ctx) { + const pages = getCurrentPages(); + ctx = pages[pages.length - 1]; + } + const dialogCtx = ctx.selectComponent(parsedOptions.selector); + + if (!dialogCtx) { + console.error('无法找到对应的dialog组件，请于页面中注册并在 wxml 中声明 dialog 自定义组件'); + return Promise.reject({ type: 'component error' }); + } + + // 处理默认按钮的展示 + // 纵向排布确认按钮在上方 + const buttons = parsedOptions.buttons; + let showCustomBtns = false; + if (buttons.length === 0) { + if (parsedOptions.showConfirmButton) { + buttons.push({ + type: 'confirm', + text: parsedOptions.confirmButtonText, + color: parsedOptions.confirmButtonColor + }); + } + + if (parsedOptions.showCancelButton) { + const cancelButton = { + type: 'cancel', + text: parsedOptions.cancelButtonText, + color: parsedOptions.cancelButtonColor + }; + if (parsedOptions.buttonsShowVertical) { + buttons.push(cancelButton); + } else { + buttons.unshift(cancelButton); + } + } + } else { + showCustomBtns = true; + } + + return new Promise((resolve, reject) => { + dialogCtx.setData({ + ...parsedOptions, + buttons, + showCustomBtns, + key: `${(new Date()).getTime()}`, + show: true, + promiseFunc: { resolve, reject } + }); + }); +}; + +module.exports = Dialog; \ No newline at end of file diff --git a/packages/dialog/index.js b/packages/dialog/index.js index bc97a739..9b870c20 100644 --- a/packages/dialog/index.js +++ b/packages/dialog/index.js @@ -1,112 +1,49 @@ -const _f = function () {}; +const defaultData = require('./data'); -module.exports = { - showZanDialog(options = {}) { - const { - // 自定义 btn 列表 - // { type: 按钮类型，回调时以此作为区分依据，text: 按钮文案, color: 按钮文字颜色 } - buttons = [], - // 标题 - title = '', - // 内容 - content = ' ', - // 按钮是否展示为纵向 - buttonsShowVertical = false, - // 是否展示确定 - showConfirm = true, - // 确认按钮文案 - confirmText = '确定', - // 确认按钮颜色 - confirmColor = '#3CC51F', - // 是否展示取消 - showCancel = false, - // 取消按钮文案 - cancelText = '取消', - // 取消按钮颜色 - cancelColor = '#333' - } = options; +const _f = function() {}; - // 处理默认按钮的展示 - // 纵向排布确认按钮在上方 - let showCustomBtns = false; - if (buttons.length === 0) { - if (showConfirm) { - buttons.push({ - type: 'confirm', - text: confirmText, - color: confirmColor - }); - } +Component({ + properties: {}, - if (showCancel) { - const cancelButton = { - type: 'cancel', - text: cancelText, - color: cancelColor - }; - if (buttonsShowVertical) { - buttons.push(cancelButton); - } else { - buttons.unshift(cancelButton); - } - } - } else { - showCustomBtns = true; - } - - return new Promise((resolve, reject) => { - this.setData({ - zanDialog: { - show: true, - showCustomBtns, - buttons, - title, - content, - buttonsShowVertical, - showConfirm, - confirmText, - confirmColor, - showCancel, - cancelText, - cancelColor, - // 回调钩子 - resolve, - reject - } - }); - }); + data: { + ...defaultData, + key: '', + show: false, + showCustomBtns: false, + promiseFunc: {} }, - _handleZanDialogButtonClick(e) { - const { currentTarget = {} } = e; - const { dataset = {} } = currentTarget; + methods: { + handleButtonClick(e) { + const { currentTarget = {} } = e; + const { dataset = {} } = currentTarget; - // 获取当次弹出框的信息 - const zanDialogData = this.data.zanDialog || {}; - const { resolve = _f, reject = _f } = zanDialogData; + // 获取当次弹出框的信息 + const { resolve = _f, reject = _f } = this.data.promiseFunc || {}; - // 重置 zanDialog 里的内容 - this.setData({ - zanDialog: { show: false } - }); - - // 自定义按钮，全部 resolve 形式返回，根据 type 区分点击按钮 - if (zanDialogData.showCustomBtns) { - resolve({ - type: dataset.type + // 重置展示 + this.setData({ + show: false }); - return; - } - // 默认按钮，确认为 resolve，取消为 reject - if (dataset.type === 'confirm') { - resolve({ - type: 'confirm' - }); - } else { - reject({ - type: 'cancel' - }); + // 自定义按钮，全部 resolve 形式返回，根据 type 区分点击按钮 + if (this.data.showCustomBtns) { + resolve({ + type: dataset.type + }); + return; + } + + // 默认按钮，确认为 resolve，取消为 reject + if (dataset.type === 'confirm') { + resolve({ + type: 'confirm' + }); + } else { + reject({ + type: 'cancel' + }); + } } } -}; +}); diff --git a/packages/dialog/index.json b/packages/dialog/index.json new file mode 100644 index 00000000..f4d43043 --- /dev/null +++ b/packages/dialog/index.json @@ -0,0 +1,7 @@ +{ + "component": true, + "usingComponents": { + "pop-manager": "../common/pop-manager/index", + "zan-button": "../btn/index" + } +} diff --git a/packages/dialog/index.pcss b/packages/dialog/index.pcss index 31144751..6e4a69a1 100644 --- a/packages/dialog/index.pcss +++ b/packages/dialog/index.pcss @@ -2,32 +2,12 @@ /* 基础样式 */ .zan-dialog--container { - position: fixed; - top: 45%; - left: 50%; - width: 80%; - height: 0; + width: 80vw; font-size: 16px; overflow: hidden; - transition: all .2s linear; border-radius: 4px; background-color: #fff; - transform: translate3d(-50%, -50%, 0); color: #333; - opacity: 0; - z-index: 1; -} - -.zan-dialog--mask { - position: fixed; - width: 100%; - height: 100%; - top: 0; - left: 0; - background-color: rgba(0, 0, 0, 0.6); - transition: .3s; - display: none; - z-index: 1; } /* 弹出层内容 */ @@ -59,11 +39,13 @@ } .zan-dialog__button { + flex: 1; +} + +.zan-dialog__button-inside, .zan-dialog__button-inside--first { + margin-bottom: 0; line-height: 50px; height: 50px; - padding: 0 5px; - border-radius: 0; - margin-bottom: 0; &::after { border-width: 0; @@ -71,42 +53,19 @@ } } -/* 展示时，样式重置 */ -.zan-dialog--show .zan-dialog--container { - opacity: 1; - height: auto; -} - -.zan-dialog--show .zan-dialog--mask { - display: block; -} - /* 水平/垂直布局 */ .zan-dialog__footer--horizon { display: flex; } -.zan-dialog__footer--horizon .zan-dialog__button { - flex: 1; - +.zan-dialog__footer--horizon .zan-dialog__button-inside { &::after { - border-right-width: 1px; - } - - &:last-child::after { - border-right-width: 0; + border-left-width: 1px; } } - -.zan-dialog__footer--vertical .zan-dialog__button { - flex: 1; - +.zan-dialog__footer--vertical .zan-dialog__button-inside { &::after { - border-bottom-width: 1px; - } - - &:last-child::after { - border-bottom-width: 0; + border-top-width: 1px; } } diff --git a/packages/dialog/index.wxml b/packages/dialog/index.wxml index 5197c41c..5fd4a5a5 100644 --- a/packages/dialog/index.wxml +++ b/packages/dialog/index.wxml @@ -1,22 +1,36 @@ - + diff --git a/packages/helper/index.pcss b/packages/helper/index.pcss index 97cbbece..791ebcff 100644 --- a/packages/helper/index.pcss +++ b/packages/helper/index.pcss @@ -44,7 +44,10 @@ font-size: 22px; } .zan-font-24 { - font-size: 22px; + font-size: 24px; +} +.zan-font-26 { + font-size: 26px; } .zan-font-30 { font-size: 30px; diff --git a/packages/index.pcss b/packages/index.pcss index 95916492..62301768 100644 --- a/packages/index.pcss +++ b/packages/index.pcss @@ -1,25 +1 @@ -@import "actionsheet/index.pcss"; -@import "badge/index.pcss"; -@import "btn/index.pcss"; -@import "capsule/index.pcss"; -@import "card/index.pcss"; -@import "cell/index.pcss"; -@import "col/index.pcss"; -@import "color/index.pcss"; -@import "dialog/index.pcss"; -@import "field/index.pcss"; @import "helper/index.pcss"; -@import "icon/index.pcss"; -@import "loadmore/index.pcss"; -@import "noticebar/index.pcss"; -@import "panel/index.pcss"; -@import "popup/index.pcss"; -@import "row/index.pcss"; -@import "select/index.pcss"; -@import "stepper/index.pcss"; -@import "steps/index.pcss"; -@import "switch/index.pcss"; -@import "tab/index.pcss"; -@import "tag/index.pcss"; -@import "toast/index.pcss"; -@import "toptips/index.pcss"; diff --git a/packages/popup/index.pcss b/packages/popup/index.pcss deleted file mode 100644 index 8b137891..00000000 --- a/packages/popup/index.pcss +++ /dev/null @@ -1 +0,0 @@ -