feat: overlay

miniprogram_dev/components/packages/button/index.js

@@ -221,8 +221,8 @@ var _component = __webpack_require__(0);
     },
     methods: {
         handleClick: function handleClick() {
-            if (!this.props.loading && !this.props.disabled) {
-                this.$emit('click', event);
+            if (!this.data.loading && !this.data.disabled) {
+                this.$emit('click');
             }
         }
     }

miniprogram_dev/components/packages/overlay/index.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 12);
+/******/ 	return __webpack_require__(__webpack_require__.s = 13);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -168,7 +168,7 @@ var basic = exports.basic = Behavior({
 
 /***/ }),
 
-/***/ 12:
+/***/ 13:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
@@ -180,31 +180,23 @@ var _component = __webpack_require__(0);
     props: {
         show: {
             type: Boolean,
-            default: false
+            value: false
         },
         zIndex: {
             type: [Number, String],
-            default: 2000
+            value: 2000
         },
         duration: {
             type: [Number, String],
-            default: 0.3
+            value: 300
         },
-        overlayClass: {
-            type: String,
-            default: ''
-        },
-        lockScroll: {
-            type: Boolean,
-            default: false
-        },
-        overlayStyle: Object,
-        closeOnClickOverlay: {
-            type: Boolean,
-            default: true
-        }
+        overlayStyle: String
     },
-    methods: {}
+    methods: {
+        onClick: function onClick() {
+            this.$emit('click');
+        }
+    }
 });
 
 /***/ })

miniprogram_dev/components/packages/overlay/index.json

@@ -1,4 +1,6 @@
 {
     "component": true,
-    "usingComponents": {}
+    "usingComponents": {
+      "nut-transition": "../transition/index"
+    }
   }

miniprogram_dev/components/packages/overlay/index.wxml

@@ -1,11 +1,11 @@
 <!-- <wxs src="./index.wxs" module="computed" /> -->
 
-<!-- <Transition name="overlay-fade"> -->
-    <!-- <view :class="classes" @touchmove.stop="touchmove" @click="onClick" :style="style" v-show="visible">
-      <slot></slot>
-    </view> -->
-<!-- </Transition> -->
-
-
-
-<view ></view>
+<nut-transition 
+  name="fade" 
+  show='{{ show }}' 
+  custom-class="nut-overlay custom-class" 
+  custom-style='z-index:{{zIndex}};{{overlayStyle}}'   
+  bind:tap='onClick'
+  duration='{{duration}}'> 
+    <slot></slot>
+</nut-transition>

miniprogram_dev/components/packages/transition/index.js

@@ -82,7 +82,7 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 13);
+/******/ 	return __webpack_require__(__webpack_require__.s = 12);
 /******/ })
 /************************************************************************/
 /******/ ({
@@ -168,7 +168,7 @@ var basic = exports.basic = Behavior({
 
 /***/ }),
 
-/***/ 13:
+/***/ 12:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";

miniprogram_dev/components/packages/transition/index.wxml

@@ -1,7 +1,7 @@
 <wxs src="./index.wxs" module="computed" />
 <view 
     wx:if='{{ inited }}' 
-    class="nut-transition block {{ classes }}"
+    class="nut-transition custom-class {{ classes }}"
     style="{{ computed.styled({ currentDuration, display, customStyle }) }}">
     <slot />
 </view>

miniprogram_dev/package.json

@@ -3,4 +3,4 @@
 		"gulp-replace": "^1.1.3",
 		"miniprogram-computed": "^4.3.8"
 	}
-}
+}

miniprogram_dev/pages/basic/pages/overlay/index.js

@@ -1,5 +1,48 @@
 
 
 Component({
-  
+    data:{
+        show:false,
+        contentShow: false,
+        styleShow:false,
+        timeShow:false
+    },
+
+    methods: {
+        onClickShow() {
+            this.trigger(true);
+        },
+
+        onClickHide(){
+            this.trigger(false);
+        },
+
+        onClickContentShow(){
+            this.setData({ contentShow:true });
+        },
+
+        onClickContentHide(){
+            this.setData({ contentShow:false });
+        },
+
+        onClicStyleShow(){
+            this.setData({ styleShow:true });
+        },
+
+        onClicStyleHide(){
+            this.setData({ styleShow:false });
+        },
+
+        onClickTimeShow(){
+            this.setData({ timeShow:true });
+        },
+
+        onClickTimeHide(){
+            this.setData({ timeShow:false });
+        },
+
+        trigger(tag){
+            this.setData({ show:tag });
+        }
+    }
 })

