loading.md

loading 加载图标

基础用法

<template>
  <pl-loading>加载中…</pl-loading>
</template>

全局调用

<script>
import { getCurrentInstance } from 'vue'
export default {
  setup() {
    const app = getCurrentInstance()
    const { $loading } = app.appContext.config.globalProperties

    const showLoading = () => {
      let loading = $loading({ text: '加载中…' })

      setTimeout(() => {
        loading.close()
      }, 2000)
    }

    return {
      showLoading
    }
  }
}
</script>

局部调用

<template>
  <div class="box" ref="loadingBox"></div>
</template>
<script>
import { getCurrentInstance, ref } from 'vue'
export default {
  setup() {
    const app = getCurrentInstance()
    const { $loading } = app.appContext.config.globalProperties

    const loadingBox = ref(null)

    const showPartLoading = () => {
      let loading = $loading({ text: '加载中…', target: loadingBox.value })

      setTimeout(() => {
        loading.close()
      }, 2000)
    }

    return {
      loadingBox,
      showPartLoading
    }
  }
}
</script>

指令调用

<template>
  <pl-button type="primary" @click="isShow=!isShow">{{isShow ? '关闭' : '打开'}}loading指令</pl-button>
  <div class="box" v-loading="isShow"></div>
</template>
<script>
import { ref } from 'vue'
export default {
  setup() {
    const isShow = ref(false)

    return {
      isShow
    }
  }
}
</script>

多指令调用

<template>
  <pl-button type="primary" @click="isShow=!isShow">{{isShow ? '关闭' : '打开'}}指令1</pl-button>
  <pl-button type="primary" @click="isShow2=!isShow2">{{isShow2 ? '关闭' : '打开'}}指令2</pl-button>
  <div class="box" v-loading:登录中…="isShow" v-loading:加载中…="isShow2"></div>
</template>
<script>
import { ref } from 'vue'
export default {
  setup() {
    const isShow = ref(false)
    const isShow2 = ref(false)

    return {
      isShow,
      isShow2
    }
  }
}
</script>

Attributes

参数	说明	类型	可选值	默认值
vertical	是否垂直排列	Boolean	—	false

Slots

name	说明
(default)	loading提示文字

Global Methods

方法名	说明	参数	返回值
$loading	打开loading	[Options]	LoadingObject

Options

参数	说明	类型	可选值	默认值
text	loading文字	String	—	—
vertical	是否垂直排列	Boolean	—	false
target	loading父节点	Node	—	document.body

LoadingObject

方法名	说明	参数	返回值
close	关闭loading	—	—