Loading 載入

載入遮罩，兩種用法：LhLoading.show() 服務式（可全屏可局部，傳回 { close }），或 v-loading 指令直接掛在元素上。

載入遮罩

<template>
  <div class="demo-col">
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhButton type="primary" @click="showFull">全屏遮罩（服務式）</LhButton>
      <LhButton @click="showLocal">局部遮罩（服務式）</LhButton>
      <LhButton @click="toggleDirective">v-loading 指令（{{ loading ? '關閉' : '開啟' }}）</LhButton>
    </div>
    <div
      ref="panel"
      class="demo-note"
      v-loading="loading"
      style="
        position: relative;
        height: 140px;
        border: 1px dashed var(--lh-border-color, #d9d0c2);
        border-radius: 8px;
        margin: 0;
      "
    >
      <p style="padding: 12px; margin: 0">指令式遮罩掛在本元素上（position: relative 由行內樣式提供）。</p>
    </div>
    <p class="demo-note">
      LhLoading.show 不傳 target 即全屏；傳 target 掛指定元素；v-loading 指令走 Vue.use(LhLoading) 註冊。
    </p>
  </div>
</template>

<script>
export default {
  data: () => ({
    loading: false,
  }),
  methods: {
    showFull() {
      const handle = LhLoading.show({ text: '正在高畫質算繪…' })
      setTimeout(() => handle.close(), 1500)
    },
    showLocal() {
      const handle = LhLoading.show({ target: this.$refs.panel, text: '局部載入' })
      setTimeout(() => handle.close(), 1500)
    },
    toggleDirective() {
      this.loading = !this.loading
    },
  },
}
</script>

服務 API

// 不傳 target 即全屏遮罩
const handle = LhLoading.show({ text: '正在算繪…' })
setTimeout(() => handle.close(), 1500)

// 掛在指定元素上（元素需 position: relative）
LhLoading.show({ target: el, text: '局部載入', background: 'rgba(0,0,0,.5)' })

Vue.use(LhLoading) 註冊 v-loading 指令：<div v-loading="isLoading" />，值為 false | string | LhLoadingOptions。

Loading Props

遮罩元件（LhLoadingMask）的 props，LhLoading.show 的 options 透傳同名字段：

屬性	說明	類型	預設值
fullscreen	是否全屏（目標是 body 時為 true）	boolean	false
text	載入提示文案（未傳時取語言包 loading.text）	string	—
background	遮罩背景色（CSS background 值）	string	—
zIndex	層級	number	—
spinner	是否顯示旋轉圖示（預設 true）	boolean	true
sx	sx 快速佈局屬性	—	—