前端开发：基于移动端的占位符（空状态）使用

三掌柜

发布于 2022-04-12 17:00:40

1.4K0

发布于 2022-04-12 17:00:40

文章被收录于专栏：三掌柜的技术空间三掌柜的技术空间

前言

在基于移动端的前端开发的时候，需要做到仿原生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>

具体效果如下所示：