Vue 封装的noData组件

<template>
    <div :style="{color: fontColor}" :class="['noDataView', iconType]">
        <div class="icon">
            <icon-svg type="svgIcon_emptyDataClient"></icon-svg>
        </div>
    </div>
    <div class="text">{{explain}}</div>
</template>

<script type="text/ecmascript-6">
    /**
    *
    * noDataView组件
    *
    */
    export default {
        name: 'noData-view',
        data() {
            return {

            }
        },
        computed: {
            iconType() {
                if(this.type === '1') {
                    return 'big'
                } else {
                    return 'normal'
                }
            }
        },
        props: {
            /**
            * 样式类型  1：大图标  2：小图标
            */
            type： {
                type: string,
                default: '1'
            },
            /**
            * 默认字体颜色
            */
            fontCOlor： {
                type: string,
                default: '#43484D'
            },
            /**
            * 图片说明
            */
            type： {
                type: string,
                default: '暂无记录'
            }
        }
    }
</script>

<style lang="less" scoped>
    .noDataView {
        position: absolute;
        top: 50%;
        left: 50%;
        .icon {
            font-size: 2.1rem;
            height: 2.1rem;
            width: 100%;
        }
        .text {
            width: 100%;
            text-align: center;
        }
    }
    .big {
        height: 2.8rem;
        width: 2.1rem;
        margin-top: -1.4rem;
        margin-left: -1.05rem;
        .icon {
            font-size: 2.1rem;
            height: 2.1rem;
        }
        .text {
            font-size： .2rem;
            height: .3rem;
            line-height: .3rem;
            margin-top: .4rem;
        }
    }
    .normal {
        height: 1.4rem;
        width: 1rem;
        margin-top: -0.7rem;
        margin-left: -0.5rem;
        .icon {
            font-size: 1rem;
            height: 1rem;
        }
        .text {
            font-size： .12rem;
            height: .2rem;
            line-height: .2rem;
            margin-top: .3rem;
        }
    }
</style>

以上代码是组件noData-view组件。具体引用如下：

<div class="nodata-view" v-if="!list.length">
    <noData-view type="2" fontCOlor="#979EA7" explain="该列表暂无数据" />
</div>

<script>
    import NoDataView from './noData-view';
    export default {
        data() {
            return {
                list: []
            }
        },
        components: {
            NoDataView
        }
    }
</script>