在vue3中使用tsx结合render封装一个项目内通用的弹窗组件

原创

于 2024-12-27 15:32:41 发布 · 1.5k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

场景： 在大屏项目中经常需要用到弹窗的需求，通常一个项目内弹窗的样式是一致的，如果不封装一个弹窗组件hook的话，每一个弹窗都需要单独封装为一个组件然后再放到项目layout的最外层，再通过store全局判断哪个弹窗显示，这样显然很麻烦，所以现在我封装一个通过tsx及render渲染弹窗组件的hooks，需要使用弹窗就调用hooks传入弹窗组件就行

思路： 首先封装一个弹窗基础框架组件（包括弹窗外观样式及关闭和底部操作等事件）提供插槽展示每个弹窗的内容部分，然后在需要用到一个弹窗时封装这个弹窗的内容组件，然后调用hooks传入这个内容组件就可以打开弹窗（在封装的hooks中会通过render将弹窗基础组件和内容组件合并渲染出来生成一个元素节点，再通过document.body.appendChild将生成的元素节点挂载到页面中以实现弹窗的展示效果）

代码步骤：

（1）封装弹窗组件框架

<template>
  <el-dialog class="models-default" v-bind="props" :model-value="visible">
    <slot></slot>
    <!-- 弹窗头部插槽 -->
    <template v-if="$slots.header" #header>
      <slot name="header"></slot>
    </template>
    <!-- 弹窗尾部插槽 -->
    <template v-if="isFooter" #footer>
      <!-- 自定义尾部插槽组件显示 -->
      <template v-if="$slots.footer">
        <slot name="footer"></slot>
      </template>
      <!-- 默认尾部按钮列显示 -->
      <template v-else>
        <el-button @click="visible = false">{
  
  { props.cancelBtnText }}</el-button>
        <el-button v-for="(item, index) in footerButtons" :key="index" :icon="item.icon" :type="item.type"
          @click="() => btnClickHandle(item)">{
  
  { item.name }}</el-button>
        <el-button type="primary" @click="confirmHandle">{
  
  { props.confirmBtnText }}</el-button>