更新记录

1.0.4（2023-08-14） 下载此版本

• 代码细节优化；
• icon图标改为透明图标。

1.0.3（2023-07-12） 下载此版本

• 代码细节优化；
• 增加fullScreen参数，设置为true时全屏展示组件。

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

• 代码细节优化。

平台兼容性

kevy-empty

介绍

这是一个全端通用的空状态描述组件，集成了25种常用场景，支持自定义图标及内容，快点下载试试吧。

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

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

方法和属性

type说明如下

使用方式

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

代码使用示例

<template>
    <view class="content">
        <!-- 这里是直接定义type -->
        <kevy-empty :show="true" type="list"></kevy-empty>
        <!-- 这里是直接定义type和text -->
        <kevy-empty :show="true" type="favor" text="没有列表哦~"></kevy-empty>
        <!-- 这里是自定义图标示例,更多自定义参考api -->
        <kevy-empty :show="true" image="https://img01.yzcdn.cn/vant/empty-image-default.png" text="没有数据哦~"></kevy-empty>
        <!-- 这里是slot插入自定义内容到组件下方 -->
        <kevy-empty :show="true" type="money">
            <view class="self">返回首页</view>
        </kevy-empty>
        <!-- 全屏展示 设置下方full-screen为true即可 -->
        <kevy-empty :show="true" :full-screen="false" type="money">
            <view class="self">返回首页</view>
        </kevy-empty>
    </view>
</template>

<script>
    export default {
        data() {
            return {

            };
        }
    }
</script>

<style lang="scss">
    .content {
        min-height: 100vh;
        min-width: 100vw;
        box-sizing: border-box;
        background-color: #ffffff;
    }

    .self {
        text-align: center;
        margin: 60rpx auto 30rpx;
        font-size: 28rpx;
        color: #a7a7a7;
        background-color: #f7f7f7;
        border-radius: 30rpx;
        padding: 10rpx 20rpx;
        width: 300rpx;
    }
</style>