loading 组件、指令

用于页面和区块的加载中状态

基本使用

雨霖铃

寒蝉凄切

对长亭晚

骤雨初歇

点击展开

<template>
  <ik-button @click="toggleLoading">切换loading</ik-button>
  <div v-loading="loading">
    <span>雨霖铃</span>
    <p>寒蝉凄切</p>
    <p>对长亭晚</p>
    <p>骤雨初歇</p>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
const loading = ref(false)
const toggleLoading = () => {
  loading.value = !loading.value
}
</script>

全屏

点击展开

<ik-button @click="toggleLoading2" type="primary">切换全屏loading</ik-button>
<div v-loading.fullscreen="loading2"></div>

方法调用

点击展开

<script setup>
  const openLoading = () => {
    IkLoading.service({
      duration: 1000,
    })
  }
</script>
<ik-button @click="openLoading">打开loading</ik-button>