Loading 加载状态

加载数据时显示动效。

基础用法

指令模式

只需调用组件方法osLoading即可，全屏加载触发多次也只会返回首个实例，通过实例方法close能直接关闭加载窗口。

html

<script setup>
import { ref } from 'vue'
import { osLoading } from 'osui'
const loading = ref(true)
const toggleLoading = () => {
  const temp = osLoading.service({
    label: 'Loading...'
  })
  setTimeout(() => {
    temp.close()
  }, 3000)
}
</script>
<os-button @click="toggleLoading">Loading</os-button>

区域模式

区域位置能切换加载状态，v-os-loading.fullscreen添加后可全屏显示。

Color	Level	Background Class	Text Class	CSS Variable
Primary	base	.os-background-primary	.os-text-primary	--os-color-primary
Primary	base	.os-background-primary	.os-text-primary	--os-color-primary

html

<div v-os-loading="true" os-loading-label="Loading.">
  <table>
    <!-- ... -->
  </table>
</div>

Loading 加载状态 ​

基础用法 ​

指令模式 ​

区域模式 ​

Loading 加载状态

基础用法

指令模式

区域模式