feat: popup

miniprogram_dev/app.json

@@ -8,7 +8,8 @@
     "pages/basic/pages/divider/index",
     "pages/basic/pages/grid/index",
     "pages/basic/pages/overlay/index",
-    "pages/basic/pages/transition/index"
+    "pages/basic/pages/transition/index",
+    "pages/basic/pages/popup/index"
   ],
   "usingComponents": {
     "nut-icon":"./components/packages/icon/icon",
@@ -19,7 +20,8 @@
     "nut-grid":"./components/packages/grid/index",
     "nut-grid-item":"./components/packages/grid-item/index",
     "nut-overlay":"./components/packages/overlay/index",
-    "nut-transition":"./components/packages/transition/index"
+    "nut-transition":"./components/packages/transition/index",
+    "nut-popup":"./components/packages/popup/index"
   },
   "window":{
     "backgroundTextStyle":"light",

miniprogram_dev/components/index.js

@@ -82,12 +82,12 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 14);
+/******/ 	return __webpack_require__(__webpack_require__.s = 15);
 /******/ })
 /************************************************************************/
 /******/ ({
 
-/***/ 14:
+/***/ 15:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";

miniprogram_dev/components/index.json

@@ -10,7 +10,8 @@
     "nut-grid":"./packages/grid/index",
     "nut-grid-item":"./packages/grid-item/index",
     "nut-overlay":"./packages/overlay/index",
-    "nut-transition":"./packages/transition/index"
+    "nut-transition":"./packages/transition/index",
+    "nut-popup":"./packages/popup/index"
   },
   "componentGenerics": {
     "genericsTest": true

miniprogram_dev/components/lib.js

@@ -82,12 +82,12 @@ module.exports =
 /******/
 /******/
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 15);
+/******/ 	return __webpack_require__(__webpack_require__.s = 16);
 /******/ })
 /************************************************************************/
 /******/ ({
 
-/***/ 15:
+/***/ 16:
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";

miniprogram_dev/components/packages/avatar/avatar.wxss

@@ -31,21 +31,21 @@
 }
 
 .nut-avatar-large {
-  width: 120rpx;
-  height: 120rpx;
-  line-height: 120rpx;
+  width: 60px;
+  height: 60px;
+  line-height: 60px;
 }
 
 .nut-avatar-small {
-  width: 64rpx;
-  height: 64rpx;
-  line-height: 64rpx;
+  width: 32px;
+  height: 32px;
+  line-height: 32px;
 }
 
 .nut-avatar-normal {
-  width: 80rpx;
-  height: 80rpx;
-  line-height: 80rpx;
+  width: 40px;
+  height: 40px;
+  line-height: 40px;
 }
 
 .nut-avatar-round {
@@ -54,5 +54,5 @@
 }
 
 .nut-avatar-square {
-  border-radius: 10rpx;
+  border-radius: 5px;
 }

miniprogram_dev/components/packages/button/index.wxss

@@ -3,12 +3,12 @@
   display: inline-block;
   width: auto;
   flex-shrink: 0;
-  height: 76rpx;
+  height: 38px;
   box-sizing: border-box;
   margin: 0;
   padding: 0;
-  line-height: 72rpx;
-  font-size: 28rpx;
+  line-height: 36px;
+  font-size: 14px;
   text-align: center;
   cursor: pointer;
   transition: opacity 0.2s;
@@ -55,32 +55,32 @@
 .nut-button--default {
   color: rgb(102, 102, 102);
   background: #fff;
-  border: 2rpx solid rgb(204, 204, 204);
+  border: 1px solid rgb(204, 204, 204);
 }
 .nut-button--primary {
   color: #fff;
   background: linear-gradient(135deg, #fa2c19 0%, #fa6419 100%);
-  border: 2rpx solid transparent;
+  border: 1px solid transparent;
 }
 .nut-button--info {
   color: #fff;
   background: linear-gradient(315deg, rgb(73, 143, 242) 0%, rgb(73, 101, 242) 100%);
-  border: 2rpx solid transparent;
+  border: 1px solid transparent;
 }
 .nut-button--success {
   color: #fff;
   background: linear-gradient(135deg, rgb(38, 191, 38) 0%, rgb(39, 197, 48) 45%, rgb(40, 207, 63) 83%, rgb(41, 212, 70) 100%);
-  border: 2rpx solid transparent;
+  border: 1px solid transparent;
 }
 .nut-button--danger {
   color: #fff;
   background: rgb(250, 44, 25);
-  border: 2rpx solid transparent;
+  border: 1px solid transparent;
 }
 .nut-button--warning {
   color: #fff;
   background: linear-gradient(135deg, rgb(255, 158, 13) 0%, rgb(255, 167, 13) 45%, rgb(255, 182, 13) 83%, rgb(255, 190, 13) 100%);
-  border: 2rpx solid transparent;
+  border: 1px solid transparent;
 }
 .nut-button--plain {
   background: #fff;
@@ -107,28 +107,28 @@
 }
 .nut-button--large {
   width: 100%;
-  height: 96rpx;
-  line-height: 92rpx;
-  font-size: 28rpx;
+  height: 48px;
+  line-height: 46px;
+  font-size: 14px;
 }
 .nut-button--normal {
-  padding: 0 36rpx;
-  font-size: 28rpx;
+  padding: 0 18px;
+  font-size: 14px;
 }
 .nut-button--small {
-  height: 56rpx;
-  line-height: 52rpx;
-  padding: 0 24rpx;
-  font-size: 24rpx;
+  height: 28px;
+  line-height: 26px;
+  padding: 0 12px;
+  font-size: 12px;
 }
 .nut-button--small.nut-button--round {
-  border-radius: 50rpx;
+  border-radius: 25px;
 }
 .nut-button--mini {
-  height: 48rpx;
+  height: 24px;
   line-height: 1.2;
-  padding: 0 24rpx;
-  font-size: 24rpx;
+  padding: 0 12px;
+  font-size: 12px;
 }
 .nut-button--block {
   display: block;
@@ -143,7 +143,7 @@
   opacity: 0.9;
 }
 .nut-button--round {
-  border-radius: 50rpx;
+  border-radius: 25px;
 }
 .nut-button--square {
   border-radius: 0;

miniprogram_dev/components/packages/cell/cell.wxss

@@ -8,12 +8,12 @@
   position: relative;
   display: flex;
   width: 100%;
-  line-height: 40rpx;
-  padding: 26rpx 32rpx;
+  line-height: 20px;
+  padding: 13px 16px;
   background: #fff;
-  border-radius: 12rpx;
+  border-radius: 6px;
   box-shadow: 0px 1px 7px 0px rgb(237, 238, 241);
-  font-size: 28rpx;
+  font-size: 14px;
   color: #666666;
   box-sizing: border-box;
 }
@@ -21,11 +21,11 @@
   align-items: center;
 }
 .nut-cell--large {
-  font-size: 32rpx;
-  padding: 30rpx 32rpx;
+  font-size: 16px;
+  padding: 15px 16px;
 }
 .nut-cell--large .nut-cell__title-desc {
-  font-size: 28rpx;
+  font-size: 14px;
 }
 .nut-cell:last-child::after {
   border: 0 !important;
@@ -35,7 +35,7 @@
   box-sizing: border-box;
   content: " ";
   pointer-events: none;
-  right: 32rpx;
+  right: 16px;
   bottom: 0;
   left: 16px;
   transform: scaleY(0.5);
@@ -63,7 +63,7 @@
 .nut-cell__icon {
   display: flex;
   flex-direction: row;
-  margin-right: 0 8rpx 0 0rpx;
+  margin-right: 0 4px 0 0px;
 }
 .nut-cell__title {
   display: flex;
@@ -71,12 +71,12 @@
   flex: 1;
 }
 .nut-cell__title-desc {
-  font-size: 24rpx;
+  font-size: 12px;
 }
 .nut-cell__value {
   display: inline-block;
   text-align: right;
-  font-size: 28rpx;
+  font-size: 14px;
   color: #cccccc;
 }
 .nut-cell__value--alone {

miniprogram_dev/components/packages/cellgroup/index.wxss

@@ -3,25 +3,25 @@
 }
 .nut-cell-group__title {
   display: inherit;
-  padding: 0 20rpx;
+  padding: 0 10px;
   color: #909ca4;
-  font-size: 28rpx;
-  line-height: 40rpx;
+  font-size: 14px;
+  line-height: 20px;
   margin-top: 30px;
   margin-bottom: 10px;
 }
 .nut-cell-group__desc {
   display: inherit;
-  padding: 0 20rpx;
+  padding: 0 10px;
   color: #909ca4;
-  font-size: 24rpx;
-  line-height: 32rpx;
+  font-size: 12px;
+  line-height: 16px;
   margin-top: 10px;
   margin-bottom: 10px;
 }
 .nut-cell-group__warp {
   display: inherit;
-  border-radius: 12rpx;
+  border-radius: 6px;
   overflow: hidden;
   background-color: #fff;
   margin: 10px 0;

miniprogram_dev/components/packages/divider/index.wxss

@@ -1,23 +1,23 @@
 .nut-divider {
   display: flex;
   align-items: center;
-  font-size: 28rpx;
+  font-size: 14px;
   color: #909ca4;
-  margin: 32rpx 0;
+  margin: 16px 0;
 }
 .nut-divider::before, .nut-divider::after {
   content: "";
-  border: 4rpx solid currentColor;
-  border-width: 4rpx 0 0;
+  border: 2px solid currentColor;
+  border-width: 2px 0 0;
   border-color: inherit;
-  height: 4rpx;
+  height: 2px;
   flex: 1;
 }
 .nut-divider.nut-divider-center::before, .nut-divider.nut-divider-left::before, .nut-divider.nut-divider-right::before {
-  margin-right: 32rpx;
+  margin-right: 16px;
 }
 .nut-divider.nut-divider-center::after, .nut-divider.nut-divider-left::after, .nut-divider.nut-divider-right::after {
-  margin-left: 32rpx;
+  margin-left: 16px;
 }
 .nut-divider.nut-divider-left::before {
   max-width: 10%;
@@ -33,9 +33,9 @@
 }
 .nut-divider.nut-divider-vertical {
   position: relative;
-  top: 4rpx;
+  top: 2px;
   display: inline-block;
-  height: 24rpx;
+  height: 12px;
   border-left: 1px solid rgba(0, 0, 0, 0.06);
-  margin: 0 16rpx;
+  margin: 0 8px;
 }

miniprogram_dev/components/packages/grid-item/index.wxss

@@ -13,17 +13,17 @@
 }
 .nut-grid-item__text {
   color: #666666;
-  font-size: 24rpx;
+  font-size: 12px;
   line-height: 1.5;
   word-break: break-all;
-  margin: 16rpx 0 0 0;
+  margin: 8px 0 0 0;
 }
 .nut-grid-item__content {
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
   height: 100%;
-  padding: 32rpx 16rpx;
+  padding: 16px 8px;
   background: #fff;
   border: 0 solid #f5f6f7;
 }
@@ -49,19 +49,19 @@
   flex-direction: column-reverse;
 }
 .nut-grid-item__content--reverse .nut-grid-item__text {
-  margin: 0 0 16rpx;
+  margin: 0 0 8px;
 }
 .nut-grid-item__content--horizontal {
   flex-direction: row;
 }
 .nut-grid-item__content--horizontal .nut-grid-item__text {
-  margin: 0 0 0 16rpx;
+  margin: 0 0 0 8px;
 }
 .nut-grid-item__content--horizontal.nut-grid-item__content--reverse {
   flex-direction: row-reverse;
 }
 .nut-grid-item__content--horizontal.nut-grid-item__content--reverse .nut-grid-item__text {
-  margin: 0 16rpx 0 0;
+  margin: 0 8px 0 0;
 }
 .nut-grid-item__content--clickable {
   cursor: pointer;

miniprogram_dev/components/packages/icon/icon.wxss

@@ -524,9 +524,9 @@
 .nut-icon {
   display: inline-block;
   position: relative;
-  width: 40rpx;
-  height: 40rpx;
-  line-height: 40rpx;
+  width: 20px;
+  height: 20px;
+  line-height: 20px;
   text-align: right;
   --animate-duration: 1s;
   --animate-delay: 0s;
@@ -538,8 +538,8 @@
   transform: translate(-50%, -50%);
 }
 .nut-icon__img {
-  width: 40rpx;
-  height: 40rpx;
+  width: 20px;
+  height: 20px;
   object-fit: contain;
 }
 .nut-icon-loading, .nut-icon-loading1 {

miniprogram_dev/components/packages/popup/index.js

@@ -0,0 +1,217 @@
+module.exports =
+/******/ (function(modules) { // webpackBootstrap
+/******/ 	// The module cache
+/******/ 	var installedModules = {};
+/******/
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/
+/******/ 		// Check if module is in cache
+/******/ 		if(installedModules[moduleId]) {
+/******/ 			return installedModules[moduleId].exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = installedModules[moduleId] = {
+/******/ 			i: moduleId,
+/******/ 			l: false,
+/******/ 			exports: {}
+/******/ 		};
+/******/
+/******/ 		// Execute the module function
+/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
+/******/
+/******/ 		// Flag the module as loaded
+/******/ 		module.l = true;
+/******/
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/
+/******/
+/******/ 	// expose the modules object (__webpack_modules__)
+/******/ 	__webpack_require__.m = modules;
+/******/
+/******/ 	// expose the module cache
+/******/ 	__webpack_require__.c = installedModules;
+/******/
+/******/ 	// define getter function for harmony exports
+/******/ 	__webpack_require__.d = function(exports, name, getter) {
+/******/ 		if(!__webpack_require__.o(exports, name)) {
+/******/ 			Object.defineProperty(exports, name, { enumerable: true, get: getter });
+/******/ 		}
+/******/ 	};
+/******/
+/******/ 	// define __esModule on exports
+/******/ 	__webpack_require__.r = function(exports) {
+/******/ 		if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 			Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 		}
+/******/ 		Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 	};
+/******/
+/******/ 	// create a fake namespace object
+/******/ 	// mode & 1: value is a module id, require it
+/******/ 	// mode & 2: merge all properties of value into the ns
+/******/ 	// mode & 4: return value when already ns object
+/******/ 	// mode & 8|1: behave like require
+/******/ 	__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;
+/******/ 	};
+/******/
+/******/ 	// getDefaultExport function for compatibility with non-harmony modules
+/******/ 	__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;
+/******/ 	};
+/******/
+/******/ 	// Object.prototype.hasOwnProperty.call
+/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
+/******/
+/******/ 	// __webpack_public_path__
+/******/ 	__webpack_require__.p = "";
+/******/
+/******/
+/******/ 	// Load entry module and return exports
+/******/ 	return __webpack_require__(__webpack_require__.s = 14);
+/******/ })
+/************************************************************************/
+/******/ ({
+
+/***/ 0:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var _basic = __webpack_require__(1);
+
+function mapKeys(source, target, map) {
+    Object.keys(map).forEach(function (key) {
+        if (source[key]) {
+            target[map[key]] = source[key];
+        }
+    });
+}
+function NutComponent(NutOptions) {
+    var options = {};
+    mapKeys(NutOptions, options, {
+        data: 'data',
+        props: 'properties',
+        mixins: 'behaviors',
+        methods: 'methods',
+        beforeCreate: 'created',
+        created: 'attached',
+        mounted: 'ready',
+        destroyed: 'detached',
+        classes: 'externalClasses',
+        observers: 'observers'
+    });
+    // add default externalClasses
+    options.externalClasses = options.externalClasses || [];
+    options.externalClasses.push('custom-class');
+    // add default behaviors
+    options.behaviors = options.behaviors || [];
+    options.behaviors.push(_basic.basic);
+    // add relations
+    var relation = NutOptions.relation;
+
+    if (relation) {
+        options.relations = relation.relations;
+        options.behaviors.push(relation.mixin);
+    }
+    // map field to form-field behavior
+    if (NutOptions.field) {
+        options.behaviors.push('wx://form-field');
+    }
+    // add default options
+    options.options = {
+        multipleSlots: true,
+        addGlobalClass: true
+    };
+    console.log(options);
+    Component(options);
+}
+module.exports = { NutComponent: NutComponent };
+
+/***/ }),
+
+/***/ 1:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+exports.__esModule = true;
+var basic = exports.basic = Behavior({
+    methods: {
+        $emit: function $emit(name, detail, options) {
+            this.triggerEvent(name, detail, options);
+        },
+        set: function set(data) {
+            this.setData(data);
+            return new Promise(function (resolve) {
+                return wx.nextTick(resolve);
+            });
+        }
+    }
+});
+
+/***/ }),
+
+/***/ 14:
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+
+var _component = __webpack_require__(0);
+
+(0, _component.NutComponent)({
+    props: {
+        show: {
+            type: Boolean,
+            value: false
+        },
+        zIndex: {
+            type: [Number, String],
+            value: 2000
+        },
+        duration: {
+            type: [Number, String],
+            value: 300
+        },
+        popStyle: String,
+        popClass: {
+            type: String,
+            value: ''
+        },
+        round: {
+            type: Boolean,
+            value: false
+        },
+        overlay: {
+            type: Boolean,
+            value: true
+        }
+    },
+    methods: {
+        onClick: function onClick() {
+            this.$emit('click');
+        }
+    }
+});
+
+/***/ })
+
+/******/ });
+//# sourceMappingURL=index.js.map

