快速开始

让我们开始吧!

兼容性

仅支持Vue3,请留意你的vue版本.

建议你为你的项目配置jsx支持,这会极大的改善你的开发体验,否则你就需要一路h函数了.关于如何为你的项目配置jsx支持,vite用户参见@vitejs/plugin-vue-jsx.

安装

通过你项目使用的包管理器进行安装

npm

$ npm install vue3-command-component

yarn

$ yarn add vue3-command-component

pnpm

$ pnpm add vue3-command-component

bun

$ bun add vue3-command-component

多嘴一句,建议你使用Anthony Fu的@antfu/ni

npm i -g @antfu/ni

然后你就可以无视包管理器差异了

ni vue3-command-component

使用

现在你可以直接使用了。

import { defineComponent, h } from "vue";
import { useElementPlusDialog } from "vue3-command-component";

const CommandDialog=useElementPlusDialog()

const Content=defineComponent({
  render(){
    return <div>弹窗内容</div>
  }
})

CommandDialog(<Content />)

// 如果你没有使用jsx,你可以这样写,关于jsx和h函数的资料请参见[渲染函数 & JSX](https://vuejs.org/guide/extras/render-function.html#the-h-function)

CommandDialog(h(Content))

值得说明一下，useElementPlusDialog之类的适配层hooks,必须在setup顶部调用,因为内部依赖getCurrentInstance这个api来捕获当前组件实例。

更多示例请参见示例