源文件

jeepay-ui-uapp-agent/components/newComponents/JPopup/JPopup.vue

@@ -0,0 +1,64 @@
+<template>
+  <uni-popup ref="popup" :type="props.dir" :is-mask-click="false" mask-background-color="rgba(0,0,0,0.5)">
+    <view class="Mask" id="msk" :style="{ alignItems: position[type] }" @tap.stop="maskClose($event)">
+      <view class="wrapper" @tap.stop>
+        <slot></slot>
+      </view>
+    </view>
+  </uni-popup>
+</template>
+
+<script setup>
+import { ref, reactive } from "vue"
+const emits = defineEmits(["onClose", "onOpen"])
+const props = defineProps({
+  dir: {
+    type: String,
+    default: "bottom",
+  },
+  type: {
+    type: String,
+    default: "bottom",
+  },
+  mask: {
+    type: Boolean,
+    default: false,
+  },
+})
+const position = reactive({
+  bottom: "flex-end",
+  top: "flex-start",
+  center: "center",
+})
+const popup = ref()
+const close = () => {
+  emits("onClose")
+  popup.value.close()
+}
+const open = () => {
+  emits("onOpen")
+  popup.value.open()
+}
+const maskClose = (e) => {
+  if (props.mask) return
+  if (e.target.id === "msk") return close()
+}
+
+defineExpose({ open, close })
+</script>
+
+<style lang="scss" scoped>
+.Mask {
+  position: relative;
+  z-index: 999999999;
+  display: flex;
+  justify-content: center;
+  width: 100vw;
+  height: 100vh;
+  // background: rgba(0, 0, 0, 0.5);
+  // backdrop-filter: blur(30rpx);
+  .wrapper {
+    flex: 1;
+  }
+}
+</style>