miniprogram_dev/components/packages/popup/index.json

@@ -0,0 +1,8 @@
+{
+    "component": true,
+    "usingComponents": {
+      "nut-transition": "../transition/index",
+      "nut-overlay":"../overlay/index",
+      "nut-icon":"../icon/icon"
+    }
+  }

miniprogram_dev/components/packages/popup/index.wxml

@@ -0,0 +1,28 @@
+<wxs src="./index.wxs" module="computed" />
+
+<nut-overlay
+  show="{{ overlay && show }}"
+  zIndex="{{zIndex}}"
+  duration="{{duration}}"
+  />
+
+<nut-transition 
+  name="fade" 
+  show='{{ show }}' 
+  custom-class="nut-overlay custom-class" 
+  custom-style='z-index:{{zIndex}};{{overlayStyle}}'   
+  bind:tap='onClick'
+  duration='{{duration}}'> 
+    <view wx:if="{{show}}" class="{{computed.classes({position,popClass,round})}}" style="z-index:{{zIndex}};transitionDuration:{{duration}}s;{{popStyle}}" >
+        
+        <slot></slot>
+        <view
+          wx:if="{{show}}"
+          bindtap="onClickCloseIcon"
+          class="nut-popup__close-icon"
+        >
+          <!-- <nut-icon name='close'></nut-icon> -->
+        </view>
+      </view>
+
+</nut-transition>

