web

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

0 个评论

要回复文章请先登录或注册