Loading 加载

提供两种加载样式：基础遮罩加载和 Lottie 动画加载。

基础用法

<template>
  <div>
    <ElButton @click="setLoading">
      {{ loading ? '取消' : '开启' }}loading</ElButton
    >
    <div class="loading-box">
      123456
      <MLoading :loading="loading" :z-index="1"></MLoading>
    </div>
    <div class="loading-box">
      123456
      <MLoadingLottie :loading="loading" :z-index="1"></MLoadingLottie>
    </div>

    <MMarkdownView :value="readme"></MMarkdownView>
  </div>
</template>

<script setup lang="ts">
import readme from '@/components/loading/README.md?raw'
import { ref } from 'vue'

const loading = ref(true)
const setLoading = () => {
  loading.value = !loading.value
}
</script>

<style lang="scss" scoped>
.loading-box {
  display: inline-block;
  margin-left: 20px;
  width: 400px;
  height: 400px;
}
</style>

MLoading API

Loading 属性

属性名	说明	类型	默认值
loading	是否显示 loading	boolean	false
zIndex	遮罩层 z-index	number	9999

Loading 插槽

插槽名	说明
default	自定义 loading 内容

MLoadingLottie API

Lottie 动画版本的 Loading 组件。

LoadingLottie 属性

属性名	说明	类型	默认值
loading	是否显示 loading	boolean	false