vue?element?loading遮罩層添加按鈕功能實現

更新時間：2024年03月06日 10:24:51 作者：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遮罩層內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: