docs: 补充popup文档

src/packages/popup/demo.vue

@@ -96,7 +96,7 @@
       :style="{ height: '30%' }"
       v-model:show="state.showRound"
     ></nut-popup>
-    <h2>组合弹框</h2>
+    <!-- <h2>组合弹框</h2> -->
     <!-- <nut-cell title="组合弹框" is-link @click="state.showCombination = true"></nut-cell>
     <nut-popup
       id="combination"

src/packages/popup/doc.md

@@ -16,28 +16,108 @@ app.use(Popup);
 
 ## 代码演示
 
-### 基础用法 1
+### 基础用法
 
-`Icon` 的 `name` 属性支持传入图标名称或图片链接。
+`show` 控制显示/隐藏
 
 ```html
-<nut-popup name="wifi"></nut-popup> <nut-popup name="mail"></nut-popup>
+<nut-popup :style="{ padding: '30px' }" v-model:show="show">正文</nut-popup>
+```
+
+### 弹出位置
+
+```html
+<nut-popup
+  position="top"
+  v-model:show="show"
+  :style="{ height: '20% }"
+></nut-popup>
+
+<nut-popup
+  position="left"
+  v-model:show="show"
+  :style="{ height: '100%', width: '20%' }"
+></nut-popup>
+```
+
+### 图标
+
+```html
+<nut-popup
+  position="bottom"
+  closeable
+  :style="{ height: '20%' }"
+  v-model:show="show"
+></nut-popup>
+
+<nut-popup
+  position="bottom"
+  closeable
+  close-icon-position="top-left"
+  :style="{ height: '20%' }"
+  v-model:show="show"
+></nut-popup>
+
+<nut-popup
+  position="bottom"
+  closeable
+  close-icon-position="top-left"
+  close-icon="heart"
+  :style="{ height: '20%' }"
+  v-model:show="show"
+></nut-popup>
+```
+
+### 圆角弹框
+
+```html
+<nut-popup
+  position="bottom"
+  closeable
+  round
+  :style="{ height: '30%' }"
+  v-model:show="show"
+></nut-popup>
+```
+
+### 指定挂载节点
+
+```html
+<nut-popup :style="{ padding: '30px' }" teleport="#app" v-model:show="show">app</nut-popup
 ```
 
 ## API
 
 ### Props
 
-| 参数         | 说明                             | 类型   | 默认值           |
-| ------------ | -------------------------------- | ------ | ---------------- |
-| name         | 图标名称或图片链接               | String | -                |
-| color        | 图标颜色                         | String | -                |
-| size         | 图标大小，如 `20px` `2em` `2rem` | String | -                |
-| class-prefix | 类名前缀，用于使用自定义图标     | String | `nutui-iconfont` |
-| tag          | HTML 标签                        | String | `i`              |
+| 参数                   | 说明                                                        | 类型           | 默认值      |
+| ---------------------- | ----------------------------------------------------------- | -------------- | ----------- |
+| show                   | 当前组件是否显示                                            | Boolean        | false       |
+| z-index                | 遮罩层级                                                    | String、Number | 2000        |
+| duration               | 动画时长，单位秒                                            | String、Number | 0.3         |
+| overlay-class          | 自定义遮罩类名                                              | String         | -           |
+| overlay-style          | 自定义遮罩样式                                              | CSSProperties  | -           |
+| lock-scroll            | 背景是否锁定                                                | Boolean        | false       |
+| overlay                | 是否显示遮罩                                                | Boolean        | true        |
+| close-on-click-overlay | 是否点击遮罩关闭                                            | Boolean        | true        |
+| position               | 弹出位置（top,bottom,left,right,center）                    | String         | "center"    |
+| transition             | 动画名                                                      | String         | -           |
+| style                  | 自定义弹框样式                                              | CSSProperties  | -           |
+| closeable              | 是否显示关闭按钮                                            | Boolean        | true        |
+| close-icon-position    | 关闭按钮位置（top-left,top-right,bottom-left,bottom-right） | String         | "top-right" |
+| close-icon             | 自定义 Icon                                                 | String         | "close"     |
+| destroy-on-close       | 组件销毁后是否关闭                                          | Boolean        | true        |
+| round                  | 是否显示圆角                                                | Boolean        | false       |
+| teleport               | 指定挂载节点                                                | String         | "body"      |
 
 ### Events
 
-| 事件名 | 说明           | 回调参数     |
-| ------ | -------------- | ------------ |
-| click  | 点击图标时触发 | event: Event |
+| 事件名           | 说明                   | 回调参数     |
+| ---------------- | ---------------------- | ------------ |
+| click            | 点击弹框时触发         | event: Event |
+| click-close-icon | 点击关闭图标时触发     | event: Event |
+| open             | 打开弹框时触发         | -            |
+| close            | 关闭弹框时触发         | -            |
+| opend            | 遮罩打开动画结束时触发 | event: Event |
+| closed           | 遮罩关闭动画结束时触发 | event: Event |
+| click-overlay    | 点击遮罩触发           | event: Event |

src/packages/popup/index.scss

@@ -79,7 +79,7 @@
   }
 }
 
-.popup-box {
+.nut-popup {
   position: fixed;
   max-height: 100%;
   overflow-y: auto;
@@ -146,7 +146,7 @@
   }
 }
 
