前端：uniapp手搓浮动层，简单可复用型组件。

类似于dialog的方式，简单很好修改。这里以传图片为例

复用性组件

<template>

    <view v-if="showPopup" @click="hidePopup" class="popup-container">

        <view class="popup-content">

            <image :src="imageUrl" mode="aspectFill" class="popup-image"></image>

        </view>

    </view>

</template>

<script>

export default {

    props: {

        imageUrl: {

            type: String,

            required: true

        },

        showPopup: {

            type: Boolean,

            default: false

        }

    },

    methods: {

        hidePopup() {

            this.$emit('update:showPopup', false);

        }

    }

};

</script>

<style>

.popup-container {

    position: fixed;

    top: 0;

    left: 0;

    width: 100vw;

    height: 100vh;

    background-color: rgba(0, 0, 0, 0.5);

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 1001;

}

.popup-content {

    background-color: #fff;

    padding: 20rpx;

    border-radius: 10rpx;

}

.popup-image {

    width: 500rpx;

    height: 500rpx;

}

</style>

父组件内引入

先import，比如 import PopupComponent from '@xxx/PopupComponent';

并在 components中引入该组件 PopupComponent

父组件中使用：

<PopupComponent :imageUrl="imagePath" :showPopup="popupVisible" @update:showPopup="popupVisible = $event" />

data() { return { imagePath: xxxx.jpg', popupVisible: false }; },

在实战中，通常是点击按钮后，弹出框，所以可以在对应的按钮事件上增加逻辑。如：

showPopup() { this.popupVisible = true; }，或者可以在方法中赋值图片地址，如：

showPopup() {

this.imagePath="xxxx";

this.popupVisible = true; }

效果如下，当再次点击的时候则会关闭浮层