使用Vue封装暂无数据占位图组件
1. 前言
在日常开发中,页面上肯定有展示数据的需求,但是当某些时候该展示数据的地方此时数据为空时,就会留下一片空白,对用户体验不是很好,那么接下来我们就封装一个空数据时的占位展示图,告诉用户此时用户为空,并非数据没有加载出来,不用让用户盲目的等待。
2. 使用示例
该组件可以直接引入到项目中使用,示例如下:
<template>
<div id="app">
<div v-if="content.length"></div>
<Empty v-else></Empty>
</div>
</div>
</template>
<script>
import Empty from './Empty'
export default {
name: 'app',
components: { Empty},
data() {
return {
content:[]
}
}
}
</script>
在上面代码中,假设你需要展示的内容是content
,那么你就可以判断当内容有值时展示内容,当内容为空时展示空数据时的占位展示图。效果如下:
3. 组件可选属性
该组件除了可以直接使用外,还提供过了一些可选属性供个性化配置,提供可选属性如下:
属性名称 | 描述 | 类型 | 是否必须 | 默认值 |
---|---|---|---|---|
description | 自定义描述内容 | String | 否 | 暂无数据 |
image | 自定义显示图片的路径 | String | 否 | 默认图片 |
imageStyle | 自定义显示图片的样式 | Object | 否 | - |
组件提供了3个可选属性,你可以这样去使用它们:
-
自定义描述内容
<Empty description="我是自定义内容"></Empty>
-
显示自定义图片
<Empty description="显示网络图片" image="https://www.baidu.com/img/bd_logo1.png"></Empty>
<Empty description="显示项目资源图片" :image="require('@/assets/images/warn.png')"></Empty>
- 自定义显示图片样式
<template>
<Empty
description="显示网络图片"
image="https://www.baidu.com/img/bd_logo1.png"
:imageStyle="imageStyle">
</Empty>
</template>
<script>
data() {
return {
imageStyle:{
width:'10px'
}
}
</script>
4. 组件代码
完整代码请戳☞Vue-Components-Library/Empty
(完)
免责声明
- 本博客所有文章仅用于学习、研究和交流目的,欢迎非商业性质转载。
- 博主在此发文(包括但不限于汉字、拼音、拉丁字母)均为随意敲击键盘所出,用于检验本人电脑键盘录入、屏幕显示的机械、光电性能,并不代表本人局部或全部同意、支持或者反对观点。如需要详查请直接与键盘生产厂商法人代表联系。挖井挑水无水表,不会网购无快递。
- 博主的文章没有高度、深度和广度,只是凑字数。由于博主的水平不高(其实是个菜B),不足和错误之处在所难免,希望大家能够批评指出。
- 博主是利用读书、参考、引用、抄袭、复制和粘贴等多种方式打造成自己的文章,请原谅博主成为一个无耻的文档搬运工!
posted on 2019-11-13 18:36 难凉热血,码梦为生! 阅读(3317) 评论(0) 编辑 收藏 举报