完善文档

Author: zepang

docs/.vuepress/components/modal/index.vue

@@ -1,17 +1,26 @@
 <template>
-  <transition name="fade">
-    <div class="modal-wrapper" v-if="isShow">
-      <div class="modal-mask"></div>
-      <div class="modal-main" :style="styles" v-click-outside="hide">
-        <slot></slot>
+  <div>
+    <transition name="fade-overlay">
+      <div class="lai-modal-overlay" v-if="overlay && isShow"></div>
+    </transition>
+    <transition name="fade-modal">
+      <div class="lai-modal" v-if="isShow" v-click-outside="hide" style="min-width: 560px; min-height: 280px;">
+        <button class="modal-close close-button" @click="hide">x</button>
+        <div class="modal-content">
+          <slot></slot>
+        </div>
       </div>
-    </div>
-  </transition>
+    </transition>
+  </div>
 </template>
 <script>
 import clickOutside from '../../directives/click-outside'
 export default {
   props: {
+    overlay: {
+      type: Boolean,
+      default: true
+    },
     value: {
       type: Boolean,
       default: false
@@ -23,7 +32,7 @@ export default {
   },
   data () {
     return {
-      isShow: this.value
+      isShow: this.value,
     }
   },
   directives: {
@@ -46,6 +55,7 @@ export default {
 </script>
 
 <style lang="less" scoped>
+
 .modal-wrapper {
   position: absolute;
   top: 0;
@@ -79,5 +89,77 @@ export default {
     box-shadow: 0px 0px 6px rgba(0, 0, 0, .1);
   }
 }
+
+.modal-close {
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 12px;
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  padding: 5px 7px 7px;
+  cursor: pointer;
+  color: #fff;
+  border: 0;
+  outline: none;
+  background: #e74c3c;
+  &:hover {
+    background: #c0392b;
+  }
+}
+
+.lai-modal-overlay {
+  position: fixed;
+  will-change: transform;
+  z-index: 9999;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.65);
+}
+
+.lai-modal {
+  position: absolute;
+  z-index: 10000;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  max-width: 80vw;
+  padding: 30px 20px;
+  border-radius: 4px;
+  background-color: #fff;
+  &.modal-anchored {
+    top: 2vh;
+    transform: translate(-50%, 0);
+  }
+}
+
+.fade-overlay-enter, .fade-overlay-leave-to {
+  display: block;
+  opacity: 0;
+}
+.fade-overlay-enter-active, .fade-overlay-leave-active {
+  transition: 500ms opacity 500ms ease;
+}
+.fade-overlay-enter-to, .fade-overlay-leave {
+  display: block;
+  opacity: 1;
+}
+
+.fade-modal-enter, .fade-modal-leave-to {
+  top: -300vh;
+}
+.fade-modal-enter-active {
+  transition: 500ms top 500ms ease;
+}
+.fade-modal-leave-active {
+  transition: 500ms top ease;
+}
+.fade-modal-enter-to, .fade-modal-leave {
+  top: 50%;
+  opacity: 1;
+}
 </style>