更新记录

1.0（2023-03-30） 下载此版本

20230330——1.0.0——第一版

平台兼容性

集成说明

template中添加组件

<YoyoPopup v-model="showPopup" :mode="mode" border-radius="16" >

script中引用组件

import YoyoPopup from '@/components/yoyo-popup/yoyo-popup.vue'
export default {
        components: {
            YoyoPopup
        },
        data() {
            return {
                showPopup: false,
                mode : 'bottom'
            }
        },
    }

属性说明

demo展示

<template>
    <view class="content">
        <view class="list" @click="open('bottom')">底部弹出</view>
        <view class="list" @click="open('top')">顶部弹出</view>
        <view class="list" @click="open('left')">左边弹出</view>
        <view class="list" @click="open('right')">右边弹出</view>

        <YoyoPopup v-model="showPopup" :mode="mode" border-radius="16" >
            <!-- 上下弹窗 -->
            <block v-if="mode ==='bottom' || mode === 'top'">
                <view class="popup-view">
                  <view class="popup-view-close">
                      <text @click="showPopup=flase">×</text>
                  </view>
                  <view class="popup-view-title">
                        <text @click="showPopup=flase">我是标题</text>
                  </view>
                  <view class="popup-view-content">
                      弹出层方向——{{mode}}
                  </view>
                </view>
            </block>
            <!-- 左右弹窗 -->
            <block v-if="mode ==='left' || mode === 'right'">
                <view class="popup-view popup-view-center">
                  <view class="popup-view-close">
                      <text @click="showPopup=flase">×</text>
                  </view>
                  <view class="popup-view-title">
                        <text @click="showPopup=flase">我是标题</text>
                  </view>
                </view>
                <view class="popup-view-content">
                      弹出层方向——{{mode}}
                </view>
            </block>
        </YoyoPopup>
    </view>
</template>

<script>
    import YoyoPopup from '@/components/yoyo-popup/yoyo-popup.vue'
    export default {
        components: {
            YoyoPopup
        },
        data() {
            return {
                showPopup: false,
                mode: 'center'
            }
        },
        onLoad() {

        },
        methods: {
            open(mode) {
                this.mode = mode
                this.showPopup = true
            }
        }
    }
</script>

<style scoped lang="scss">
    .list {
        width: 100%;
        padding: 30rpx;
        background: #E8E8E8;
        border-bottom: 1px solid #fff;
    }

    .popup-view {
        /* width: 650rpx; */
        height: 500rpx;
        background-color: #fff;
        .popup-view-close{
            width: 100%;
            height: 80rpx;
            text-align: right;
            line-height: 80rpx;
            padding-right: 30rpx;
            box-sizing: border-box;
        }
        .popup-view-title{
            text-align: center;
        }
        .popup-view-content{
            text-align: center;
            margin-top: 100rpx;
        }

    }
    .popup-view-center{
        width: 70vw;
    }
</style>

备注

注意在部分机型中，mode无法设置center，其他弹窗方向正常