更新记录

1.1.3(2024-09-27) 下载此版本

送出个性化定制参数headerShow,让你的弹窗更灵活。

1.1.2(2024-09-26) 下载此版本

更新文档。

1.1.1(2024-09-26) 下载此版本

修复问题。

查看更多

平台兼容性

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

方便您的同时,请五星、收藏,让好的东西照亮更多深渊中负重前行的代码人。

创作不易,在您方便之际,赞赏作者,我们会更有动力继续下去。

简介

ljs-dialog,dialog弹框,灵活好用的弹框。可以设置最大高度,当内容不足最大高度时适应内容高度,当内容超过最大高度时出现滚动条。

使用 uni_modules 安装(推荐)

使用 uni_modules 方式安装组件库,可以直接通过插件市场导入,通过右键菜单快速更新组件,不需要引用、注册,直接在页面中使用 ljs-dialog组件。

主参数

参数 类型 必填项 默认值 说明
v-model Boolean 是否开启
title String 弹窗标题。headerShow为true时有效。
width String × 90% 弹窗宽度。
tcMaxHeightTag Boolean × true 是否限制弹窗最大高度。
tcMaxHeightProportion Number × 0.8 限制弹窗最大高度占比,建议不大于1。1为100%。tcMaxHeightTag为true有效。
headerShow Boolean × true 是否显示头部区域。
closeButShow Boolean × true 是否显示关闭按钮。headerShow为true时有效。
closeImg String × 关闭按钮图片。
zIndex Number × 100 z-index值。

方法

参数 类型 解释
@closeBefore 关闭弹窗前的回调函数 当点击右上角关闭按钮或者点击遮罩时的回调函数,此函数优先于弹窗关闭。
@closeAfter 关闭弹窗后的回调函数 当点击右上角关闭按钮或者点击遮罩时的回调函数,此函数在弹窗关闭后执行。

快速应用

场景1
<view @click="tcOpen">弹窗</view>
<ljs-dialog :title="tc.title" v-model="tc.open" class="comTc" :closeButShow="false">
    <view style="height: 100%; overflow-y: auto;">
        展示一些内容。
    </view>
</ljs-dialog>
export default {
    data() {
        return {
            tc: {
                // 弹出层标题
                title: '',
                // 是否显示弹出层
                open: false,
            },
        }
    },
    onLoad() {
    },
    methods: {
        tcOpen() {
            this.tc.title = 'ljs-dialog'
            this.tc.open = true
        },
    }
}
场景2
注意:我们的弹窗只内置头部,不处理内容和底部。如果您想要一个内容区加底部按钮区,你可以自己实现他们,放入插槽内;如果你想要内容区滚动,底部区保持原位,可自行实现。
因此我们这款弹窗组件是一个非常灵活的组件。如果您想要快速实现一个常规的弹框结构,可参考下面的示例。
<view @click="tcOpen">弹窗</view>
<ljs-dialog :title="tc.title" v-model="tc.open" class="comTc">
    <view class="comForm">
        测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>测试内容<br>        测试内容<br>测试内容<br>测试内容<br>
    </view>
    <view class="operate" style="margin-top: 0;">
        <view class="but">确定</view>
        <view class="but grey">取消</view>
    </view>
</ljs-dialog>
export default {
    data() {
        return {
            tc: {
                // 弹出层标题
                title: '',
                // 是否显示弹出层
                open: false,
            },
        }
    },
    onLoad() {
    },
    methods: {
        tcOpen() {
            this.tc.title = 'ljs-dialog'
            this.tc.open = true
        },
    }
}
.comTc{
    .comForm{
        width: 100%;
        height: calc(100% - 100upx);
        overflow-y: auto;
    }
    .operate{
        height: 100upx;
        padding: 0 30upx;
        margin-top: 20upx;
        display: flex;
        align-items: center;
        .but{
            flex: 1;
            height: 56upx;
            line-height: 56upx;
            text-align: center;
            border-radius: 10upx;
            border: 2upx solid #084AA1;
            background-color: #084AA1;
            color: #FFF;
            margin-right: 20upx;
            &:last-child{
                margin-right: 0;
            }
            &.grey{
                border: 2upx solid #eee;
                background-color: #FFF;
                color: #666;
            }
        }
    }
}

贡献代码

龙九山。有任何问题,请在平台留言,在手头宽裕得情况下,我会尽快修复问题。

隐私、权限声明

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

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

插件不采集任何数据

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

许可协议

MIT协议

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