Loading 加载 ​

<template>
  <f-button :on-click="startLoading">切换加载状态</f-button>
  <f-table v-loading="loading" :data="data" :columns="columns" />
</template>

<script lang="ts" setup>
  import { ref } from 'vue'

  const loading = ref(false)

  const startLoading = (): void => {
    loading.value = !loading.value
  }

  const columns = ref([
    {
      title: '姓名',
      key: 'name'
    },
    {
      title: '年龄',
      key: 'age'
    },
    {
      title: '介绍',
      key: 'introduce'
    }
  ])

  const data = ref([
    {
      name: '卡莉斯塔',
      age: '22',
      introduce: '她的被动可以在发动攻击后进行小距离的跳跃'
    },
    {
      name: '艾希',
      age: '16',
      introduce: '拥有强大减速和控制能力的远程射手'
    },
    {
      name: '李青',
      age: '34',
      introduce: '非常优秀的打野英雄'
    },
    {
      name: '贾克斯',
      age: '109',
      introduce: '取得优势的武器可以输出成吨的伤害'
    }
  ])
</script>

<template>
  <f-table v-loading="true" f-loading-text="加载中..." :data="data" :columns="columns" />
</template>

<script lang="ts" setup>
  const columns = ref([
    {
      title: '姓名',
      key: 'name'
    },
    {
      title: '年龄',
      key: 'age'
    },
    {
      title: '介绍',
      key: 'introduce'
    }
  ])

  const data = ref([
    {
      name: '卡莉斯塔',
      age: '22',
      introduce: '她的被动可以在发动攻击后进行小距离的跳跃'
    },
    {
      name: '艾希',
      age: '16',
      introduce: '拥有强大减速和控制能力的远程射手'
    },
    {
      name: '李青',
      age: '34',
      introduce: '非常优秀的打野英雄'
    },
    {
      name: '贾克斯',
      age: '109',
      introduce: '取得优势的武器可以输出成吨的伤害'
    }
  ])
</script>

<f-table
  v-loading="true"
  f-loading-text="请稍候..."
  f-loading-fontColor="#fff"
  f-loading-background="#0789c766"
  :data="data"
  :columns="columns"
/>

<script setup>
  import { ref } from 'vue'
  const fullLoading = ref(false)
  const onShowLoading = () => {
    fullLoading.value = true
    setTimeout(() => {
      fullLoading.value = false
    }, 2000)
  }
</script>
<template>
  <f-button @click="onShowLoading">show loading</f-button>
  <f-table
    v-loading.fullscreen="fullLoading"
    f-loading-text="请稍候..."
    :data="data"
    :columns="columns"
  />
</template>