前言
在基于移动端的前端开发的时候,需要做到仿原生app的功能效果,尤其是UI布局,以及操作流程和方式,都应该跟移动端原生开发的时候保持高度相似。本篇博文分享一个关于基于移动端的前端开发的时候,无数据时候的占位符(空状态)使用的方法。
本文分享两种占位符的使用方式,一种是直接通过使用Vant的Empty组件,另外一种是自己实现自定义占位符组件。
一、Vant自带的Empty组件
首先来讲一下基于Vant的占位符(空状态)组件,Vant的占位符组件使用起来很简单,直接引入到项目中,然后一行代码搞定,这种使用方式也是比较受欢迎的,因为简单快捷。具体的使用步骤如下所示:
<van-empty v-if="toDoData.length === 0" description="暂无数据" />
根据数据是否为空来判断显示占位符,直接使用即可。具体显示效果如下所示:
二、自定义占位符组件
有些时候Vant组件自带的占位符效果不能满足业务需求,这就需要开发者通过自定义占位符组件,来实现业务需要的占位符效果,这里就分享一个作者自己封装的占位符组件,有需要的可以直接拿走使用,具体代码如下所示:
1、自定义组件文件
自定义组件的文件也比较容易实现,直接上代码:
<template>
<van-empty :image="image" :description="context" v-if="show" />
</template>
<script>
export default {
props: {
context: {
type: String,
default: "当前页面为空",
},
show: {
type: Boolean,
default: true,
},
},
data() {
return {
image: require("@/assets/imgs/none.png"),
};
},
};
</script>
2、具体使用占位符的地方
自定义占位符组件创建之后,需要在使用的地方引入,然后直接调用自定义组件即可。具体使用的代码如下所示:
<template>
<div slot="body" class="container offset-bottom">
<div class="tab-position">
<empty v-if="taskData.length<=0" context="暂无数据"></empty>
</div>
</div>
</template>
<script>
import Empty from "../FlowSpecial/Empty.vue"; //引入组件
export default {
components: {
Empty, //注册
},
data() {
return {
taskData: [], //数据源的数组
};
},
}
</script>
<style scoped>
</style>
具体效果如下所示:
最后
通过上面介绍的操作步骤,在基于移动端的占位符(空状态)使用就游刃有余了,这也是在开发过程中必用的功能,尤其是对于初级开发者来说,更应该掌握这种空状态的使用,这里不再赘述。