releases 4.0.77

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vxe-pc-ui",
-  "version": "4.0.76",
+  "version": "4.0.77",
   "description": "A vue based PC component library",
   "scripts": {
     "update": "npm install --legacy-peer-deps",

packages/components.ts

@@ -38,7 +38,7 @@ import VxeLink from './link'
 import VxeListDesign from './list-design'
 import VxeListView from './list-view'
 import VxeList from './list'
-import VxeLoading from './loading'
+import VxeLoading, { LoadingController } from './loading'
 import VxeMenu from './menu'
 import VxeModal, { ModalController } from './modal'
 import VxeNumberInput from './number-input'
@@ -147,6 +147,7 @@ setLanguage(defaultLanguage)
 setTheme('light')
 
 // 兼容老版本
+export const loading = LoadingController
 export const modal = ModalController
 export const drawer = DrawerController
 export const print = printHtml

packages/dynamics/index.ts

@@ -1,12 +1,17 @@
 import { defineComponent, h, createApp, resolveComponent, reactive, createCommentVNode } from 'vue'
 
-import type { VxeModalDefines, VxeModalComponent, VxeDrawerDefines, VxeDrawerComponent } from '../../types'
+import type { VxeModalDefines, VxeModalComponent, VxeLoadingComponent, VxeDrawerDefines, VxeLoadingProps, VxeDrawerComponent } from '../../types'
 
 let dynamicContainerElem: HTMLElement
 
-export const dynamicStore = reactive({
-  modals: [] as VxeModalDefines.ModalOptions[],
-  drawers: [] as VxeDrawerDefines.DrawerOptions[]
+export const dynamicStore = reactive<{
+  modals: VxeModalDefines.ModalOptions[]
+  drawers: VxeDrawerDefines.DrawerOptions[]
+  globalLoading: null | VxeLoadingProps
+}>({
+  modals: [],
+  drawers: [],
+  globalLoading: null
 })
 
 /**
@@ -15,7 +20,7 @@ export const dynamicStore = reactive({
 const VxeDynamics = defineComponent({
   setup () {
     return () => {
-      const { modals, drawers } = dynamicStore
+      const { modals, drawers, globalLoading } = dynamicStore
       return [
         modals.length
           ? h('div', {
@@ -26,7 +31,8 @@ const VxeDynamics = defineComponent({
           ? h('div', {
             class: 'vxe-dynamics--drawer'
           }, drawers.map((item) => h(resolveComponent('vxe-drawer') as VxeDrawerComponent, item)))
-          : createCommentVNode()
+          : createCommentVNode(),
+        globalLoading ? h(resolveComponent('vxe-loading') as VxeLoadingComponent, globalLoading) : createCommentVNode()
       ]
     }
   }

packages/loading/index.ts

@@ -1,16 +1,34 @@
 import { App } from 'vue'
 import { VxeUI } from '@vxe-ui/core'
 import VxeLoadingComponent from './src/loading'
-import { dynamicApp } from '../dynamics'
+import { dynamicApp, dynamicStore, checkDynamic } from '../dynamics'
+
+import type { VxeLoadingProps } from '../../types'
 
 export const VxeLoading = Object.assign({}, VxeLoadingComponent, {
   install (app: App) {
     app.component(VxeLoadingComponent.name as string, VxeLoadingComponent)
   }
 })
 
+export const LoadingController = {
+  open (options?: VxeLoadingProps) {
+    const opts = Object.assign({}, options)
+    dynamicStore.globalLoading = {
+      modelValue: true,
+      text: opts.text,
+      icon: opts.icon
+    }
+    checkDynamic()
+  },
+  close () {
+    dynamicStore.globalLoading = null
+  }
+}
+
 dynamicApp.component(VxeLoadingComponent.name as string, VxeLoadingComponent)
 VxeUI.component(VxeLoadingComponent)
+VxeUI.loading = LoadingController
 
 export const Loading = VxeLoading
 export default VxeLoading

types/components/loading.d.ts

@@ -70,5 +70,23 @@ export interface VxeLoadingSlots {
   default: (params: VxeLoadingSlotTypes.DefaultSlotParams) => any
 }
 
+/**
+ * 全局加载中
+ */
+export interface LoadingController {
+  /**
+   * 打开
+   * @param options 参数
+   */
+  open(options?: {
+    icon?: VxeLoadingPropTypes.Icon
+    text?: VxeLoadingPropTypes.Text
+  }): void
+  /**
+   * 关闭
+   */
+  close(): void
+}
+
 export const Loading: typeof VxeLoading
 export default VxeLoading

types/ui/index.d.ts

@@ -1,5 +1,6 @@
 import { App } from 'vue'
 import { VxeUI, getI18n, setConfig } from '@vxe-ui/core'
+import { LoadingController } from '../components/loading'
 import { ModalController } from '../components/modal'
 import { DrawerController } from '../components/drawer'
 import { VxePrintDefines } from '../components/print'
@@ -36,6 +37,7 @@ export interface VxeGlobalStore {
 export const globalStore: VxeGlobalStore
 
 // 兼容老版本
+export const loading: LoadingController
 export const modal: ModalController
 export const drawer: DrawerController
 export const print: VxePrintDefines.PrintFunction
@@ -46,6 +48,7 @@ declare module '@vxe-ui/core' {
   export interface VxeUIExport {
     uiVersion: string
     tableVersion: string
+    loading: LoadingController
     modal: ModalController
     drawer: DrawerController
     dynamicApp: App<Element>