vue element loading遮罩层添加按钮功能实现
作者：F N Nancy
这篇文章主要介绍了vue element loading遮罩层添加按钮功能实现,通过实例代码补充介绍了vue+elementui的this.$loading遮罩使用方法,需要的朋友可以参考下
element loading遮罩层添加按钮
<el-table v-loading="loadingText" element-loading-text="拼命加载中" :data="tableData" :tableColumn="tableColumn" :span-method="objectSpanMethod" border :cell-style="cellStyle" :header-cell-style="{'text-align': 'center'}">
<template v-slot:append>
<el-button v-if="loadingText" type="primary" class="cancel-loading" @click="cancelLoading" size="mini">取消</el-button>
</template>
<el-table-column v-for="item in tableColumn" :key="item.prop" :prop="item.prop" :label="item.label" min-width="100" />
</el-table>data() {
return {
loadingText: false,
}
}
cancelLoading() {
this.loadingText = false;
},.cancel-loading {
position: absolute;
top: 62%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 9999; /* 确保 z-index 高于遮罩层 */
}
扩展：
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()到此这篇关于element loading遮罩层添加按钮的文章就介绍到这了,更多相关element loading遮罩层内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！