[refactor] Dialog: 升级为自定义组件 (#184)

* 封装 doc-page, 方便写文档

* add pop manager

* popup upgrade

* 更新 README

* add empty line

* delete empty css

* dialog init

* dialog

* dialog upgrade

* 修复 helper 里的样式问题

* dialog 文档

* 修复 button 奇怪的边框问题

* 缩进处理

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: '这是一个模态弹窗',
+      message: '这是一个模态弹窗',
-      showCancel: true
+      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({
+    Dialog({
-      content: '这是一个模态弹窗'
+      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}`);
     });
   }
-}));
+});

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"
+  }  
 }

example/pages/dialog/index.wxml

@@ -1,4 +1,18 @@
-<import src="/dist/dialog/index.wxml" />
+<doc-page title="DIALOG">
+  <view class="zan-btns" style="margin-top: 30vh;">
+    <zan-button bindtap="toggleBaseDialog">基础 Dialog</zan-button>
+    <zan-button bindtap="toggleWithoutTitleDialog">Dialog - 无标题</zan-button>
+    <zan-button bindtap="toggleButtonDialog">Dialog - 自定义显示按钮</zan-button>
+    <zan-button bindtap="toggleVerticalDialog">Dialog - 按钮纵向排布</zan-button>
+  </view>
+
+  <zan-dialog id="zan-base-dialog"></zan-dialog>
+  <zan-dialog id="zan-no-title-dialog"></zan-dialog>
+  <zan-dialog id="zan-button-dialog"></zan-dialog>
+  <zan-dialog id="zan-vertical-dialog"></zan-dialog>
+</doc-page>
+
+<!-- <import src="/dist/dialog/index.wxml" />
 
 <view class="container">
 
@@ -21,4 +35,4 @@
 
 </view>
 
-<template is="zan-dialog" data="{{ zanDialog }}"></template>
+<template is="zan-dialog" data="{{ zanDialog }}"></template> -->

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",

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"
   }
 }

packages/btn/index.pcss

@@ -15,6 +15,7 @@
   text-decoration: none;
   text-align: center;
   vertical-align: middle;
+  overflow: visible;
 }
 .zan-btn::after {
   @mixin hairline;

packages/btn/index.wxml

@@ -1,4 +1,3 @@
-
 <button 
   class="custom-class zan-btn {{size ? 'zan-btn--'+size : ''}} {{size === 'mini' ? 'zan-btn--plain' : ''}} {{plain ? 'zan-btn--plain' : ''}} {{type ? 'zan-btn--'+type : ''}} {{loading ? 'zan-btn--loading' : ''}} {{disabled ? 'zan-btn--disabled' : ''}}"
   disabled="{{ disabled }}"
@@ -6,4 +5,4 @@
   bindtap="handleTap"
 >
   <slot></slot>
-</button>
+</button>

packages/dialog/README.md

@@ -1,57 +1,54 @@
 ## Dialog 弹出框
 
 ### 使用指南
-在 app.wxss 中引入组件库所有样式
+在 index.json 中引入组件
-```css
+```json
-@import "path/to/zanui-weapp/dist/index.wxss";
+{
+  "usingComponents": {
+    "zan-dialog": "path/to/zanui-weapp/dist/dialog/index"
+  }
+}
 ```
 
 在需要使用的页面里引入组件库模板和脚本
 ```html
-<import src="/dist/dialog/index.wxml" />
+<zan-dialog id="zan-dialog-test"></zan-dialog>
-<!-- 直接使用 zan-dialog 模板，并且直接传入 zanDialog -->
-<template is="zan-dialog" data="{{ zanDialog }}"></template>
 ```
 ```js
-const { Dialog, extend } = require('path/to/zanui-weapp/dist/index');
+const Dialog = require('path/to/zanui-weapp/dist/dialog/dialog');
 
-// 在 Page 中混入 Dialog 里面声明的方法
+Page({
-Page(extend({}, Dialog, {
   // ...
-}));
+  // 可以在任意方法里直接调用，即可唤起
+  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({
+Dialog({
-  content: '这是一个模态弹窗',
+  message: '这是一个模态弹窗',
   buttonsShowVertical: true,
-  showCancel: true
+  showCancelButton: true
 });
 ```
 
 #### 自定义展示按钮
 `dialog` 支持自定义展示按钮。设置 buttons 数组即可实现。自定义按钮的点击后，都会在 resolve 状态中监听到。
 ```js
-this.showZanDialog({
+Dialog({
-  content: '这是一个模态弹窗',
+  message: '这是一个模态弹窗',
   buttons: [{
     // 按钮文案
     text: '现金支付',
@@ -75,15 +72,16 @@ this.showZanDialog({
 
 | 参数       | 说明      | 类型       | 默认值       | 必须      |
 |-----------|-----------|-----------|-------------|-------------|
+| message | 弹窗内容 | String  | - | 必须 |
+| selector | 显示弹窗对应组件节点的选择器 | String  | - | 必须 |
 | title | 弹窗标题 | String | - | |
-| content | 弹窗内容 | String  | - | 必须 |
 | buttonsShowVertical | 按钮是否纵向展示 | Boolean  | false | |
-| showConfirm | 是否展示确认按钮 | Boolean  | true | |
+| showConfirmButton | 是否展示确认按钮 | Boolean  | true | |
-| confirmText | 确认按钮文案 | String  | 确定 | |
+| confirmButtonText | 确认按钮文案 | String  | 确定 | |
-| confirmColor | 确认按钮文字颜色 | String | #3CC51F | |
+| confirmButtonColor | 确认按钮文字颜色 | String | #3CC51F | |
-| showCancel | 是否展示取消按钮 | Boolean  | false | |
+| showCancelButton | 是否展示取消按钮 | Boolean  | false | |
-| cancelText | 取消按钮文案 | String  | 取消 | |
+| cancelButtonText | 取消按钮文案 | String  | 取消 | |
-| cancelColor | 取消按钮文字颜色 | String  | #333 | |
+| cancelButtonColor | 取消按钮文字颜色 | String  | #333 | |
 | buttons | 自定义按钮列表，设置以后，以上关于 确认 和 取消 按钮的设置全部不生效。| Array | - | |
 
 buttons 参考格式：

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'
+};

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;

packages/dialog/index.js

@@ -1,112 +1,49 @@
-const _f = function () {};
+const defaultData = require('./data');
 
-module.exports = {
+const _f = function() {};
-  showZanDialog(options = {}) {
-    const {
-      // 自定义 btn 列表
-      // { type: 按钮类型，回调时以此作为区分依据，text: 按钮文案, color: 按钮文字颜色 }
-      buttons = [],
-      // 标题
-      title = '',
-      // 内容
-      content = ' ',
-      // 按钮是否展示为纵向
-      buttonsShowVertical = false,
-      // 是否展示确定
-      showConfirm = true,
-      // 确认按钮文案
-      confirmText = '确定',
-      // 确认按钮颜色
-      confirmColor = '#3CC51F',
-      // 是否展示取消
-      showCancel = false,
-      // 取消按钮文案
-      cancelText = '取消',
-      // 取消按钮颜色
-      cancelColor = '#333'
-    } = options;
 
-    // 处理默认按钮的展示
+Component({
-    // 纵向排布确认按钮在上方
+  properties: {},
-    let showCustomBtns = false;
-    if (buttons.length === 0) {
-      if (showConfirm) {
-        buttons.push({
-          type: 'confirm',
-          text: confirmText,
-          color: confirmColor
-        });
-      }
 
-      if (showCancel) {
+  data: {
-        const cancelButton = {
+    ...defaultData,
-          type: 'cancel',
+    key: '',
-          text: cancelText,
+    show: false,
-          color: cancelColor
+    showCustomBtns: false,
-        };
+    promiseFunc: {}
-        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
-        }
-      });
-    });
   },
 
-  _handleZanDialogButtonClick(e) {
+  methods: {
-    const { currentTarget = {} } = e;
+    handleButtonClick(e) {
-    const { dataset = {} } = currentTarget;
+      const { currentTarget = {} } = e;
+      const { dataset = {} } = currentTarget;
 
-    // 获取当次弹出框的信息
+      // 获取当次弹出框的信息
-    const zanDialogData = this.data.zanDialog || {};
+      const { resolve = _f, reject = _f } = this.data.promiseFunc || {};
-    const { resolve = _f, reject = _f } = zanDialogData;
 
-    // 重置 zanDialog 里的内容
+      // 重置展示
-    this.setData({
+      this.setData({
-      zanDialog: { show: false }
+        show: false
-    });
-
-    // 自定义按钮，全部 resolve 形式返回，根据 type 区分点击按钮
-    if (zanDialogData.showCustomBtns) {
-      resolve({
-        type: dataset.type
       });
-      return;
-    }
 
-    // 默认按钮，确认为 resolve，取消为 reject
+      // 自定义按钮，全部 resolve 形式返回，根据 type 区分点击按钮
-    if (dataset.type === 'confirm') {
+      if (this.data.showCustomBtns) {
-      resolve({
+        resolve({
-        type: 'confirm'
+          type: dataset.type
-      });
+        });
-    } else {
+        return;
-      reject({
+      }
-        type: 'cancel'
+
-      });
+      // 默认按钮，确认为 resolve，取消为 reject
+      if (dataset.type === 'confirm') {
+        resolve({
+          type: 'confirm'
+        });
+      } else {
+        reject({
+          type: 'cancel'
+        });
+      }
     }
   }
-};
+});

packages/dialog/index.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "pop-manager": "../common/pop-manager/index",
+    "zan-button": "../btn/index"
+  } 
+}

packages/dialog/index.pcss

@@ -2,32 +2,12 @@
 
 /* 基础样式 */
 .zan-dialog--container {
-  position: fixed;
+  width: 80vw;
-  top: 45%;
-  left: 50%;
-  width: 80%;
-  height: 0;
   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 {
+.zan-dialog__footer--horizon .zan-dialog__button-inside {
-  flex: 1;
-
   &::after {
-    border-right-width: 1px;
+    border-left-width: 1px;
-  }
-
-  &:last-child::after {
-    border-right-width: 0;
   }
 }
 
-
+.zan-dialog__footer--vertical .zan-dialog__button-inside {
-.zan-dialog__footer--vertical .zan-dialog__button {
-  flex: 1;
-
   &::after {
-    border-bottom-width: 1px;
+    border-top-width: 1px;
-  }
-
-  &:last-child::after {
-    border-bottom-width: 0;
   }
 }

packages/dialog/index.wxml

@@ -1,22 +1,36 @@
-<template name="zan-dialog">
+<pop-manager
-  <view class="zan-dialog {{ zanDialog.show ? 'zan-dialog--show' : '' }}">
+  show="{{ show }}"
-    <view class="zan-dialog--mask"></view>
+  type="center"
-    <view class="zan-dialog--container">
+  overlay="{{ true }}"
-      <view
+>
-        wx:if="{{ zanDialog.title }}"
+  <view class="zan-dialog--container">
-        class="zan-dialog__header">{{ zanDialog.title }}</view>
+    <view
-      <view
+      wx:if="{{ title }}"
-        class="zan-dialog__content {{ zanDialog.title ? 'zan-dialog__content--title' : '' }}">{{ zanDialog.content }}</view>
+      class="zan-dialog__header"
-      <view
+    >{{ title }}</view>
-        class="zan-dialog__footer {{ zanDialog.buttonsShowVertical ? 'zan-dialog__footer--vertical' : 'zan-dialog__footer--horizon' }}">
+    <view
-        <block wx:for="{{ zanDialog.buttons }}" wx:key="{{ item.text }}-{{ item.type }}">
+      class="zan-dialog__content {{ title ? 'zan-dialog__content--title' : '' }}"
-          <button
+    >
-            class="zan-dialog__button zan-btn"
+      <text>{{ message }}</text>
-            data-type="{{ item.type }}"
+    </view>
-            catchtap="_handleZanDialogButtonClick"
+    <view
-            style="color: {{ item.color || '#333' }}">{{ item.text }}</button>
+      class="zan-dialog__footer {{ buttonsShowVertical ? 'zan-dialog__footer--vertical' : 'zan-dialog__footer--horizon' }}"
-        </block>
+    >
-      </view>
+      <block
+        wx:for="{{ buttons }}"
+        wx:key="{{ item.text }}-{{ item.type }}"
+      >
+        <zan-button
+          class="zan-dialog__button"
+          custom-class="{{ index === 0 ? 'zan-dialog__button-inside--first' : 'zan-dialog__button-inside' }}"
+          data-type="{{ item.type }}"
+          bind:btnclick="handleButtonClick"
+        >
+          <view
+            style="color: {{ item.color || '#333' }}"
+          >{{ item.text }}</view>
+        </zan-button>
+      </block>
     </view>
   </view>
-</template>
+</pop-manager>

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;

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";

packages/popup/index.pcss

@@ -1 +0,0 @@
-