-.popup-bg {
+.nut-popup-overlay {
   position: fixed;
   top: 0;
   left: 0;

src/packages/popup/index.vue

@@ -14,13 +14,7 @@
       @after-enter="onOpened"
       @after-leave="onClosed"
     >
-      <view
-        v-show="show"
-        class="popup-box"
-        :class="[`popup-${position}`, { round }]"
-        :style="popStyle"
-        @click="onClick"
-      >
+      <view v-show="show" :class="classes" :style="popStyle" @click="onClick">
         <slot v-if="state.showSlot"></slot>
         <nut-icon
           v-if="closeable"
@@ -92,7 +86,7 @@ const popupProps = {
 
   destroyOnClose: {
     type: Boolean,
-    default: false
+    default: true
   },
 
   teleport: {
@@ -139,6 +133,15 @@ export default create({
 
     const [lockScroll, unlockScroll] = useLockScroll(() => props.lockScroll);
 
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true,
+        ['round']: props.round,
+        [`popup-${props.position}`]: true
+      };
+    });
+
     const popStyle = computed(() => {
       return {
         zIndex: state.zIndex,
@@ -262,10 +265,8 @@ export default create({
       onClosed,
       state,
       popStyle,
-      componentName
+      classes
     };
-
-    // return renderOverlay();
   }
 });
 </script>

src/packages/popup/overlay/index.vue

@@ -4,13 +4,12 @@
       @touchmove.stop="touchmove"
       :style="{ animationDuration: `${duration}s`, ...overlayStyle, zIndex }"
       v-show="show"
-      class="popup-bg nut-mask"
-      :class="overlayClass"
+      :class="classes"
     ></view>
   </Transition>
 </template>
 <script lang="ts">
-import { toRefs, CSSProperties, PropType, Transition } from 'vue';
+import { CSSProperties, PropType, computed } from 'vue';
 import { createComponent } from '@/utils/create';
 const { componentName, create } = createComponent('popup-overlay');
 const overlayProps = {
@@ -52,12 +51,20 @@ export default create({
   props: overlayProps,
   emits: [],
   setup(props) {
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true,
+        ['nut-mask']: true,
+        [props.overlayClass]: true
+      };
+    });
     const touchmove = e => {
       if (props.lockScroll) {
         e.preventDefault();
       }
     };
-    return { touchmove };
+    return { classes, touchmove };
   }
 });
 </script>

src/packages/popup/overlay/overlay-manager.js

@@ -1,142 +0,0 @@
-import { createApp, h } from 'vue';
-import overlayComponent from './overlay.vue';
-
-let modalStack = [];
-let _zIndex = 2000;
-let overlay;
-
-function mountd(Component, data) {
-  const instance = createApp(Component);
-
-  instance
-    .component(Component.name, {
-      render() {
-        return h(Component.name, ...data, this.$slots.default());
-      }
-    })
-    .mount();
-  console.log(instance);
-  return instance;
-}
-const overlayManager = {
-  lockCount: 0,
-
-  get topStack() {
-    return modalStack[modalStack.length - 1];
-  },
-  getZIndex(id) {
-    if (!id) return ++_zIndex;
-    const overlay = modalStack.find(res => {
-      return res.config.id === id;
-    });
-    if (overlay) {
-      return overlay.config.zIndex;
-    } else {
-      return ++_zIndex;
-    }
-  },
-
-  updateOverlay() {
-    const { clickHandle, topStack } = overlayManager;
-    if (!overlay) {
-      overlay = mountd(overlayComponent, {
-        nativeOn: {
-          click: clickHandle
-        }
-      });
-    }
-
-    console.log(topStack.vm);
-
-    if (topStack) {
-      const { vm, config } = topStack;
-      const el = vm.ctx.$el;
-      el && el.parentNode && el.parentNode.nodeType !== 11
-        ? el.parentNode.appendChild(overlay.$el)
-        : document.body.appendChild(overlay.$el);
-
-      Object.assign(overlay, config, {
-        value: true
-      });
-    } else {
-      overlay.value = false;
-    }
-  },
-
-  //打开遮罩层
-  openModal(vm, config) {
-    const { zIndex, duration, overlayClass, overlayStyle, id } = config;
-
-    modalStack.push({
-      vm,
-      config: {
-        id,
-        zIndex,
-        duration,
-        overlayClass,
-        overlayStyle
-      }
-    });
-
-    overlayManager.updateOverlay();
-  },
-
-  clickHandle() {
-    const { topStack } = overlayManager;
-
-    //防止多次点击
-    if (modalStack.length && topStack.vm.closeOnClickOverlay) {
-      topStack.vm.$emit('click-overlay');
-      topStack.vm.close();
-    }
-  },
-
-  closeOverlay(vm) {
-    if (modalStack.length) {
-      if (overlayManager.topStack.vm === vm) {
-        modalStack.pop();
-        overlayManager.updateOverlay();
-      } else {
-        modalStack = modalStack.filter(item => item.vm !== vm);
-      }
-    }
-  }
-};
-
-const overlayProps = {
-  value: {
-    type: Boolean,
-    default: false
-  },
-  overlay: {
-    type: Boolean,
-    default: true
-  },
-  lockScroll: {
-    type: Boolean,
-    default: true
-  },
-  duration: {
-    type: Number,
-    default: 0.3
-  },
-  closeOnClickOverlay: {
-    type: Boolean,
-    default: true
-  },
-  overlayClass: {
-    type: String,
-    default: ''
-  },
-  overlayStyle: {
-    type: Object,
-    default: function() {
-      return null;
-    }
-  },
-  zIndex: {
-    type: Number
-  }
-};
-
-export { overlayManager, overlayProps };