Loading

函数式加载中组件

• 用完即走-函数式编程打开和关闭 loading，无需维护其显隐状态，代码结构逻辑更清晰
• 全屏展示-不用添加新的标签

组件示例 1-直接传入字符串

通过函数式的方法打开关闭loading

<template>
  <div>
    <Button type="primary" @click="handleLoading">
      loading（2″后自动关闭）
    </Button>
  </div>
</template>

<script setup lang="ts">
import { Button, Loading } from "leisure-lib";
const handleLoading = () => {
  const loading = Loading.show();
  setTimeout(() => {
    loading.close();
  }, 2000);
};
</script>

<style scoped></style>

模型 type / inteface

interface LoadingI {
  vNode: VNode | null;
  parent: HTMLElement;
  show: () => void;
  close: () => void;
}

方法

方法名	参数	返回值	说明
show	无	Loading 实例对象	新建一个 Loading 实例
close	无	无	销毁当前 Loading 实例