<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>