手把手教你以最简单的方式封装 Vue3 模态(Modal)类组件

最新推荐文章于 2024-09-24 22:25:58 发布

qq_38414743

最新推荐文章于 2024-09-24 22:25:58 发布

阅读量2.5k

点赞数 1

文章标签：前端 vue.js javascript typescript

本文链接：https://blog.csdn.net/qq_38414743/article/details/125419514

版权

本文介绍了如何以最简单的方式封装 Vue3 的模态(Modal)类组件，支持组件声明和函数调用两种模式。通过 unoverlay-vue 库，实现与第三方组件库如 element-plus 的集成和定制化，提高开发效率和组件复用性。

摘要由CSDN通过智能技术生成

反馈型组件，是前端经常涉及的组件，它们允许向用户提供提醒、提供更多选项或添加额外信息，而不会弄乱主要内容。

在 Vue 中 Modal 类组件使用通常分为两种方式

组件声明模式（declarative）

<template>
    <dialog v-model="show" @ok="onOk" @close="onClose">
        <div class="model__title">title</div>
        <div class="model__conent">content</div>
    </dialog>
</template>
<script>
import {
      defineComponent } from 'vue'
export default defineComponent({
     
    setup() {
     
        const show = ref(false)
        const onOk = () => {
     
            // ...
        }
        const onClose = () => {
     
            // ...
        }
        return {
      show, onOk, onClose }
    }
})
</script>