miniprogram_dev/components/packages/popup/index.wxs

@@ -0,0 +1,37 @@
+/* eslint-disable */
+var pxCheck = require('../wxs/pxCheck.wxs');
+var style = require('../wxs/style.wxs');
+
+
+
+function Classes(data) {
+
+    var prefixCls = 'nut-popup'
+
+    var classes = [prefixCls,prefixCls + '--' + data.position,data.popClass]
+
+    if (data.round) {
+        classes.push('round')
+    }
+
+    if (data.position === 'bottom') {
+        classes.push(prefixCls + '--' + data.position + '--safebottom')
+    }
+
+
+    return classes.join(' ');
+}
+
+function Styled(data) {
+
+    var styley = {};
+    styley.zIndex = data.zIndex;
+    styley.transitionDuration = data.duration+'s';
+
+    return style([styley]);
+}
+
+module.exports = {
+    classes: Classes,
+    styled: Styled
+};

miniprogram_dev/components/packages/popup/index.wxss

@@ -0,0 +1,104 @@
+.nut-popup-slide-center-enter-active, .nut-popup-slide-center-leave-active {
+  transition-property: opacity;
+  transition-timing-function: ease;
+}
+.nut-popup-slide-center-enter-from, .nut-popup-slide-center-leave-to {
+  opacity: 0;
+}
+.nut-popup-slide-top-enter-from, .nut-popup-slide-top-leave-active {
+  transform: translate(0, -100%);
+}
+.nut-popup-slide-right-enter-from, .nut-popup-slide-right-leave-active {
+  transform: translate(100%, 0);
+}
+.nut-popup-slide-bottom-enter-from, .nut-popup-slide-bottom-leave-active {
+  transform: translate(0, 100%);
+}
+.nut-popup-slide-left-enter-from, .nut-popup-slide-left-leave-active {
+  transform: translate(-100%, 0);
+}
+
+.nut-popup--center {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.nut-popup--center.round {
+  border-radius: 20px;
+}
+
+.nut-popup--bottom {
+  bottom: 0;
+  left: 0;
+  width: 100%;
+}
+.nut-popup--bottom.round {
+  border-radius: 20px 20px 0 0;
+}
+.nut-popup--bottom--safebottom {
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+.nut-popup--right {
+  top: 0;
+  right: 0;
+}
+.nut-popup--right.round {
+  border-radius: 20px 0 0 20px;
+}
+
+.nut-popup--left {
+  top: 0;
+  left: 0;
+}
+.nut-popup--left.round {
+  border-radius: 0 20px 20px 0;
+}
+
+.nut-popup--top {
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+.nut-popup--top.round {
+  border-radius: 0 0 20px 20px;
+}
+
+.nut-popup {
+  position: fixed;
+  max-height: 100%;
+  overflow-y: auto;
+  background-color: #fff;
+  -webkit-overflow-scrolling: touch;
+}
+.nut-popup__close-icon {
+  position: absolute !important;
+  z-index: 1;
+  color: #969799;
+  font-size: 18px;
+  cursor: pointer;
+  width: 30px;
+  height: 30px;
+  line-height: 30px;
+  text-align: center;
+}
+.nut-popup__close-icon:active {
+  opacity: 0.7;
+}
+.nut-popup__close-icon--top-left {
+  top: 16px;
+  left: 16px;
+}
+.nut-popup__close-icon--top-right {
+  top: 16px;
+  right: 16px;
+}
+.nut-popup__close-icon--bottom-left {
+  bottom: 16px;
+  left: 16px;
+}
+.nut-popup__close-icon--bottom-right {
+  right: 16px;
+  bottom: 16px;
+}

miniprogram_dev/nutui.config.js

@@ -82,6 +82,17 @@ module.exports = [
           "desc": "动画",
           "author": ""
         },
+        {
+          "version": "3.0.0",
+          "name": "Popup",
+          "taro": true,
+          "sort": 3,
+          "cName": "弹出层",
+          "type": "component",
+          "show": true,
+          "desc": "弹出层",
+          "author": ""
+        },
       ]
     }
   ]

