EarthSDK UI

Appearance

无数据 Nodata ​

当数据为空或者未加载出时显示的内容

示例代码 ​

展示代码
复制代码
<script setup>
import { ref } from "vue";
import { vNodata, ESNodata } from "earthsdk-ui";
const nodata = ref(true);
const opt = ref({
  nodata: true,
  nodataText: "空空如也",
  nodataType: "n0",
  color: "red",
});
</script>

<template>
  <div class="v-nodata_content">
    <div>v-nodata:通过绑定v-nodata,并自定义显示内容</div>
    <div v-nodata="opt" style="width: 500px; height: 200px"></div>
  </div>
  <div class="v-nodata_content">
    <div>v-nodata:默认显示内容</div>
    <div v-nodata="nodata" style="width: 500px; height: 200px"></div>
  </div>

  <div class="v-nodata_content">
    <ESNodata class="es_nodata" color="black"></ESNodata>
    <ESNodata class="es_nodata" nodataType="n0"></ESNodata>
  </div>
</template>

<style scoped>
.v-nodata_content {
  margin-top: 15px;
}
.es_nodata {
  margin: 15px 0;
}
</style>

Attributes ​

属性名说明类型默认值
nodataType类型stringn1
nodataText说明文字string""
color字体颜色string#FFFFFF