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: {}

此内容后续待补充。。。