miniprogram_dev/pages/basic/pages/popup/index.js

@@ -0,0 +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/popup/index.json

@@ -0,0 +1,5 @@
+
+{
+    "usingComponents": {}
+}
+  

miniprogram_dev/pages/basic/pages/popup/index.wxml

@@ -0,0 +1,36 @@
+<view class="demo">
+    <h2>基础用法</h2>
+
+    <nut-cell title="展示弹出层"  bindtap='onClickShow'></nut-cell>
+    <nut-popup pop-style="padding:'50px 30px'" show='{{ show }}' bind:click="onClickHide">正文</nut-popup>
+
+
+    <!-- <nut-cell>
+      <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/popup/index.wxss

@@ -0,0 +1,27 @@
+.demo-button-row {
+    margin-bottom: 20px;
+}
+
+.demo-button-row2 {
+    margin-bottom: 10px;
+}
+
+.demo-button-row3{
+    margin-bottom: 10px;
+    display:block
+}
+.nut-button {
+    margin-right: 15px;
+
+}
+
+
+.block {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    width: 100px;
+    height: 100px;
+    margin: -50px 0 0 -50px;
+    background-color: #1989fa;
+}

readmey.md

@@ -0,0 +1,2 @@
+# vant
+基础 48 个 业务 4 个

src/index.json

