更新记录

1.0(2023-03-30)

20230330——1.0.0——第一版


平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.4.1 × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × ×

集成说明

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'
            }
        },
    }

属性说明

属性名 类型 默认值 说明
v-model Boolean false 弹窗展示
mode String left 弹出方向,left right top bottom center
mask Boolean true 是否显示遮罩
zoom Boolean true 是否开启缩放动画
safeAreaInsetBottom Boolean true 是否开启底部安全区适配
maskCloseAble Boolean true 是否可以通过点击遮罩进行关闭
customStyle Object {} 用户自定义样式

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,其他弹窗方向正常

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问