element-ui局部添加遮罩
时间: 2023-09-06 16:14:30 浏览: 211
为指定的元素添加遮罩层的示例代码
要在 Element-UI 中局部添加遮罩,你可以使用 `el-loading` 组件来实现。
首先,在需要添加遮罩的组件中,导入 `Loading` 组件:
```
import { Loading } from 'element-ui';
```
然后,在该组件的 `data` 属性中添加一个变量来控制遮罩的显示与隐藏:
```
data() {
return {
loadingInstance: null
};
}
```
接下来,在需要显示遮罩的地方,使用 `this.loadingInstance = Loading.service();` 来创建一个遮罩实例:
```
methods: {
showLoading() {
this.loadingInstance = Loading.service();
}
}
```
在需要隐藏遮罩的地方,使用 `this.loadingInstance.close();` 来关闭遮罩实例:
```
methods: {
hideLoading() {
this.loadingInstance.close();
}
}
```
最后,在组件的模板中,可以通过调用这两个方法来控制遮罩的显示与隐藏:
```
<template>
<div>
<el-button @click="showLoading">显示遮罩</el-button>
<el-button @click="hideLoading">隐藏遮罩</el-button>
</div>
</template>
```
这样就可以在 Element-UI 的组件中局部添加遮罩了。记得根据实际需要进行调整和适配。
阅读全文