快捷導(dǎo)航

vue?element?loading遮罩層添加按鈕功能實(shí)現(xiàn)

更新時(shí)間：2024年03月06日 10:24:51 作者：F?N?Nancy

這篇文章主要介紹了vue?element?loading遮罩層添加按鈕功能實(shí)現(xiàn),通過(guò)實(shí)例代碼補(bǔ)充介紹了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 高于遮罩層 */
}

在這里插入圖片描述

擴(kuò)展：

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

this.$loading遮罩使用

1、遮罩是什么

在Vue.js組件庫(kù)element-ui中，遮罩（mask）是一個(gè)用于遮蓋頁(yè)面某一部分的半透明層，通常用于在頁(yè)面加載、彈窗等情況下禁止用戶與頁(yè)面進(jìn)行交互。
element-ui中的遮罩（mask）是一個(gè)非常常見(jiàn)的UI組件，可以用于在頁(yè)面加載、彈窗等情況下禁止用戶與頁(yè)面進(jìn)行交互，提升用戶體驗(yàn)。
element-ui中的遮罩（mask）通常與其他組件一起使用，比如在使用this.$loading方法顯示加載指示器時(shí)，會(huì)自動(dòng)添加一個(gè)遮罩層，禁止用戶與頁(yè)面進(jìn)行交互。
同時(shí)，element-ui還提供了一個(gè)名為Dialog（對(duì)話框）的組件，該組件也可以添加一個(gè)遮罩層。當(dāng)Dialog組件顯示時(shí)，會(huì)自動(dòng)添加一個(gè)遮罩層，禁止用戶與頁(yè)面進(jìn)行交互，使得用戶只能與Dialog組件進(jìn)行交互，從而達(dá)到彈窗的效果。
遮罩層的樣式可以通過(guò)element-ui提供的樣式類名進(jìn)行自定義，比如可以設(shè)置遮罩層的背景顏色、透明度、z-index等屬性。

2、遮罩怎么使用

在Vue.js組件庫(kù)element-ui中，可以通過(guò)調(diào)用this.$loading方法來(lái)顯示一個(gè)加載指示器和遮罩層。具體的代碼示例如下：

// 在Vue組件中調(diào)用this.$loading方法來(lái)顯示加載指示器和遮罩層
this.$loading({
  lock: true, // 是否禁止背景滾動(dòng)，默認(rèn)為false
  text: 'Loading', // 加載文本提示，默認(rèn)為'Loading'
  spinner: 'el-icon-loading', // 加載圖標(biāo)類型，默認(rèn)為'el-icon-loading'
  background: 'rgba(0, 0, 0, 0.7)' // 遮罩層背景顏色，默認(rèn)為'rgba(0, 0, 0, 0.7)'
})

在上述示例代碼中，我們調(diào)用了this.$loading方法，并傳入了一個(gè)配置對(duì)象作為參數(shù)。其中，lock屬性控制是否禁止背景滾動(dòng)，text屬性設(shè)置加載文本提示，spinner屬性設(shè)置加載圖標(biāo)類型，background屬性設(shè)置遮罩層背景顏色。

當(dāng)調(diào)用this.$loading方法后，element-ui會(huì)自動(dòng)在頁(yè)面上添加一個(gè)遮罩層，并在遮罩層上方顯示一個(gè)加載指示器。當(dāng)數(shù)據(jù)加載完成后，可以調(diào)用返回的Loading實(shí)例對(duì)象的close方法來(lái)關(guān)閉加載指示器和遮罩層。

// 在Vue組件中調(diào)用返回的Loading實(shí)例對(duì)象的close方法來(lái)關(guān)閉加載指示器和遮罩層
const loadingInstance = this.$loading({
  lock: true,
  text: 'Loading',
  spinner: 'el-icon-loading',
  background: 'rgba(0, 0, 0, 0.7)'
})
// 數(shù)據(jù)加載完成后調(diào)用close方法來(lái)關(guān)閉加載指示器和遮罩層
loadingInstance.close()

到此這篇關(guān)于element loading遮罩層添加按鈕的文章就介紹到這了,更多相關(guān)element loading遮罩層內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: