初始化万家商超用户端仓库

components/uni-popup/uni-popup.vue

@@ -0,0 +1,198 @@
+<template>
+  <view v-if="showPopup" class="uni-popup" @touchmove.stop.prevent>
+    <view :class="[ani, animation ? 'ani' : '', !custom ? 'uni-custom' : '']" class="uni-popup__mask" @click="close(true)" />
+    <view :class="[type, ani, animation ? 'ani' : '', !custom ? 'uni-custom' : '']" class="uni-popup__wrapper" @click="close(true)">
+      <view class="uni-popup__wrapper-box" @click.stop="clear">
+        <slot />
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'UniPopup',
+  props: {
+    // 开启动画
+    animation: {
+      type: Boolean,
+      default: true,
+    },
+    // 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层,
+    type: {
+      type: String,
+      default: 'center',
+    },
+    // 是否开启自定义
+    custom: {
+      type: Boolean,
+      default: false,
+    },
+    // maskClick
+    maskClick: {
+      type: Boolean,
+      default: true,
+    },
+    show: {
+      type: Boolean,
+      default: true,
+    },
+  },
+  data() {
+    return {
+      ani: '',
+      showPopup: false,
+    }
+  },
+  watch: {
+    show(newValue) {
+      if (newValue) {
+        this.open()
+      } else {
+        this.close()
+      }
+    },
+  },
+  created() {},
+  methods: {
+    clear() {},
+    open() {
+      this.$emit('change', {
+        show: true,
+      })
+      this.showPopup = true
+      this.$nextTick(() => {
+        setTimeout(() => {
+          this.ani = 'uni-' + this.type
+        }, 30)
+      })
+    },
+    close(type) {
+      if (!this.maskClick && type) return
+      this.$emit('change', {
+        show: false,
+      })
+      this.ani = ''
+      this.$nextTick(() => {
+        setTimeout(() => {
+          this.showPopup = false
+        }, 300)
+      })
+    },
+  },
+}
+</script>
+<style lang="scss">
+.uni-popup {
+  position: fixed;
+  /*  #ifdef  H5  */
+  top: 0px;
+  // top: 50px;
+  /*  #endif  */
+  /*  #ifndef  H5  */
+  top: 0px;
+  /*  #endif  */
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 999;
+  overflow: hidden;
+  &__mask {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 998;
+    background: rgba(0, 0, 0, 0.4);
+    opacity: 0;
+    &.ani {
+      transition: all 0.3s;
+    }
+    &.uni-top,
+    &.uni-bottom,
+    &.uni-center {
+      opacity: 1;
+    }
+  }
+
+  &__wrapper {
+    position: absolute;
+    z-index: 999;
+    box-sizing: border-box;
+
+    &.ani {
+      transition: all 0.3s;
+    }
+
+    &.top {
+      top: 0;
+      left: 0;
+      width: 100%;
+      transform: translateY(-100%);
+    }
+
+    &.bottom {
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      transform: translateY(100%);
+    }
+    &.right {
+      bottom: 0;
+      left: 0;
+      width: 70%;
+      transform: translateY(100%);
+    }
+    &.center {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      transform: scale(1.2);
+      opacity: 0;
+    }
+
+    &-box {
+      position: relative;
+      box-sizing: border-box;
+    }
+
+    &.uni-custom {
+      & .uni-popup__wrapper-box {
+        border-radius: 20upx 20upx 0 0;
+        padding: 30upx;
+        background: #fff;
+      }
+
+      &.center {
+        & .uni-popup__wrapper-box {
+          position: relative;
+          max-width: 80%;
+          max-height: 80%;
+          overflow-y: scroll;
+        }
+      }
+      &.top,
+      &.bottom {
+        & .uni-popup__wrapper-box {
+          width: 100%;
+          max-height: 1000upx;
+          // overflow-y: scroll;
+        }
+      }
+    }
+
+    &.uni-top,
+    &.uni-bottom {
+      transform: translateY(0);
+    }
+
+    &.uni-center {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+}
+</style>