@@ -10,7 +10,8 @@
     "nut-grid":"./packages/grid/index",
     "nut-grid-item":"./packages/grid-item/index",
     "nut-overlay":"./packages/overlay/index",
-    "nut-transition":"./packages/transition/index"
+    "nut-transition":"./packages/transition/index",
+    "nut-popup":"./packages/popup/index"
   },
   "componentGenerics": {
     "genericsTest": true

src/packages/popup/index.json

@@ -0,0 +1,8 @@
+{
+    "component": true,
+    "usingComponents": {
+      "nut-transition": "../transition/index",
+      "nut-overlay":"../overlay/index",
+      "nut-icon":"../icon/icon"
+    }
+  }

src/packages/popup/index.scss

@@ -0,0 +1,127 @@
+@import '../../variables.scss';
+
+.nut-popup-slide {
+  &-center-enter-active,
+  &-center-leave-active {
+    transition-property: opacity;
+    transition-timing-function: ease;
+  }
+
+  &-center-enter-from,
+  &-center-leave-to {
+    opacity: 0;
+  }
+
+  &-top-enter-from,
+  &-top-leave-active {
+    transform: translate(0, -100%);
+  }
+
+  &-right-enter-from,
+  &-right-leave-active {
+    transform: translate(100%, 0);
+  }
+
+  &-bottom-enter-from,
+  &-bottom-leave-active {
+    transform: translate(0, 100%);
+  }
+
+  &-left-enter-from,
+  &-left-leave-active {
+    transform: translate(-100%, 0);
+  }
+}
+
+.nut-popup--center {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  &.round {
+    border-radius: $popup-border-radius;
+  }
+}
+
+.nut-popup--bottom {
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  &.round {
+    border-radius: $popup-border-radius $popup-border-radius 0 0;
+  }
+  &--safebottom {
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+}
+
+.nut-popup--right {
+  top: 0;
+  right: 0;
+
+  &.round {
+    border-radius: $popup-border-radius 0 0 $popup-border-radius;
+  }
+}
+
+.nut-popup--left {
+  top: 0;
+  left: 0;
+
+  &.round {
+    border-radius: 0 $popup-border-radius $popup-border-radius 0;
+  }
+}
+
+.nut-popup--top {
+  top: 0;
+  left: 0;
+  width: 100%;
+
+  &.round {
+    border-radius: 0 0 $popup-border-radius $popup-border-radius;
+  }
+}
+
+.nut-popup {
+  position: fixed;
+  max-height: 100%;
+  overflow-y: auto;
+  background-color: $white;
+  -webkit-overflow-scrolling: touch;
+  &__close-icon {
+    position: absolute !important;
+    z-index: 1;
+    color: #969799;
+    font-size: 18px;
+    cursor: pointer;
+    width: 30px;
+    height: 30px;
+    line-height: 30px;
+    text-align: center;
+
+    &:active {
+      opacity: 0.7;
+    }
+
+    &--top-left {
+      top: $popup-close-icon-margin;
+      left: $popup-close-icon-margin;
+    }
+
+    &--top-right {
+      top: $popup-close-icon-margin;
+      right: $popup-close-icon-margin;
+    }
+
+    &--bottom-left {
+      bottom: $popup-close-icon-margin;
+      left: $popup-close-icon-margin;
+    }
+
+    &--bottom-right {
+      right: $popup-close-icon-margin;
+      bottom: $popup-close-icon-margin;
+    }
+  }
+}

src/packages/popup/index.ts

@@ -0,0 +1,37 @@
+import { NutComponent } from './../../common/component.ts'
+
+NutComponent({
+  props: {
+    show: {
+      type: Boolean,
+      value: false
+    },
+    zIndex: {
+      type: [Number, String],
+      value: 2000
+    },
+    duration: {
+      type: [Number, String],
+      value: 300
+    },
+    popStyle: String,
+    popClass: {
+      type: String,
+      value: ''
+    },
+    round: {
+      type: Boolean,
+      value: false
+    },
+    overlay: {
+      type: Boolean,
+      value: true
+    },
+  },
+
+  methods: {
+    onClick(){
+      this.$emit('click');
+    }
+  },
+});

src/packages/popup/index.wxml

@@ -0,0 +1,28 @@
+<wxs src="./index.wxs" module="computed" />
+
+<nut-overlay
+  show="{{ overlay && show }}"
+  zIndex="{{zIndex}}"
+  duration="{{duration}}"
+  />
+
+<nut-transition 
+  name="fade" 
+  show='{{ show }}' 
+  custom-class="nut-overlay custom-class" 
+  custom-style='z-index:{{zIndex}};{{overlayStyle}}'   
+  bind:tap='onClick'
+  duration='{{duration}}'> 
+    <view wx:if="{{show}}" class="{{computed.classes({position,popClass,round})}}" style="z-index:{{zIndex}};transitionDuration:{{duration}}s;{{popStyle}}" >
+        
+        <slot></slot>
+        <view
+          wx:if="{{show}}"
+          bindtap="onClickCloseIcon"
+          class="nut-popup__close-icon"
+        >
+          <!-- <nut-icon name='close'></nut-icon> -->
+        </view>
+      </view>
+
+</nut-transition>

src/packages/popup/index.wxs

@@ -0,0 +1,37 @@
+/* eslint-disable */
+var pxCheck = require('../wxs/pxCheck.wxs');
+var style = require('../wxs/style.wxs');
+
+
+
+function Classes(data) {
+
+    var prefixCls = 'nut-popup'
+
+    var classes = [prefixCls,prefixCls + '--' + data.position,data.popClass]
+
+    if (data.round) {
+        classes.push('round')
+    }
+
+    if (data.position === 'bottom') {
+        classes.push(prefixCls + '--' + data.position + '--safebottom')
+    }
+
+
+    return classes.join(' ');
+}
+
+function Styled(data) {
+
+    var styley = {};
+    styley.zIndex = data.zIndex;
+    styley.transitionDuration = data.duration+'s';
+
+    return style([styley]);
+}
+
+module.exports = {
+    classes: Classes,
+    styled: Styled
+};

tools/demo/app.json

@@ -8,7 +8,8 @@
     "pages/basic/pages/divider/index",
     "pages/basic/pages/grid/index",
     "pages/basic/pages/overlay/index",
-    "pages/basic/pages/transition/index"
+    "pages/basic/pages/transition/index",
+    "pages/basic/pages/popup/index"
   ],
   "usingComponents": {
     "nut-icon":"./components/packages/icon/icon",
@@ -19,7 +20,8 @@
     "nut-grid":"./components/packages/grid/index",
     "nut-grid-item":"./components/packages/grid-item/index",
     "nut-overlay":"./components/packages/overlay/index",
-    "nut-transition":"./components/packages/transition/index"
+    "nut-transition":"./components/packages/transition/index",
+    "nut-popup":"./components/packages/popup/index"
   },
   "window":{
     "backgroundTextStyle":"light",

tools/demo/nutui.config.js

@@ -82,6 +82,17 @@ module.exports = [
           "desc": "动画",
           "author": ""
         },
+        {
+          "version": "3.0.0",
+          "name": "Popup",
+          "taro": true,
+          "sort": 3,
+          "cName": "弹出层",
+          "type": "component",
+          "show": true,
+          "desc": "弹出层",
+          "author": ""
+        },
       ]
     }
   ]

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

@@ -0,0 +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/popup/index.json

@@ -0,0 +1,5 @@
+
+{
+    "usingComponents": {}
+}
+  

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

@@ -0,0 +1,36 @@
+<view class="demo">
+    <h2>基础用法</h2>
+
+    <nut-cell title="展示弹出层"  bindtap='onClickShow'></nut-cell>
+    <nut-popup pop-style="padding:'50px 30px'" show='{{ show }}' bind:click="onClickHide">正文</nut-popup>
+
+
+    <!-- <nut-cell>
+      <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/popup/index.wxss

@@ -0,0 +1,27 @@
+.demo-button-row {
+    margin-bottom: 20px;
+}
+
+.demo-button-row2 {
+    margin-bottom: 10px;
+}
+
+.demo-button-row3{
+    margin-bottom: 10px;
+    display:block
+}
+.nut-button {
+    margin-right: 15px;
+
+}
+
+
+.block {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    width: 100px;
+    height: 100px;
+    margin: -50px 0 0 -50px;
+    background-color: #1989fa;
+}