Vue-Command-Component：让弹窗开发不再繁琐Vue3-Command-Component：让弹窗开发不

前言

在Vue项目开发中，弹窗组件的管理一直是一个令人头疼的问题。传统的声明式弹窗开发方式需要管理大量的状态变量、处理复杂的props传递，甚至可能面临多个弹窗嵌套时的状态管理困境。今天给大家介绍一个能够彻底改变这种开发体验的库：Vue-Command-Component。

为什么需要命令式组件？

在传统的Vue开发中，弹窗的使用通常是这样的：

<template>
  <el-dialog v-model="visible" title="提示">
    <span>这是一段信息</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
const visible = ref(false)
const handleConfirm = () => {
  // 处理确认逻辑
  visible.value = false
}
</script>

这种方式存在几个明显的问题：

需要手动管理弹窗的显示状态
组件代码和业务逻辑混杂在一起
多个弹窗时代码会变得非常臃肿
弹窗之间的嵌套关系处理复杂

Vue-Command-Component 解决方案

使用Vue-Command-Component，上述问题都可以得到优雅的解决。来看看它是如何使用的：

import { useDialog } from "@vue-cmd/element-plus";

const CommandDialog = useDialog()

// 直接调用函数显示弹窗
CommandDialog(<div>这是一段信息</div>)

是的，就是这么简单！一行代码就能唤起一个弹窗，不需要管理状态，不需要写模板，一切都变得如此流畅。

核心特性

1. 极简API设计

无需管理状态，一个函数调用搞定所有事情，符合直觉的开发体验。

2. 完整的类型支持

提供完整的TypeScript类型支持，开发体验一流。

3. 灵活的控制能力

提供了多种控制方式：

destroy：销毁弹窗
hide/show：控制弹窗显示/隐藏
destroyWithResolve/destroyWithReject：支持Promise风格的控制

4. 强大的扩展性

支持多种UI框架：

Element Plus
Naive UI
Vant
...更多框架支持中

5. 原生特性支持

完整支持原生组件的所有特性：

属性传递
事件处理
插槽支持
Provide/Inject

安装

# 使用 npm
npm install @vue-cmd/core @vue-cmd/element-plus

# 使用 yarn
yarn add @vue-cmd/core @vue-cmd/element-plus

# 使用 pnpm
pnpm add @vue-cmd/core @vue-cmd/element-plus

# 使用 bun
bun add @vue-cmd/core @vue-cmd/element-plus

实战示例

基础用法

import { useDialog } from "@vue-cmd/element-plus";

const CommandDialog = useDialog()

// 基础弹窗
CommandDialog(<Content />)

// 带配置的弹窗
CommandDialog(<Content />, {
  attrs: {
    title: '标题',
    width: '500px'
  }
})

嵌套弹窗

import { useDialog } from "@vue-cmd/element-plus";

const CommandDialog = useDialog()

CommandDialog(
  <div onClick={() => {
    // 在弹窗中打开新的弹窗
    CommandDialog(<div>内层弹窗</div>)
  }}>
    外层弹窗
  </div>
)

Promise风格控制

import { useDialog } from "@vue-cmd/element-plus";
import { useConsumer } from "@vue-cmd/core";

const CommandDialog = useDialog()

// 在弹窗组件内部
const FormComponent = defineComponent({
  setup() {
    const consumer = useConsumer()
    
    const handleSubmit = (data) => {
      // 提交数据后关闭弹窗
      consumer.destroyWithResolve(data)
    }
    
    return () => <Form onSubmit={handleSubmit} />
  }
})

// Promise风格的控制
try {
  const result = await CommandDialog(<FormComponent />).promise
  console.log('表单提交结果:', result)
} catch (error) {
  console.log('用户取消或出错:', error)
}

多UI框架支持

// Element Plus
import { useDialog as useElementDialog } from "@vue-cmd/element-plus";

// Naive UI
import { useModal, useDrawer } from "@vue-cmd/naive";

// Vant
import { usePopup } from "@vue-cmd/vant";

const ElementDialog = useElementDialog()
const NaiveModal = useModal()
const VantPopup = usePopup()

// 使用不同的UI框架
ElementDialog(<Content />)
NaiveModal(<Content />)
VantPopup(<Content />)

写在最后

Vue-Command-Component 为Vue开发者带来了一种全新的弹窗开发方式。它不仅简化了开发流程，还提供了更强大的控制能力。如果你的项目中有大量弹窗交互，不妨尝试一下这个库，相信它会为你带来更好的开发体验。

Vue-Command-Component：让弹窗开发不再繁琐

前言