更新记录

1.0.2（2024-08-19） 下载此版本

升级功能。

1.0.1（2024-08-19） 下载此版本

修复问题。

1.0.0（2024-08-19） 下载此版本

发布

平台兼容性

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

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

简介

ljs-dialog，dialog弹框，灵活好用的弹框。

使用 uni_modules 安装（推荐）

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

主参数

快速应用

场景1

<view @click="tcOpen">弹窗</view>
<ljs-dialog :title="tc.title" v-model="tc.open" class="comTc">
    <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>
    </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;
            }
        }
    }
}

贡献代码

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