flat:AI+

components/custom-popup/custom-popup.vue

@@ -0,0 +1,134 @@
+<template>
+    <view
+        v-if="visible"
+        class="tianditu-popop"
+        :style="{ height: winHeight + 'px', width: winWidth + 'px', top: winTop + 'px' }"
+    >
+        <view v-if="header" class="popup-header" @click="close">
+            <slot name="header"></slot>
+        </view>
+        <view :style="{ minHeight: contentHeight + 'vh' }" class="popup-content fadeInUp animated">
+            <slot></slot>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    name: 'custom-popup',
+    data() {
+        return {
+            winWidth: 0,
+            winHeight: 0,
+            winTop: 0,
+            contentHeight: 30,
+        };
+    },
+    props: {
+        visible: {
+            type: Boolean,
+            require: true,
+            default: false,
+        },
+        hide: {
+            type: Number,
+            default: 0,
+        },
+        header: {
+            type: Boolean,
+            default: true,
+        },
+        contentH: {
+            type: Number,
+            default: 30,
+        },
+    },
+    created() {
+        var that = this;
+        if (this.contentH) {
+            this.contentHeight = this.contentH;
+        }
+        uni.getSystemInfo({
+            success: function (res) {
+                if (that.hide === 0) {
+                    that.winWidth = res.screenWidth;
+                    that.winHeight = res.screenHeight;
+                    that.winTop = 0;
+                } else {
+                    that.winWidth = res.windowWidth;
+                    that.winHeight = res.windowHeight;
+                    that.winTop = res.windowTop;
+                }
+            },
+        });
+    },
+    methods: {
+        close(e) {
+            this.$emit('onClose');
+        },
+    },
+};
+</script>
+
+<style scoped>
+.tianditu-popop {
+    position: fixed;
+    left: 0;
+    z-index: 999;
+    background-color: rgba(0, 0, 0, 0.6);
+    display: flex;
+    flex-direction: column;
+}
+
+.popup-header {
+    flex: 1;
+}
+
+.popup-content {
+    background-color: #ffffff;
+    min-height: 300px;
+    width: 100%;
+    /*     position: absolute;
+        bottom: 0;
+        left: 0; */
+}
+
+/*base code*/
+.animated {
+    -webkit-animation-duration: 1s;
+    animation-duration: 1s;
+    -webkit-animation-fill-mode: both;
+    animation-fill-mode: both;
+}
+
+.animated.infinite {
+    -webkit-animation-iteration-count: infinite;
+    animation-iteration-count: infinite;
+}
+
+.animated.hinge {
+    -webkit-animation-duration: 2s;
+    animation-duration: 2s;
+}
+
+@keyframes fadeInUp {
+    0% {
+        opacity: 0;
+        -webkit-transform: translate3d(0, 100%, 0);
+        -ms-transform: translate3d(0, 100%, 0);
+        transform: translate3d(0, 100%, 0);
+    }
+
+    100% {
+        opacity: 1;
+        -webkit-transform: none;
+        -ms-transform: none;
+        transform: none;
+    }
+}
+
+.fadeInUp {
+    -webkit-animation-name: fadeInUp;
+    animation-name: fadeInUp;
+}
+</style>