#

whycq

2023-11-21 837239059f4cc8bb8f0a344fe3a503cf1fa1cd49

 components/y-popup/y-popup.vue

@@ -1,23 +1,40 @@
<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>
   <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" mode-class="fade" :duration="duration">
         <view style="height: 70rpx;background-color: aliceblue;">{{titleText}}</view>
         <scroll-view scroll-y class="scroll-Y">
            <slot>
               <input type="text">
            </slot>
         </scroll-view>
         <view>
            <button size="mini" @click="close">按钮</button>
         </view>
      </uni-transition>
		
   </view>
</template>

<script>
   export default {
      name: 'y-popup',
      props: {
         title: {
            type: String,
            default: ''
         },
      },
      computed: {
         titleText() {
            return this.title || t("uni-popup.title")
         }
      },
      data() {
         return {
            show:false,
            showPopup:false,
            showTrans: false,
            duration: 300,
            duration: 500,
            ani: [],
            maskClass: {
               position: 'fixed',
@@ -29,8 +46,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 +69,7 @@
         close() {
            this.showPopup = false
         },
         onTop() {
         onTap() {
            this.showPopup = false
         }
      }
@@ -63,8 +88,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;