#

whycq

2022-09-22 7f6fc656fe079f4baaf0e7c5bf0fe64965af8c5b

#

 components/y-popup/y-popup.vue

@@ -1,16 +1,15 @@
<template>
    <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>
        <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">
                <view style="width: 500rpx;height: 300rpx;background-color: aqua;">
                    <slot />
                </view>
                <slot>
                    <input type="text">
                </slot>
            </scroll-view>
            <view>
                <button size="mini">按钮</button>
                <button size="mini" @click="close">按钮</button>
            </view>
        </uni-transition>
    </view>
@@ -19,12 +18,23 @@
<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',

 pages/user/user.vue

@@ -2,148 +2,9 @@
    <view class="">
        <scroll-view class="scroll-Y">
        <button @click="open">点击</button>
        <y-popup ref="yPopup">
            <!-- <view style="background-color: aqua;width: 100rpx;height: 100rpx;"></view>
            <input type="text" style="background-color: darkgoldenrod;"> -->
            <view class="vv">100</view>
            <view class="vv">1</view>
            <view class="vv">1</view>
            <view class="vv">1</view>
            <view class="vv">1</view>
            <view class="vv">1</view>
            <view class="vv">1</view>
            <view class="vv">1</view>
            <view class="vv">66</view>
            <view class="vv">66</view>
            <view class="vv">66</view>
            <view class="vv">66</view>
        <y-popup ref="yPopup" title="输入内容">
            
            <view class="vv">1</view>
            <view class="vv">1</view>
            <view class="vv">1</view>
            <view class="vv">1</view>
            <view class="vv">1</view>
            <view class="vv">1</view>
            <view class="vv">1</view>
            <view class="vv">1</view>
            <view class="vv">1</view>
			
            <view class="vv">100</view>
            <view class="vv">1</view>
            <view class="vv">1</view>
            <view class="vv">1</view>
            <view class="vv">1</view>
            <view class="vv">1</view>
            <view class="vv">1</view>
            <view class="vv">1</view>
            <view class="vv">66</view>
            <view class="vv">66</view>
            <view class="vv">66</view>
            <view class="vv">66</view>
			
            <view class="vv">1</view>
            <view class="vv">1</view>
            <view class="vv">1</view>
            <view class="vv">1</view>
            <view class="vv">1</view>
            <view class="vv">1</view>
            <view class="vv">1</view>
            <view class="vv">1</view>
            <view class="vv">1</view>
            <view class="vv">5</view>
            <view class="vv">100</view>
            <view class="vv">1</view>
            <view class="vv">1</view>
            <view class="vv">1</view>
            <view class="vv">1</view>
            <view class="vv">1</view>
            <view class="vv">1</view>
            <view class="vv">1</view>
            <view class="vv">66</view>
            <view class="vv">66</view>
            <view class="vv">66</view>
            <view class="vv">66</view>
			
            <view class="vv">1</view>
            <view class="vv">1</view>
            <view class="vv">1</view>
            <view class="vv">1</view>
            <view class="vv">1</view>
            <view class="vv">1</view>
            <view class="vv">1</view>
            <view class="vv">1</view>
            <view class="vv">1</view>
            <view class="vv">5</view>
        </y-popup>
        <view class="vv">100</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">66</view>
        <view class="vv">66</view>
        <view class="vv">66</view>
        <view class="vv">66</view>
		
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
		
        <view class="vv">100</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">66</view>
        <view class="vv">66</view>
        <view class="vv">66</view>
        <view class="vv">66</view>
		
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">5</view>
        <view class="vv">100</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">66</view>
        <view class="vv">66</view>
        <view class="vv">66</view>
        <view class="vv">66</view>
		
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">1</view>
        <view class="vv">5</view>
        </scroll-view>
    </view>
</template>