miniprogram_dev/pages/basic/pages/overlay/index.wxml

@@ -1,8 +1,31 @@
 <view class="demo">
     <h2>基础用法</h2>
     <nut-cell>
-      <nut-button type="primary" >显示遮罩层</nut-button>
-      <nut-overlay></nut-overlay>
+      <nut-button type="primary" bindtap='onClickShow' >显示遮罩层</nut-button>
     </nut-cell>
-    
+
+    <nut-overlay show='{{ show }}' bind:click="onClickHide"></nut-overlay>
+
+    <h2>遮罩样式</h2>
+     <nut-cell>
+      <nut-button type="primary" bindtap='onClicStyleShow'  >遮罩样式</nut-button>
+    </nut-cell>
+    <nut-overlay show='{{ styleShow }}' bind:click="onClicStyleHide" overlay-style="background: rgba(0, 0, 0, .2)"></nut-overlay>
+
+    <h2>设置动画时间</h2>
+     <nut-cell>
+      <nut-button type="primary" bindtap='onClickTimeShow'  >设置动画时间</nut-button>
+    </nut-cell>
+    <nut-overlay show='{{ timeShow }}' bind:click="onClickTimeHide" duration='1000'></nut-overlay>
+
+    <h2>嵌套内容</h2>
+    <nut-cell>
+      <nut-button type="primary" bindtap='onClickContentShow' >嵌入内容</nut-button>
+    </nut-cell>
+
+    <nut-overlay show='{{ contentShow }}' bind:click="onClickContentHide" custom-class='deno'>
+       <view class='block'></view>
+    </nut-overlay>
+
+  
 </view>

miniprogram_dev/pages/basic/pages/overlay/index.wxss

@@ -14,3 +14,14 @@
     margin-right: 15px;
 
 }
+
+
+.block {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    width: 100px;
+    height: 100px;
+    margin: -50px 0 0 -50px;
+    background-color: #1989fa;
+}

miniprogram_dev/pages/basic/pages/transition/index.wxml

@@ -13,7 +13,7 @@
     <nut-cell title="Custom" bindtap="onClickCustom"></nut-cell>
 
 
-    <nut-transition show='{{ amishow }}' name="{{ name }}"></nut-transition>
+    <nut-transition show='{{ amishow }}' name="{{ name }}" custom-class="block"></nut-transition>
 
     <nut-transition
         show="{{ showCustom }}"

src/packages/button/index.ts

