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 弹
</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: {}
此内容后续待补充。。。
