#

whycq

2022-12-23 6f3ff9eeafc40021cf139b374b56eef5052e876a

 components/y-popup/y-popup.vue

@@ -1,14 +1,78 @@
<template>
   <view>
      <view class="y-popup-mask">
         <view class="center"></view>
      </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'
      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: 500,
            ani: [],
            maskClass: {
               position: 'fixed',
               bottom: 0,
               top: 0,
               left: 0,
               right: 0,
               backgroundColor: 'rgba(0, 0, 0, 0.4)'
            },
            transClass: {
               position: 'fixed',
               // 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)'
            },
				
         }
      },
      methods: {
         open(direction) {
            this.showPopup = true
            this.show = true
            this.showTrans = true
         },
         close() {
            this.showPopup = false
         },
         onTap() {
            this.showPopup = false
         }
      }
   }
</script>

@@ -18,15 +82,25 @@
      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);
      /* background-color: rgba(0, 0, 0, 0.4); */
      z-index: 999;
      border-radius: 20rpx;
   }
   .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>