#

whycq

2022-09-21 3f01b1957398a8dce4a21ad9530f69df89f45051

 components/y-popup/y-popup.vue

@@ -1,14 +1,32 @@
<template>
   <view>
      <view class="y-popup-mask">
         <view class="center"></view>
   <view v-if="showPopup" class="y-popup-mask" @tap="onTop">
      <view class="center">
         <scroll-view scroll-y="true"  class="" style="max-height: 80vh;">
               <slot/>
         </scroll-view>
      </view>
   </view>
</template>

<script>
   export default {
      name: 'y-popup'
      name: 'y-popup',
      data() {
         return {
            showPopup:false,
         }
      },
      methods: {
         open(direction) {
            this.showPopup = true
         },
         close() {
            this.showPopup = false
         },
         onTop() {
            this.showPopup = false
         }
      }
   }
</script>

@@ -18,15 +36,24 @@
      align-items: center;
      justify-content: center;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100vh;
      background-color: rgba(0, 0, 0, 0.4);
      z-index: 999;
   }
   .center {
      display: flex;
      flex-direction: column;
      position: relative;
      min-width: 400rpx;
      min-width: 550rpx;
      min-height: 300rpx;
      /* max-height: 100%; */
      background-color: #FFF;
      border-radius: 20rpx;
      z-index: 998;
   }
</style>