vue+elementui的this.$loading遮罩使用

this.$loading遮罩使用

1、 遮罩是什么

• 在Vue.js组件库element-ui中，遮罩（mask）是一个用于遮盖页面某一部分的半透明层，通常用于在页面加载、弹窗等情况下禁止用户与页面进行交互。
• element-ui中的遮罩（mask）是一个非常常见的UI组件，可以用于在页面加载、弹窗等情况下禁止用户与页面进行交互，提升用户体验。
• element-ui中的遮罩（mask）通常与其他组件一起使用，比如在使用this.$loading方法显示加载指示器时，会自动添加一个遮罩层，禁止用户与页面进行交互。
• 同时，element-ui还提供了一个名为Dialog（对话框）的组件，该组件也可以添加一个遮罩层。当Dialog组件显示时，会自动添加一个遮罩层，禁止用户与页面进行交互，使得用户只能与Dialog组件进行交互，从而达到弹窗的效果。
• 遮罩层的样式可以通过element-ui提供的样式类名进行自定义，比如可以设置遮罩层的背景颜色、透明度、z-index等属性。

2、遮罩怎么使用

在Vue.js组件库element-ui中，可以通过调用this.$loading方法来显示一个加载指示器和遮罩层。具体的代码示例如下：

// 在Vue组件中调用this.$loading方法来显示加载指示器和遮罩层
this.$loading({
  lock: true, // 是否禁止背景滚动，默认为false
  text: 'Loading', // 加载文本提示，默认为'Loading'
  spinner: 'el-icon-loading', // 加载图标类型，默认为'el-icon-loading'
  background: 'rgba(0, 0, 0, 0.7)' // 遮罩层背景颜色，默认为'rgba(0, 0, 0, 0.7)'
})

在上述示例代码中，我们调用了this.$loading方法，并传入了一个配置对象作为参数。其中，lock属性控制是否禁止背景滚动，text属性设置加载文本提示，spinner属性设置加载图标类型，background属性设置遮罩层背景颜色。

当调用this.$loading方法后，element-ui会自动在页面上添加一个遮罩层，并在遮罩层上方显示一个加载指示器。当数据加载完成后，可以调用返回的Loading实例对象的close方法来关闭加载指示器和遮罩层。

// 在Vue组件中调用返回的Loading实例对象的close方法来关闭加载指示器和遮罩层
const loadingInstance = this.$loading({
  lock: true,
  text: 'Loading',
  spinner: 'el-icon-loading',
  background: 'rgba(0, 0, 0, 0.7)'
})

// 数据加载完成后调用close方法来关闭加载指示器和遮罩层
loadingInstance.close()