基于element-plus的el-dialog二次封装

基于 Element-plus 二次封装可复用的弹窗组件

本文章旨在提供思路参考，可根据具体项目需求进行封装
类名为添加自定义样式，可根据需求添加自己的样式

新建弹窗组件

在 src/components 新建文件夹 HsDialog, 文件下新建 index.vue 文件
代码如下： 属性可参照el-dialog中配置

<template>
  <div class="hs-dialog">
    <el-dialog
      v-model="dialogVisible"
      :title="title"
      :width="width"
      :append-to-body="appendToBody"
      :before-close="cancel"
    >
      <!-- 弹窗中间body -->
      <el-scrollbar>
        <div class="dialog-body">
          <svg-icon
            class="mb12"
            v-if="svg.name"
            :name="svg.name"
            :color="svg.color"
            :size="svg.size"
          />
          <p class="cont fs16 mb3" v-if="cont" v-html="cont"></p>
          <p class="sub-cont" v-if="subCont" v-html="subCont"></p>
          <!-- 默认插槽位置 -->
          <slot></slot>
        </div>
      </el-scrollbar>
      <!-- 弹窗底部 -->
      <template v-if="isShowFooter" #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="confirm">确定</el-button>
          <el-button @click="cancel">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="HsDialog">
// 弹框整体配置
interface IProps {
  // 是否显示弹框
  visible: boolean
  // 弹框标题
  title: string
  // 是否显示底部按钮
  isShowFooter?: boolean
  // 点击确定按钮回调
  confirmCb?: () => void
  // 关闭弹框回调
  cancelCb?: () => void
  // 确定按钮文字
  confirmText?: string
  // 关闭按钮文字
  cancelText?: string
  // 弹框宽度
  width?: string | number
  // 是否将自身插入至 body 元素，有嵌套的弹窗时一定要设置
  appendToBody?: boolean
  // SVG 配置
  svg?: {
    name?: string
    color?: string
    size?: string
  }
  // 主要内容
  cont?: string
  // 次要内容 （灰色字体）
  subCont?: string
}

// 设置 props 默认值
const props = withDefaults(defineProps<IProps>(), {
  confirmCb: () => {},
  cancelCb: () => {},
  confirmText: '确 定',
  cancelText: '取 消',
  width: '500',
  svg: () => ({ name: '', color: '', size: '' }),
  cont: '',
  subCont: '',
})
const dialogVisible = ref(props.visible)
// 监听 visible 改变
watch(
  () => props.visible,
  (val) => {
    dialogVisible.value = val
  }
)
// emit 事件
let emits = defineEmits(['update:visible', 'confirmCb', 'cancelCb'])

// 点击取消、关闭按钮、
const cancel = () => {
  emits('update:visible', false)
  emits('cancelCb')
}
// 点击确定按钮的回调方法
const confirm = () => {
  emits('confirmCb')
}
</script>

<style scoped lang="scss">
.hs-dialog {
  .dialog-footer {
    margin-bottom: 30px;
    text-align: center;
  }
  .dialog-body {
    color: var(--color-3d);
    text-align: center;
    .sub-cont {
      color: var(--color-9c);
    }
  }
}
</style>

在父组件中使用

<hs-dialog
  v-model:visible="dialogShow"
  title="延长保护期"
  :isShowFooter="true"
  width="500"
  cont="是否确认对（客户名称）延长保护期限？<br />保护截止日：2022-12-24 "
  subCont="剩余延期次数：5次）"
  @confirmCb="dialogConfirm"
  @cancelCb="dialogCancel"
  :svg="{ name: 'serve_state', size: '5rem', color: 'red' }"
/>
// 点击显示弹框
<el-button type="primary" size="default" @click="handleClick">点击吧</el-button>

// ts 代码部分
const dialogShow= ref<boolean>(false)
// 点击按钮显示弹框
const handleClick = () => {
  dialogShow.value = true
}
// 点击确定按钮的回调函数
const dialogConfirm = () => {
  dialogShow.value = false
  console.log('点击了确定按钮')
}

// 点击取消按钮或关闭按钮的回调函数
const dialogCancel= () => {
  dialogShow.value = false
  console.log('点击了取消或者关闭按钮')
}