feat(element3): use ElLoading.service replace useLoading api

packages/element3/packages/loading/index.js

@@ -1,10 +1,6 @@
 import directive from './directive'
 import service from './service'
 
-export function useLoading() {
-  return service
-}
-
 export default {
   install(app) {
     app.use(directive)

packages/element3/src/index.js

@@ -49,7 +49,7 @@ import { ElAvatar } from './components/Avatar'
 // Notice
 import ElAlert from '../packages/alert'
 
-import ElLoading, { useLoading } from '../packages/loading'
+import ElLoading from '../packages/loading'
 
 import { Message } from './components/Message'
 
@@ -285,7 +285,6 @@ export {
   ElAutocomplete,
   Message,
   Msgbox,
-  useLoading,
   Notification,
   install,
   setupGlobalOptions

packages/element3/types/element3.d.ts

@@ -42,7 +42,7 @@ export { ElTag } from './tag'
 export { ElRate } from './rate'
 export { Message } from './message'
 export { useNotify } from './notification'
-export { useLoading, ElLoading } from './loading'
+export { ElLoading } from './loading'
 export { useMsgbox } from './message-box'
 export { ElSteps } from './steps'
 export { ElUpload } from './upload'

packages/element3/types/loading.d.ts

@@ -1,10 +1,5 @@
-import Vue, { VNodeDirective, PluginObject } from 'vue'
-
 import { ElementUIComponent } from './component'
 
-export const useLoading = () => (options: LoadingServiceOptions) =>
-  ILoadingComponent
-
 /** Options used in Loading service */
 export interface LoadingServiceOptions {
   /** The DOM node Loading needs to cover. Accepts a DOM object or a string. If it's a string, it will be passed to `document.querySelector` to get the corresponding DOM node */
@@ -39,21 +34,20 @@ export interface ILoadingComponent {
 }
 
 /** Loading directive definition */
-export interface ElLoadingDirective extends VNodeDirective {
+export interface ElLoadingDirective {
   name: 'loading'
   value: boolean
   modifiers: {
     body: boolean
     fullscreen: boolean
   }
 }
-export const ElLoading: IlLoading
+export const ElLoading: IElLoading
 /** Show animation while loading data */
-interface IlLoading extends ElementUIComponent {
+interface IElLoading extends ElementUIComponent {
   /** If you do not have a specific DOM node to attach the Loading directive, or if you simply prefer not to use Loading as a directive, you can call this service with some configs to open a Loading instance. */
-  service(options: LoadingServiceOptions): ElLoadingComponent
-
-  directive: PluginObject<never>
+  service(options: LoadingServiceOptions): ILoadingComponent
+  directive: any
 }
 
 declare module '@vue/runtime-core' {

packages/website/src/docs/loading.md

@@ -22,10 +22,9 @@
 
 <script>
   import { ref } from 'vue'
-  import { useLoading } from 'element3'
+  import { ElLoading } from 'element3'
   export default {
     setup() {
-      let $loading = useLoading()
       let fullscreenLoading = ref(false)
       function openFullScreen1() {
         fullscreenLoading.value = true
@@ -34,7 +33,7 @@
         }, 2000)
       }
       function openFullScreen2(e) {
-        const loading = $loading({
+        const loading = ElLoading.service({
           // lock: true,
           // target: e.target,
           text: 'Loading...',
@@ -69,21 +68,21 @@ import { nextTick } from 'vue'
 ElLoading.service(options)
 ```
 
-其中 `options` 参数为 Loading 的配置项，具体见下表。`LoadingService` 会返回一个 Loading 实例，可通过调用该实例的 `close` 方法来关闭它：
+其中 `options` 参数为 Loading 的配置项，具体见下表。`ElLoading.service` 会返回一个 Loading 实例，可通过调用该实例的 `close` 方法来关闭它：
 
 ```javascript
-let loadingInstance = Loading.service(options)
+let loadingInstance = ElLoading.service(options)
 nextTick(() => {
-  // 以服务的方式调用的 Loading 需要异步关闭
+  // 以服务的方式调用的 ElLoading 需要异步关闭
   loadingInstance.close()
 })
 ```
 
-需要注意的是，以服务的方式调用的全屏 Loading 是单例的：若在前一个全屏 Loading 关闭前再次调用全屏 Loading，并不会创建一个新的 Loading 实例，而是返回现有全屏 Loading 的实例：
+需要注意的是，以服务的方式调用的全屏 ElLoading 是单例的：若在前一个全屏 ElLoading 关闭前再次调用全屏 ElLoading，并不会创建一个新的 ElLoading 实例，而是返回现有全屏 ElLoading 的实例：
 
 ```javascript
-let loadingInstance1 = Loading.service({ fullscreen: true })
-let loadingInstance2 = Loading.service({ fullscreen: true })
+let loadingInstance1 = ElLoading.service({ fullscreen: true })
+let loadingInstance2 = ElLoading.service({ fullscreen: true })
 console.log(loadingInstance1 === loadingInstance2) // true
 ```