更新记录

1.0.3（2023-05-24） 下载此版本

• 代码细节优化。

1.0.2（2023-05-09） 下载此版本

• 新增13种特效动画设置，用于内容展示动画；
• 代码细节优化。

1.0.1（2023-04-28） 下载此版本

• 这是一个各端通用的弹出遮罩层组件；
• 插件含全部源码，可以给您无限实现可能，随心所欲自定义你的功能；
• 符合uni_modules和easycom规范，直接导入即可通过标签引入使用。

平台兼容性

kevy-mask

介绍

这是一个全端通用的遮罩层组件，包含13种特效动画，内容可以自定义实现，不含多余依赖，节省效率和空间必备。

• 插件含全部源码，可以给您无限实现可能，随心所欲自定义你的功能；
• 符合uni_modules和easycom规范，直接导入即可通过标签引入使用。

祝您使用愉快，本插件会长期维护更新，开源不易，如果本插件对您有帮助的话请及时点个好评吧或者赞赏一下，总之谢谢您的鼓励啦。

方法和属性

使用方式

插件详情页点击导入hbuilder即可。插件符合uni_modules和easycom规范，导入后可直接在页面通过标签引用。

代码使用示例

<template>
    <view>
        <view class="t-btn" @click="showMask">显示遮罩</view>
        <!-- aniType动画类型（13种）：fadeInAndScaleUp、slideFromRight、slideFromBottom、newspaper、fall、sideAndFall、flipH3d、flipV3d、sign3d、superScale、slit3d、rotateFromBottom3d、rotateFromLeft3d -->
        <kevy-mask :show="show" @click="hideMask" :contentStyle="contentStyle" :maskClose="true" :z-index="10"
            aniType="fadeInAndScaleUp">
            <!-- 包裹在标签内的布局信息会通过slot插入到内容部分 -->
            <view class="desc">kevy-mask内部节点会以slot方式插入哦</view>
        </kevy-mask>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                //显示或隐藏遮罩
                show: false,
                //内容最外层样式
                contentStyle: {
                    'width': '600rpx',
                    'height': '400rpx',
                    'border-radius': '10rpx',
                    'background': '#fff'
                }
            }
        },
        methods: {
            showMask() {
                this.show = true;
            },
            hideMask() {
                this.show = false;
            }
        }
    }
</script>

<style scoped lang="scss"> 
    .t-btn{
        width:80%;
        height: 80rpx;
        margin-top: 20rpx;
        text-align: center;
        border-radius: 30rpx;
        line-height: 80rpx;
        background-color: #17ba7a;
        margin-left: auto;
        margin-right: auto;
        font-size: 36rpx;
        color: #fff;
    }
    .desc{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        font-size: 28rpx;
        color: #333;
    }
</style>