@@ -47,8 +47,8 @@ NutComponent({
 
   methods: {
     handleClick() {
-      if (!this.props.loading && !this.props.disabled) {
-        this.$emit('click', event);
+      if (!this.data.loading && !this.data.disabled) {
+        this.$emit('click');
       }
     },
   },

src/packages/overlay/index.json

@@ -1,4 +1,6 @@
 {
     "component": true,
-    "usingComponents": {}
+    "usingComponents": {
+      "nut-transition": "../transition/index"
+    }
   }

src/packages/overlay/index.ts

@@ -4,32 +4,22 @@ NutComponent({
   props: {
     show: {
       type: Boolean,
-      default: false
+      value: false
     },
     zIndex: {
       type: [Number, String],
-      default: 2000
+      value: 2000
     },
     duration: {
       type: [Number, String],
-      default: 0.3
+      value: 300
     },
-    overlayClass: {
-      type: String,
-      default: ''
-    },
-    lockScroll: {
-      type: Boolean,
-      default: false
-    },
-    overlayStyle: Object,
-    closeOnClickOverlay: {
-      type: Boolean,
-      default: true
-    }
+    overlayStyle: String,
   },
 
   methods: {
-    
+    onClick(){
+      this.$emit('click');
+    }
   },
 });

src/packages/overlay/index.wxml

@@ -1,11 +1,11 @@
 <!-- <wxs src="./index.wxs" module="computed" /> -->
 
-<!-- <Transition name="overlay-fade"> -->
-    <!-- <view :class="classes" @touchmove.stop="touchmove" @click="onClick" :style="style" v-show="visible">
-      <slot></slot>
-    </view> -->
-<!-- </Transition> -->
-
-
-
-<view ></view>
+<nut-transition 
+  name="fade" 
+  show='{{ show }}' 
+  custom-class="nut-overlay custom-class" 
+  custom-style='z-index:{{zIndex}};{{overlayStyle}}'   
+  bind:tap='onClick'
+  duration='{{duration}}'> 
+    <slot></slot>
+</nut-transition>

src/packages/transition/index.wxml

@@ -1,7 +1,7 @@
 <wxs src="./index.wxs" module="computed" />
 <view 
     wx:if='{{ inited }}' 
-    class="nut-transition block {{ classes }}"
+    class="nut-transition custom-class {{ classes }}"
     style="{{ computed.styled({ currentDuration, display, customStyle }) }}">
     <slot />
 </view>

tools/demo/pages/basic/pages/overlay/index.js

@@ -1,5 +1,48 @@
 
 
 Component({
-  
+    data:{
+        show:false,
+        contentShow: false,
+        styleShow:false,
+        timeShow:false
+    },
+
+    methods: {
+        onClickShow() {
+            this.trigger(true);
+        },
+
+        onClickHide(){
+            this.trigger(false);
+        },
+
+        onClickContentShow(){
+            this.setData({ contentShow:true });
+        },
+
+        onClickContentHide(){
+            this.setData({ contentShow:false });
+        },
+
+        onClicStyleShow(){
+            this.setData({ styleShow:true });
+        },
+
+        onClicStyleHide(){
+            this.setData({ styleShow:false });
+        },
+
+        onClickTimeShow(){
+            this.setData({ timeShow:true });
+        },
+
+        onClickTimeHide(){
+            this.setData({ timeShow:false });
+        },
+
+        trigger(tag){
+            this.setData({ show:tag });
+        }
+    }
 })

tools/demo/pages/basic/pages/overlay/index.wxml

@@ -1,8 +1,31 @@
 <view class="demo">
     <h2>基础用法</h2>
     <nut-cell>
-      <nut-button type="primary" >显示遮罩层</nut-button>
-      <nut-overlay></nut-overlay>
+      <nut-button type="primary" bindtap='onClickShow' >显示遮罩层</nut-button>
     </nut-cell>
-    
+
+    <nut-overlay show='{{ show }}' bind:click="onClickHide"></nut-overlay>
+
+    <h2>遮罩样式</h2>
+     <nut-cell>
+      <nut-button type="primary" bindtap='onClicStyleShow'  >遮罩样式</nut-button>
+    </nut-cell>
+    <nut-overlay show='{{ styleShow }}' bind:click="onClicStyleHide" overlay-style="background: rgba(0, 0, 0, .2)"></nut-overlay>
+
+    <h2>设置动画时间</h2>
+     <nut-cell>
+      <nut-button type="primary" bindtap='onClickTimeShow'  >设置动画时间</nut-button>
+    </nut-cell>
+    <nut-overlay show='{{ timeShow }}' bind:click="onClickTimeHide" duration='1000'></nut-overlay>
+
+    <h2>嵌套内容</h2>
+    <nut-cell>
+      <nut-button type="primary" bindtap='onClickContentShow' >嵌入内容</nut-button>
+    </nut-cell>
+
+    <nut-overlay show='{{ contentShow }}' bind:click="onClickContentHide" custom-class='deno'>
+       <view class='block'></view>
+    </nut-overlay>
+
+  
 </view>

tools/demo/pages/basic/pages/overlay/index.wxss

@@ -14,3 +14,14 @@
     margin-right: 15px;
 
 }
+
+
+.block {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    width: 100px;
+    height: 100px;
+    margin: -50px 0 0 -50px;
+    background-color: #1989fa;
+}

tools/demo/pages/basic/pages/transition/index.wxml

@@ -13,7 +13,7 @@
     <nut-cell title="Custom" bindtap="onClickCustom"></nut-cell>
 
 
-    <nut-transition show='{{ amishow }}' name="{{ name }}"></nut-transition>
+    <nut-transition show='{{ amishow }}' name="{{ name }}" custom-class="block"></nut-transition>
 
     <nut-transition
         show="{{ showCustom }}"