微信小程序—史上最自由的自定义dialog，支持嵌套各种自定义布局

摘要

说到小程序dialog，属于项目最常用的控件之一，也是变化最多端的控件之一，逼不得已，只有自定义，网上很多自定义dialog，但估计很少能直接用到项目中使用的，自己写又太麻烦，故笔者为了使用方便，只对dialog的显示与隐藏方法与效果进行封装，不涉及dialog中的布局、样式及逻辑，大大减少了平时的开发工作。

使用步骤

步骤1

将文末dialog组件拷贝至项目components下

步骤2

xxx.json中引用

"hw-dialog": "../../components/dialog/dialog",

步骤3

xxx.wxml中使用

<hw-dialog show="{{dialogShow}}" bindbuttontap="closeDialog">
  //在这里添加自定义布局、样式、逻辑，如下：
  <view style="padding:60rpx;" bindtap:"xxxxxx">
    欢迎来到Demo集中营
  </view>
</hw-dialog>

步骤4

xxx.js中使用

data: {
    dialogShow: false,
  },
  openDialog: function () {
    this.setData({
      dialogShow: true
    })
  },
  closeDialog(e) {
    this.setData({
      dialogShow: false
    })
  },

效果图

体验途径

依次点击：custom系列>>>dialog&actionsheet

微信小程序—史上最自由的自定义actionsheet，支持嵌套各种自定义布局
.

dialog组件代码

dialog.js

module.exports =
  (function(modules) {
    var installedModules = {};

    function __webpack_require__(moduleId) {
      if (installedModules[moduleId]) {
        return installedModules[moduleId].exports;
      }
      var module = installedModules[moduleId] = {
        i: moduleId,
        l: false,
        exports: {}
      };
      modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
      module.l = true;
      return module.exports;
    }
    __webpack_require__.m = modules;
    __webpack_require__.c = installedModules;
    __webpack_require__.d = function(exports, name, getter) {
      if (!__webpack_require__.o(exports, name)) {
        Object.defineProperty(exports, name, {
          enumerable: true,
          get: getter
        });
      }
    };
    __webpack_require__.r = function(exports) {
      if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
        Object.defineProperty(exports, Symbol.toStringTag, {
          value: 'Module'
        });
      }
      Object.defineProperty(exports, '__esModule', {
        value: true
      });
    };
    __webpack_require__.t = function(value, mode) {
      if (mode & 1) value = __webpack_require__(value);
      if (mode & 8) return value;
      if ((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
      var ns = Object.create(null);
      __webpack_require__.r(ns);
      Object.defineProperty(ns, 'default', {
        enumerable: true,
        value: value
      });
      if (mode & 2 && typeof value != 'string')
        for (var key in value) __webpack_require__.d(ns, key, function(key) {
          return value[key];
        }.bind(null, key));
      return ns;
    };
    __webpack_require__.n = function(module) {
      var getter = module && module.__esModule ?
        function getDefault() {
          return module['default'];
        } :
        function getModuleExports() {
          return module;
        };
      __webpack_require__.d(getter, 'a', getter);
      return getter;
    };
    __webpack_require__.o = function(object, property) {
      return Object.prototype.hasOwnProperty.call(object, property);
    };
    __webpack_require__.p = "";
    return __webpack_require__(__webpack_require__.s = 20);
  })
  ({
    20:
      (function(module, exports, __webpack_require__) {

        "use strict";


        Component({
          options: {
            multipleSlots: true,
            addGlobalClass: true
          },
          properties: {
            title: {
              type: String,
              value: ''
            },
            extClass: {
              type: String,
              value: ''
            },
            maskClosable: {
              type: Boolean,
              value: true
            },
            mask: {
              type: Boolean,
              value: true
            },
            show: {
              type: Boolean,
              value: false,
              observer: '_showChange'
            },
            buttons: {
              type: Array,
              value: []
            }
          },
          data: {
            innerShow: false
          },
          ready: function ready() {
            var buttons = this.data.buttons;
            var len = buttons.length;
            buttons.forEach(function(btn, index) {
              if (len === 1) {
                btn.className = 'weui-dialog__btn_primary';
              } else if (index === 0) {
                btn.className = 'weui-dialog__btn_default';
              } else {
                btn.className = 'weui-dialog__btn_primary';
              }
            });
            this.setData({
              buttons: buttons
            });
          },

          methods: {
            buttonTap: function buttonTap(e) {
              var index = e.currentTarget.dataset.index;

              this.triggerEvent('buttontap', {
                index: index,
                item: this.data.buttons[index]
              }, {});
            },
            close: function close() {
              var data = this.data;
              if (!data.maskClosable) return;
              this.setData({
                show: false
              });
              this.triggerEvent('close', {}, {});
            },
            stopEvent: function stopEvent() {}
          }
        });
      })
  });

dialog.json

{
  "component": true
}

dialog.wxml

<view bindtap="close" class="weui-mask {{!show ? 'weui-mask_hidden' : '' }}" wx:if="{{mask}}"></view>
<view wx:if="{{show}}" bindtap="close" class="weui-dialog__wrp {{extClass}}"><view class="weui-dialog" catchtap="stopEvent"><slot></slot></view></view>

dialog.wxss

.weui-mask {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
}

.weui-mask_transparent {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

.weui-dialog__wrp {
  position: fixed;
  z-index: 5000;
  top: 16px;
  bottom: 16px;
  left: 16px;
  right: 16px;
  text-align: center;
  font-size: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

.weui-dialog__wrp .weui-dialog {
  max-height: 100%;
}

.weui-dialog {
  background-color: transparent;
  text-align: center;
  overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-height: 90%;
}


@media screen and (min-width:352px) {
  .weui-dialog {
    width: 320px;
    margin: 0 auto;
  }
}

.weui-dialog.weui-dialog_hidden {
  opacity: 0;
  transform: scale3d(1, 1, 0);
}

.weui-dialog {
  opacity: 1;
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  transition: all 0.3s ease-in;
}

.weui-mask.weui-mask_hidden {
  opacity: 0;
  transform: scale3d(1, 1, 0);
}

.weui-mask {
  opacity: 1;
  transform: scale3d(1, 1, 1);
  transition: all 0.3s ease-in;
}