Vue 中使用 extent 开发loading等全局 组件

Vue 中使用 extend 开发组件

• 简介：再开发过程中那面会遇到自定义 loading alert 等全局组件，这里我们可以使用 vue 中的extend 来帮助我们完成

• 一个简单extend例子，如下：

• 新建 index.js 文件

import Vue from "vue";
import Index from "./index.vue";

const MessageBoxConstructor = Vue.extend(Index);
const defaultInstanceCallback = action => {
    console.log('---------')
}
let instance;
const initInstance = (): void => {
    instance = new MessageBoxConstructor({
        el: document.createElement('div')
    })
    instance.$mount();
    document.body.appendChild(instance.$el);
    return instance;
}

const UseMessageBox = function (): void {
    if (!instance) {
        initInstance();
    }
}

UseMessageBox.success = () => {
    UseMessageBox();
    console.log('---------------', instance);
    instance.showClose = false;
}

export default UseMessageBox;

• 在建一个index.vue 文件 文件内容如下

<template>
  <div v-if="showClose" style=" color: #fff;position: fixed; top: 0; left: 0; bottom: 0; right: 0; background: rgba(0,0,0, .7); z-index: 9999">
    MessageBox 弹
  </div>
</template>
<script lang="ts">
import {defineComponent, ref} from "@vue/composition-api";
export default defineComponent({
  name: 'UseMessageBox',
  setup(props, _this) {
    const showClose = ref<boolean>(false);
    return {
      showClose,
    }
  }
})
</script>

<style lang="scss">
@import "index";
</style>

• 调用方法 页面中引入 UseMessageBox

UseMessageBox.success()

• 补充一下在开发过程中碰到了一个问题内容如下

 No overload matches this call.
  The last overload gave the following error.
    Argument of type 'VueProxy<unknown, { showClose: Ref<boolean | undefined>; options: Ref<{ title?: string | undefined; message?: string | undefined; cancel?: any; submit?: any; isShowCancel?: boolean | undefined; }>; ... 5 more ...; submit: () => void; }, Data, {}, {}>' is not assignable to parameter of type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<...>> | undefined'.
      Type 'VueProxy<unknown, { showClose: Ref<boolean | undefined>; options: Ref<{ title?: string | undefined; message?: string | undefined; cancel?: any; submit?: any; isShowCancel?: boolean | undefined; }>; ... 5 more ...; submit: () => void; }, Data, {}, {}>' is not assignable to type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<...>>'.
        Types of property 'props' are incompatible.
          Type 'unknown' is not assignable to type 'ArrayPropsDefinition<Record<string, any>> | RecordPropsDefinition<Record<string, any>> | undefined'.
            Type 'unknown' is not assignable to type 'RecordPropsDefinition<Record<string, any>>'.

没有与此调用匹配的重载。

上一次重载导致以下错误。

类型为“VueProxy<unknown，{showClose:Ref<boolean | undefined>”的参数；选项：Ref<{title？：string | undefined；message？：string | undefined；cancel？：any；submit？：boolean | undefined；}>…5更多…；submit:=>void；}，Data，{}，{}>”不能分配给类型为“ComponentOptions”的参数，DefaultMethods<Vue>，DefaultComputed，PropsDefinition<Record<string，any>>，Record<…>|undefined'。

键入“VueProxy<unknown，{showClose:Ref<boolean | undefined>；选项：Ref<{title？：string | undefined；message？：string | undefined；cancel？：any；isshowconcel？：boolean | undefined；}5更多…；submit:（）=>void；}，Data，{}，{}>“不可分配给类型”ComponentOptions<Vue，DefaultData<Vue>，DefaultData<Vue>，DefaultMethods<Vue>，DefaultComputed，PropsDefinition<Record<string，any>>，Record<…>>。

属性“props”的类型不兼容。

类型“unknown”不可分配给类型“ArrayPropsDefinition<Record<string，any>>| RecordPropsDefinition<Record<string，any>>| undefined”。

类型“未知”不能分配给类型“RecordPropsDefinition<Record<string，any>>”。

• 百度了一下，大概明白是什么意思，就是 ComponentOptions 这个的原因
  
  了解ComponentOptions

解决： 在代码中添加 props: {}

此内容后续待补充。。。