更新记录

1.0.1（2024-11-28） 下载此版本

升级

1.0.0（2024-11-28） 下载此版本

发布

平台兼容性

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

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

简介

ljs-absorb-dialog，吸附弹出层，dialog弹框，灵活好用的弹框。

使用 uni_modules 安装（推荐）

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

主参数

方法

快速应用

场景1

<view @click="tcOpen">弹窗</view>
<ljs-absorb-dialog :title="tc.title" v-model="tc.open" class="comTc" :closeButShow="false">
    <view style="height: 100%; overflow-y: auto;">
        展示一些内容。
    </view>
</ljs-absorb-dialog>

export default {
    data() {
        return {
            tc: {
                // 弹出层标题
                title: '',
                // 是否显示弹出层
                open: false,
            },
        }
    },
    onLoad() {
    },
    methods: {
        tcOpen() {
            this.tc.title = 'ljs-absorb-dialog'
            this.tc.open = true
        },
    }
}

场景2

注意：我们的弹窗只内置头部，不处理内容和底部。如果您想要一个内容区加底部按钮区，你可以自己实现他们，放入插槽内；如果你想要内容区滚动，底部区保持原位，可自行实现。

因此我们这款弹窗组件是一个非常灵活的组件。如果您想要快速实现一个常规的弹框结构，可参考下面的示例。

<view @click="tcOpen">弹窗</view>
<ljs-absorb-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-absorb-dialog>

export default {
    data() {
        return {
            tc: {
                // 弹出层标题
                title: '',
                // 是否显示弹出层
                open: false,
            },
        }
    },
    onLoad() {
    },
    methods: {
        tcOpen() {
            this.tc.title = 'ljs-absorb-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;
            }
        }
    }
}

贡献代码

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