create-api

• 可通过 api 方式调用
  • 可将 vue 组件挂载到全局实例上供全局调用
  • 通过 useComponent 函数调用 vue 组件

在线demo

安装

基于 npm

pnpm

pnpm i -S @xiaohaih/create-api

npm

npm install @xiaohaih/create-api

yarn

yarn add @xiaohaih/create-api

基于 cdn

<script src="https://unpkg.com/@xiaohaih/create-api/dist/index.umd.cjs"></script>

使用 - 通过函数调用

<script lang="ts" setup>
import { useComponent } from '@xiaohaih/create-api';

const dialogComponent = useComponent(HDialog);

function clickHandle() {
    dialogComponent({
        title: '显示弹窗',
    }).show();
}
</script>

使用 - 挂载到 vue 实例上

main.ts

import { createApp } from 'vue';
import { install } from '@xiaohaih/create-api';

const app = createApp(App);
app.use(install);

a.vue

import { create } from '@xiaohaih/create-api';
import Dialog from './components/dialog.vue';

// 直接挂载弹窗
create(Dialog);
// 或者通过实例挂载弹窗
// getCurrentInstance()?.proxy?.$create(Lump);

// 在 js 中调用, 默认不具备响应式
// 如要支持响应式, props 应为 ref 或 reactive
Dialog.$create({
    title: 'test',
    content: '内容',
}).show();

// 在 vue 组件中可以通过 getCurrentInstance 调用
getCurrentInstance()?.proxy?.$createDialog({
    title: 'test',
    content: '内容',
}).show();

src/types/create.d.ts

// 为全局组件补充声明
import type { CreateFn } from '@xiaohaih/create-api';
import type Dialog from '@/components/dialog.vue';

declare module 'vue' {
    interface ComponentCustomProperties {
        $createDialog: CreateFn<typeof Dialog>;
    }
}

为 typescript 补充声明

tips: 因全局上补充了属性, 且直接暴露的源文件, 故需加上如下代码

# tsconfig.json
{
    "compilerOptions": {
        "types": ["@xiaohaih/create-api/global"]
    }
}

导出的函数

install(vueApp, [options]) 全局安装方法

• 参数:
  • {Vue} vueApp 全局实例
  • {object} [options] 可选配置项
  • {boolean} [options.single] 是否作为当前上下文中的单例, 默认 true
  • {boolean} [options.global] 是否将组件挂载到根实例上
  • {boolean} [options.mergeProps] 重复调用时是否与上次调用时传的 props 进行合并
  • {string | Element | (() => Element)} [options.appendTo] 挂载到的节点, 默认 document.body
• tips:
  • 会为全局数据上增加 $create 方法, $create 等同下方的 create

useComponent 通过 js 方式挂载组件

• 参数
  • {VueComponent} component 需要挂载的组件
  • {object | VueInstance} [options | instance] 传递的配置项(与 install 第二个参数相同), 无配置项时可传第三个参数
  • {VueInstance} [instance] 挂载时绑定到的实例
• 返回值
  • {(props: 传给组件的参数, children: 插槽或子级) => CustomComponent} 调用 useComponent 后的返回值
  • CustomComponent 是 component 的实例, 在实例上增加了四个方法👇
    • {() => CustomComponent} show 显示组件(需内部实现 show 方法)
    • {() => CustomComponent} hide 隐藏组件(需内部实现 hide 方法)
    • {() => void} $unmount 卸载组件
    • {(props: object | null, mergeProps?: boolean) => CustomComponent} $updateProps 手动更新参数
    • {(children?: VNodeChildren | null) => CustomComponent} $updateSlots 主动更新插槽
    • {() => CustomComponent} $forceUpdate 强制更新组件

create 执行后返回组件自身

• tips:
  • 会为组件创建 $create 方法, 组件可调用自身的 $create 来挂载组件
  • 为全局注册 $create组件名称(小驼峰) 方法, 通过该方法亦可创建组件
    • 参数
      • {object | null} [props] 传递给组件的参数
      • {Function|object} [children] 子级或插槽
      • {object} [options] 传递的配置项(与 install 第二个参数相同)