ui-loadmask 加载遮罩组件

版本：v2.3.11

加载遮罩组件用于在页面或元素上显示加载遮罩，阻止用户交互

基本使用

<template>
  <div class="loadmask-demo">
    <ui-loadmask v-model:show="showMask" />
    <ui-button @click="showMask = true">显示加载遮罩</ui-button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const showMask = ref(false);
</script>

<style scoped>
.loadmask-demo {
  padding: 20px;
  position: relative;
  min-height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

Props

参数	类型	默认值	说明
show	Boolean	false	是否显示加载遮罩
text	String	'加载..'	加载文本
spinnerSize	Number	24	加载图标大小，单位：px
color	String	'#333'	加载图标颜色
background	String	'rgba(255, 255, 255, 0.8)'	遮罩背景
zIndex	Number	1000	遮罩层级

Events

事件	说明	回调参数
show	显示遮罩时触	-
hide	隐藏遮罩时触	-

Slots

名称	说明
default	自定义加载内
spinner	自定义加载图

在线演示

扫码或点击链接在手机上查看完整演示

https://shadow-ui3-demo.nooko.cn/#/pages/functional/loadmask/loadmask