#

whycq

2022-09-22 90ca2535ec02663f87e13e8761295ff7e5e8781e

 components/y-popup/y-popup.vue

@@ -1,11 +1,18 @@
<template>
   <view v-if="showPopup">
      <uni-transition key="1" mode-class="fade" :styles="maskClass" :show="show" @click="onTop"/>
      <uni-transition key="2" :mode-class="ani" name="content" :styles="transClass" :duration="duration" :show="showTrans" >
         qqq<view style="width: 500rpx;height: 300rpx;background-color: aliceblue;position: absolute;top: 0;
         left: 0;"><slot /></view>
      </uni-transition>
   <view v-if="showPopup" class="y-popup-mask">
      <uni-transition key="1" mode-class="fade" :styles="maskClass" :show="show" @click="onTap"/>
      <uni-transition key="2" :styles="transClass" :show="showTrans">
      
         <view style="height: 70rpx;background-color: aliceblue;">title</view>
         <scroll-view scroll-y class="scroll-Y">
            <view style="width: 500rpx;height: 300rpx;background-color: aqua;">
               <slot />
            </view>
         </scroll-view>
         <view>
            <button size="mini">按钮</button>
         </view>
      </uni-transition>
   </view>
</template>

@@ -29,8 +36,16 @@
            },
            transClass: {
               position: 'fixed',
               left: 0,
               right: 0
               // left: 0,
               // right: 0,
               minWidth:'300rpx',
               minHeight: '400rpx',
               display: 'flex',
               flexDirection: 'column',
               alignItems: 'center',
               borderRadius: '20rpx',
               justifyContent: 'center',
               backgroundColor: 'rgba(0, 255, 0, 0.4)'
            },
            
         }
@@ -44,7 +59,7 @@
         close() {
            this.showPopup = false
         },
         onTop() {
         onTap() {
            this.showPopup = false
         }
      }
@@ -63,8 +78,9 @@
      bottom: 0;
      width: 100%;
      height: 100vh;
      background-color: rgba(0, 0, 0, 0.4);
      /* background-color: rgba(0, 0, 0, 0.4); */
      z-index: 999;
      border-radius: 20rpx;
   }
   .center {
      display: flex;