init

fuintUniapp/components/pop-manager/index.js

@@ -0,0 +1,31 @@
+'use strict';
+
+Component({
+  properties: {
+    show: {
+      type: Boolean,
+      value: false
+    },
+    // 是否有遮罩层
+    overlay: {
+      type: Boolean,
+      value: true
+    },
+    // 遮罩层是否会显示
+    showOverlay: {
+      type: Boolean,
+      value: true
+    },
+    // 内容从哪个方向出，可选 center top bottom left right
+    type: {
+      type: String,
+      value: 'center'
+    }
+  },
+
+  methods: {
+    handleMaskClick: function handleMaskClick() {
+      this.triggerEvent('clickmask', {});
+    }
+  }
+});

fuintUniapp/components/pop-manager/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

fuintUniapp/components/pop-manager/index.wxml

@@ -0,0 +1,12 @@
+<view
+  class="pop pop--{{ type }} {{ show ? 'pop--show' : '' }}"
+>
+  <view 
+    wx:if="{{ overlay }}"
+    class="pop__mask {{ showOverlay ? '' : 'pop__mask--hide' }}"
+    bindtap="handleMaskClick"
+  ></view>
+  <view class="pop__container">
+    <slot></slot>
+  </view>
+</view>

fuintUniapp/components/pop-manager/index.wxss

@@ -0,0 +1 @@
+.pop{visibility:hidden}.pop--show{visibility:visible}.pop__mask{position:fixed;top:0;left:0;right:0;bottom:0;z-index:14;background:rgba(0,0,0,.5);display:none}.pop__mask--hide{background:0 0}.pop__container{position:fixed;left:50%;top:50%;-webkit-transform:translate3d(-50%,-50%,0);transform:translate3d(-50%,-50%,0);-webkit-transform-origin:center;transform-origin:center;-webkit-transition:all .2s ease;transition:all .2s ease;z-index:15;opacity:0}.pop--show .pop__container{opacity:1}.pop--show .pop__mask{display:block}.pop--left .pop__container{left:0;top:50%;-webkit-transform:translate3d(-100%,-50%,0);transform:translate3d(-100%,-50%,0)}.pop--show.pop--left .pop__container{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.pop--right .pop__container{right:0;top:50%;left:auto;-webkit-transform:translate3d(100%,-50%,0);transform:translate3d(100%,-50%,0)}.pop--show.pop--right .pop__container{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}.pop--bottom .pop__container{top:auto;left:50%;bottom:0;-webkit-transform:translate3d(-50%,100%,0);transform:translate3d(-50%,100%,0)}.pop--show.pop--bottom .pop__container{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}.pop--top .pop__container{top:0;left:50%;-webkit-transform:translate3d(-50%,-100%,0);transform:translate3d(-50%,-100%,0)}.pop--show.pop--top .pop__container{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}