vxe-table-demonic/packages/loading/src/loading.ts

一个基于 vue 的 PC 端表单/表格组件，支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、树形结构、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、JSON 配置式...

import { defineComponent, h, computed } from 'vue'
import GlobalConfig from '../../v-x-e-table/src/conf'

export default defineComponent({
  name: 'VxeLoading',
  props: {
    modelValue: Boolean,
    icon: String,
    text: String
  },
  setup (props, { slots }) {
    const computeLoadingIcon = computed(() => {
      return props.icon || GlobalConfig.icon.LOADING
    })

    const computeLoadingText = computed(() => {
      const loadingText = GlobalConfig.loadingText
      return props.text || (loadingText === null ? loadingText : GlobalConfig.i18n('vxe.loading.text'))
    })

    return () => {
      const loadingIcon = computeLoadingIcon.value
      const loadingText = computeLoadingText.value
      return h('div', {
        class: ['vxe-loading', {
          'is--visible': props.modelValue
        }]
      }, slots.default ? [
        h('div', {
          class: 'vxe-loading--warpper'
        }, slots.default({}))
      ] : [
        h('div', {
          class: 'vxe-loading--chunk'
        }, [
          loadingIcon ? h('i', {
            class: loadingIcon
          }) : h('div', {
            class: 'vxe-loading--spinner'
          }),
          loadingText ? h('div', {
            class: 'vxe-loading--text'
          }, `${loadingText}`) : null
        ])
      ])
    }
  }
})