JLH/JLHAPP/src/components/lj-win-popup.vue

<template>
    <van-popup
        class="widget-popup"
        v-model="showWidgetPopup"
        lock-scroll
        :round="round"
        :position="position"
        :style="popupStyle"
        :closeable="closeable"
        :get-container="getContainer"
        :close-on-click-overlay="closeOnClickOverlay"
        :transition-appear="true"
        :lazy-render="false"
        @click-overlay="handleClickOverlay"
        @closed="autoClosed"
    >
        <div class="widget-popup_main">
            <div class="popup_header">
                <slot name="title">
                    {{ title }}
                </slot>
            </div>
            
            <main class="widget-main">
                <slot name="body"></slot>
            </main>
            <footer class="widget-footer">
                <slot name="footer"></slot>
            </footer>
        </div>
    </van-popup>
</template>

<script>
export default {
    name: 'L1WinPopup',

    data() {
        return {
            showWidgetPopup: false, // 控制窗体显示与否
        };
    },
    props: {
        // 窗体高度
        popupStyle: {
            type: Object,
            default: function() {
                return {}
            }
        },
        // 弹窗显示的位置
        position: {
            type: String,
            default: 'bottom'
        },
        // 是否显示关闭按钮
        closeable: {
            type: Boolean,
            default: true
        },
        // 挂载的位置
        getContainer: {
            type: String,
            default: 'body'
        },
        // 标题
        title: {
            type: String,
            default: ''
        },
        // 是否显示圆角
        round: {
            type: Boolean,
            default: false
        },
        // 是否在点击遮罩层后关闭
        closeOnClickOverlay: {
            type: Boolean,
            default: true
        }
    },
    mounted() {
        
    },
    methods: {
        /**打开筛选组件 */
        open() {
            this.showWidgetPopup = true;
        },
        /**关闭筛选组件 */
        close() {
            this.showWidgetPopup = false;
        },
        /**关闭筛选组件时，回调 */
        autoClosed() {
            this.$emit('closed')
        },
        /**点击遮罩层时触发 */
        handleClickOverlay() {
            this.$emit('click-overlay')
        },
    },
};
</script>

<style lang="less">
    .widget-popup {
        .widget-popup_main {
            max-height: 80vh;
            position: relative;
            height: 100%;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
        }

        .popup_header {
            flex-shrink: 0;
            width: 100%;
            height: 44px;
            line-height: 44px;
            font-size: 16px;
            font-weight: 700;
            text-align: center;
            background-color: #f8f8f8;
        }
        .widget-main {
            padding-bottom: 60px;
            flex: 1;
            overflow: auto;
        }
        .widget-footer {
            position: fixed;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 10px;
            // width: 100%;
            display: flex;
            z-index: 1999;

            .btn + .btn {
                margin-left: 10px;
            }
            .btn {
                box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.04), 0px 0px 3px 0px rgba(0,0,0,0.08);

                .iconfont {
                    font-size: 14px;
                }
            }
        }
        .van-popup__close-icon {
            top: 10px;
        }
    }
</style>