使用mui扩展插件mui.showLoading实现加载框

在使用mui扩展插件mui.showLoading之前，请确保您已经正确引入了mui框架和mui.showLoading插件。您可以通过npm或直接下载压缩包的方式来获取这些资源。

首先，在HTML文件中引入mui和mui.showLoading插件的CSS和JS文件。确保这些文件在您的页面中正确加载。

<!-- 引入mui框架和mui.showLoading插件 -->
<link rel="stylesheet" href="path/to/mui.min.css">
<script src="path/to/mui.min.js"></script>
<script src="path/to/mui.showLoading.min.js"></script>

接下来，我们将在JavaScript代码中使用mui.showLoading方法来创建一个加载框。以下是一个简单的示例：

// 显示加载框
mui.showLoading({ 
    title: '加载中...', // 加载框标题
    text: '正在处理数据', // 加载框文本
    mask: true, // 是否显示蒙版
    shading: true, // 是否显示遮罩层
    className: 'my-loading-class', // 自定义类名
    spinner: 'default', // 加载图标样式，可选值为default、plain、circle等
    textColor: '#000000', // 文本颜色
    maskColor: '#ffffff', // 蒙版颜色
    shadingColor: '#ffffff', // 遮罩层颜色
    zIndex: 9999, // z-index值，用于控制加载框的堆叠顺序
    onClose: function() { // 关闭加载框时的回调函数
        console.log('加载完成！');
    }
});

在上面的示例中，我们通过调用mui.showLoading方法来显示一个简单的加载框。这个方法接受一个包含各种配置项的对象作为参数。通过调整这些配置项，您可以自定义加载框的外观和行为。

当您完成数据加载后，可以通过调用mui.hideLoading方法来关闭加载框。例如：

mui.hideLoading();

这将隐藏当前显示的加载框。请注意，如果您在多个地方使用了mui.showLoading方法，您需要确保每个加载框都有对应的关闭操作。

mui.showLoading插件提供了一种方便的方式来在您的应用程序中添加加载效果。通过简单的配置，您可以自定义加载框的外观和行为，使其与您的应用程序风格相匹配。此外，它还提供了关闭加载框时的回调函数，使您可以在数据加载完成后执行一些操作。