更新记录

1.0.1（2025-05-23） 下载此版本

修复外部因素关闭弹窗不触发 close 事件的问题

1.0.0（2025-01-27） 下载此版本

发布初版

平台兼容性

uni-app

其他

组件名: xt-popup

安装方式

本组件符合 easycom 规范，HBuilderX 3.1.0 起，只需将本组件导入项目，在页面 template 中即可直接使用，无需在页面中 import 和注册 components

基本用法

<template>
    <view class="xt">
        <button @click="showPop(0)">弹窗</button>
        <button @click="showPop(1)">打印</button>
        <xt-popup :show.sync='show' iconColor='#000' iconPosition='topCenter' @close="close" radius="10rpx" showClose
            mode='right'>
            <view style="padding: 50rpx;height: 100%;">
                XT-POPUP弹窗
            </view>
        </xt-popup>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                show: false
            }

        },
        methods: {
            close() {
                console.log('关闭');
            },
            showPop(e) {
                if (e == 0) {
                    this.show = true
                } else {
                    console.log(this.show)
                }
            }
        },
    }
</script>

<style lang="scss">
    .xt {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
</style>

备注

绑定show字段时,vue3版本,双向绑定方式为 v-model:show='show';

vue2版本,双向绑定方式为 :show.sync='show';

也可自行处理 不使用双向绑定;

xt-popup 属性和方法

说明

1. 适配问题,请自行尝试,有问题请留言