From 6f3ff9eeafc40021cf139b374b56eef5052e876a Mon Sep 17 00:00:00 2001
From: whycq <10027870+whycq@user.noreply.gitee.com>
Date: 星期五, 23 十二月 2022 10:26:41 +0800
Subject: [PATCH] #
---
components/y-popup/y-popup.vue | 88 ++++++++++++++++++++++++++++++++++++++++---
1 files changed, 81 insertions(+), 7 deletions(-)
diff --git a/components/y-popup/y-popup.vue b/components/y-popup/y-popup.vue
index a792720..0b03137 100644
--- a/components/y-popup/y-popup.vue
+++ b/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>
\ No newline at end of file
--
Gitblit v1.9.1