增加基础弹窗组件

src/components/basic/popup/index.vue

+<template>
+  <block v-if="visible">
+    <view
+      v-if="mask !== 'none'"
+      class="base-popup-mask"
+      :style="{ 'background-color': mask, 'z-index': zIndex }"
+      @click="tapMask"
+    ></view>
+    <view class="base-popup-wrap" :class="position" :style="{ 'z-index': zIndex + 1 }">
+      <view class="base-popup" :class="currClass" :style="{ transition: transition }">
+        <slot></slot>
+      </view>
+    </view>
+  </block>
+</template>
+
+<script>
+const POSITION_LIST = ['center', 'top', 'bottom', 'left', 'right']
+
+export default {
+  props: {
+    // 弹窗的显示与隐藏
+    show: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * 蒙层颜色
+     * none - 不显示蒙层
+     */
+    mask: {
+      type: String,
+      default: 'rgba(0, 0, 0, 0.6)',
+    },
+    // 是否点击蒙层关闭弹窗
+    closeOnTapMask: {
+      type: Boolean,
+      default: true,
+    },
+    /**
+     * 弹窗显示的位置
+     * 可取值：center，top，bottom，left，right
+     */
+    position: {
+      type: String,
+      default: 'center',
+      validator(val) {
+        return POSITION_LIST.includes(val)
+      },
+    },
+    /**
+     * 过渡动画
+     * none - 无动画
+     */
+    transition: {
+      type: String,
+      default: 'all 0.3s',
+    },
+    // 动画时间，单位毫秒(ms)
+    duration: {
+      type: Number,
+      default: 300,
+    },
+    // 弹窗层级
+    zIndex: {
+      type: Number,
+      default: 100,
+    },
+  },
+  data() {
+    return {
+      visible: false,
+      currClass: '',
+    }
+  },
+  watch: {
+    show: {
+      handler(val) {
+        if (this.transition && this.transition !== 'none') {
+          if (val) {
+            this.visible = val
+            this.currClass = `${this.position}-hidden`
+            this.$nextTick().then(() => {
+              this.currClass = `${this.position}-visible`
+            })
+          } else {
+            this.currClass = `${this.position}-hidden`
+            setTimeout(() => {
+              this.visible = val
+            }, this.duration)
+          }
+        } else {
+          this.visible = val
+        }
+      },
+      immediate: true,
+    },
+  },
+
+  methods: {
+    tapMask() {
+      if (this.closeOnTapMask) this.$emit('update:show', false)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.base-popup-mask {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.base-popup-wrap {
+  position: fixed;
+  box-sizing: border-box;
+  &.center {
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+  &.top,
+  &.bottom {
+    left: 0;
+    width: 100%;
+  }
+  &.top {
+    top: 0;
+  }
+  &.bottom {
+    bottom: 0;
+  }
+  &.left,
+  &.right {
+    top: 0;
+    height: 100%;
+    .base-popup {
+      height: 100%;
+    }
+  }
+  &.left {
+    left: 0;
+  }
+  &.right {
+    right: 0;
+  }
+  .base-popup {
+    &.center-visible {
+      transform: scale(1) scaleZ(1);
+    }
+    &.center-hidden {
+      transform: scale(0) scaleZ(1);
+    }
+    &.top-visible,
+    &.bottom-visible {
+      transform: translateY(0) translateZ(0);
+    }
+    &.top-hidden {
+      transform: translateY(-100%) translateZ(0);
+    }
+    &.bottom-hidden {
+      transform: translateY(100%) translateZ(0);
+    }
+    &.left-visible,
+    &.right-visibl {
+      transform: translateX(0) translateZ(0);
+    }
+    &.left-hidden {
+      transform: translateX(-100%) translateZ(0);
+    }
+    &.right-hidden {
+      transform: translateX(100%) translateZ(0);
+    }
+  }
+}
+</style>