MoreHook

Appearance

Return to top
On this page

dynamicLoading

全局动画 loading

  • 手动控制进度条loading

  • 自动控制进度条loading

    Demo

    source

Usage

html
<template>
  <div>
    <DynamicLoading
      v-model="showLoadingX"
      @close="closeX"
      :realRrogress="realRrogress"
      :isFakeProgress="false"
    />

    <DynamicLoading v-model="showLoadingY" @close="closeY" />

    <button @click="handlerShowLoadingX">展示-手动控制进度条loading</button>
    <button @click="showLoadingY = true">展示-自动控制进度条loading</button>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { DynamicLoading } from '@morehook/component'

// -------- 自动控制进度条 loading --------
const showLoadingY = ref(false)
function closeY() {
  setTimeout(() => {
    alert('关闭自动控制进度条-loading')
  }, 2000)
}

// -------- 手动控制进度条 loading --------
const showLoadingX = ref(false)
const realRrogress = ref(0)
// eslint-disable-next-line no-undef
let timmer: NodeJS.Timeout | null = null

function handlerShowLoadingX() {
  showLoadingX.value = true
  timmer = setInterval(() => {
    realRrogress.value += 10
  }, 1000)
}

function closeX() {
  if (timmer) {
    clearInterval(timmer)
  }
}
</script>

Type Declarations

Show Type Declarations
typescript
export declare const DynamicLoading: WithInstall<
  DefineComponent<
    {
      modelValue: {
        type: BooleanConstructor
        default: false
      }
      text: {
        type: PropType<string>
        default: string
      }
      closeable: {
        type: BooleanConstructor
        default: true
      }
      realRrogress: {
        type: NumberConstructor
        default: number
      }
      realSumRrogress: {
        type: NumberConstructor
        default: number
      }
      realEndDisable: {
        type: BooleanConstructor
        default: true
      }
      isFakeProgress: {
        type: BooleanConstructor
        default: true
      }
      fakeRigthNull: {
        type: BooleanConstructor
        default: true
      }
      fakeProgressEndTime: {
        type: NumberConstructor
        default: number
      }
      fakeProgressBackText: {
        type: PropType<string>
        default: string
      }
    },
    () => JSX.Element,
    unknown,
    {},
    {},
    ComponentOptionsMixin,
    ComponentOptionsMixin,
    ("close" | "update:modelValue")[],
    "close" | "update:modelValue",
    VNodeProps & AllowedComponentProps & ComponentCustomProps,
    Readonly<
      ExtractPropTypes<{
        modelValue: {
          type: BooleanConstructor
          default: false
        }
        text: {
          type: PropType<string>
          default: string
        }
        closeable: {
          type: BooleanConstructor
          default: true
        }
        realRrogress: {
          type: NumberConstructor
          default: number
        }
        realSumRrogress: {
          type: NumberConstructor
          default: number
        }
        realEndDisable: {
          type: BooleanConstructor
          default: true
        }
        isFakeProgress: {
          type: BooleanConstructor
          default: true
        }
        fakeRigthNull: {
          type: BooleanConstructor
          default: true
        }
        fakeProgressEndTime: {
          type: NumberConstructor
          default: number
        }
        fakeProgressBackText: {
          type: PropType<string>
          default: string
        }
      }>
    > & {
      onClose?: ((...args: any[]) => any) | undefined
      "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined
    },
    {
      text: string
      modelValue: boolean
      closeable: boolean
      realRrogress: number
      realSumRrogress: number
      realEndDisable: boolean
      isFakeProgress: boolean
      fakeRigthNull: boolean
      fakeProgressEndTime: number
      fakeProgressBackText: string
    }
  >
>
export default DynamicLoading
export { dynamicLoadingProps } from "./dynamicLoading"
export type { DynamicLoadingProps } from "./dynamicLoading"
declare module "vue-demi" {
  interface GlobalComponents {
    FastUseDynamicLoading: typeof DynamicLoading
  }
}

Source

Source • Demo • Docs