加载动画 Loading

加载数据时显示动效。

示例代码

<script setup lang="ts">
import { ESLoading } from "earthsdk-ui";
import { ref } from "vue";
const loading = ref(true);
</script>

<template>
  <div style="width: 300px; height: 100px" v-loading="loading"></div>
  <div style="width: 300px; height: 100px">
    <ESLoading :loadingText="'加载中...'" :color="'#fff'"></ESLoading>
  </div>
  <div style="width: 300px; height: 100px">
    <ESLoading loadingType="l1" :loadingText="'加载中...'" :color="'red'"></ESLoading>
  </div>
  <div style="width: 300px; height: 100px">
    <ESLoading
      loadingType="l2"
      :loadingText="'加载中...'"
      :color="'green'"
    ></ESLoading>
  </div>
  <div style="width: 300px; height: 100px">
    <ESLoading
      loadingType="l3"
      :loadingText="'加载中...'"
      :color="'yellow'"
    ></ESLoading>
  </div>
  <div style="width: 300px; height: 100px">
    <ESLoading
      loadingType="l4"
      :loadingText="'加载中...'"
      :color="'purple'"
    ></ESLoading>
  </div>
  <div style="width: 300px; height: 100px">
    <ESLoading
      loadingType="l5"
      :loadingText="'加载中...'"
      :color="'black'"
    ></ESLoading>
  </div>
</template>

Attributes

属性名	说明	类型	默认值
loadingType	loading类型	string	l0
loadingText	loading文字	string	""
color	loading颜色	string	#335dfd

指令

名称	说明	参数
v-loading	是否显示动画	boolean / Options