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

此内容后续待补充。。。

巴特西

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

Vue 中使用 extend 开发组件

最新文章

热门文章

巴特西

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

Vue 中使用 extend 开发组件

最新文章

热门文章

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