loading

基础语法：v-loading:样式选择='loading状态'

样式选择：

• style[1-6]：默认 style1

简单使用

demo1

<template>
  <demo>
    <div class="demo-fill-box" v-loading:style3="demoData.loading">
      <button class="demo-button" @click="getData">点击获取数据</button>
    </div>
  </demo>
</template>
<script lang="ts" setup>
import demo from '../../global/demo.vue'
import { reactive } from 'vue'

type DemoData = {
  loading: boolean
}

const demoData = reactive<DemoData>({
  loading: false
})

const getData = () => {
  demoData.loading = true
  setTimeout(() => {
    demoData.loading = false
  }, 3000);
}

</script>

自定义样式

demo2

<template>
  <demo>
    <div class="demo-fill-box" v-loading:[demoData.loadingStyle]="demoData.loading">
      <button class="demo-button" @click="getData">点击获取数据</button>
    </div>
  </demo>
</template>
<script lang="ts" setup>
import demo from '../../global/demo.vue'
import { reactive } from 'vue'

type DemoData = {
  loading: boolean,
  loadingStyle: string
}

const demoData = reactive<DemoData>({
  loading: false,
  loadingStyle: `<div class="custom"></div>`
})

const getData = () => {
  demoData.loading = true
  setTimeout(() => {
    demoData.loading = false
  }, 3000);
}

</script>

<style lang="less" scoped>
.demo-fill-box {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 400px;
  /* HTML: <div class="loader"></div> */
  :deep(.custom) {
    width: 40px;
    height: 40px;
    display: grid;
    &::before,
    &::after {
      content: "";
      grid-area: 1/1;
      background: #25b09b;
      clip-path: polygon(0 0,50% 50%, 0 100%);
      animation: custom-1 2s infinite;
    }
    &::after {
      animation-delay: -1.5s;
      --s: 90deg;
    }
  }
}

@keyframes custom-1 {
    0%,12.5%    {transform:rotate(var(--s,0deg)) rotate(0deg)}
    37.5%,62.5% {transform:rotate(var(--s,0deg)) rotate(-180deg)}
    87.5%,100%  {transform:rotate(var(--s,0deg)) rotate(-360deg)}
}
</style>

样式选择

demo3