#

whycq

2022-09-21 a3602d589b532ff8228171a7af13d60fdc8a34a3

#

 components/y-popup/y-popup.vue

New file
@@ -0,0 +1,32 @@
<template>
    <view>
        <view class="y-popup-mask">
            <view class="center"></view>
        </view>
    </view>
</template>

<script>
    export default {
        name: 'y-popup'
    }
</script>

<style>
    .y-popup-mask {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        width: 100%;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.4);
    }
    .center {
        display: flex;
        position: relative;
        min-width: 400rpx;
        min-height: 300rpx;
        background-color: #FFF;
    }
</style>

 pages/user/user.vue

@@ -1,8 +1,15 @@
<template>
    <view class="">
        <y-popup>
            <view style="background-color: aqua;width: 100rpx;height: 100rpx;"></view>
            <input type="text" style="background-color: aqua;">
        </y-popup>
    </view>
</template>

<script>
</script>

<style>
	
</style>