摆脱单调乏味，赋予二次封装的 el-dialog 别样风情！

前端

2023-10-15 12:22:35

前言：何需二次封装？

在日常前端开发中，我们常常会遇到需要使用弹窗组件的场景。此时，Element UI 原生提供的 el-dialog 组件就成为我们的首选。el-dialog 组件功能强大，支持多种配置选项，可以满足大多数的弹窗需求。

然而，在某些情况下，el-dialog 组件的默认样式和功能可能无法满足我们的具体需求。例如，我们可能希望弹窗组件具有更丰富的样式，或者支持更多的功能。此时，二次封装 el-dialog 组件就成为了一种必要的手段。

二次封装：开启自定义之路

二次封装 el-dialog 组件，本质上就是将 el-dialog 组件作为基础，根据自己的需求进行修改和扩展。这种方式的好处在于，我们可以保留 el-dialog 组件原有的优点，同时又能添加自己需要的功能和样式。

实战演练：一步步打造个性化弹窗组件

新建弹窗组件

首先，我们需要在项目中新建一个弹窗组件。我们可以将组件命名为 BaseDialog，并在 src/components 目录下创建 BaseDialog 文件夹。在 BaseDialog 文件夹下，新建一个 index.vue 文件，并添加如下代码：

<template>
  <el-dialog
    :title="title"
    :visible="visible"
    @close="handleClose"
  >
    <slot></slot>
  </el-dialog>
</template>

<script>
export default {
  name: 'BaseDialog',
  props: {
    title: {
      type: String,
      default: ''
    },
    visible: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleClose() {
      this.$emit('close')
    }
  }
}
</script>

注册组件

接下来，我们需要将 BaseDialog 组件注册到 Vue 实例中。可以在 main.js 文件中添加如下代码：

import BaseDialog from './components/BaseDialog'

Vue.component('BaseDialog', BaseDialog)

使用组件

现在，我们可以在项目中使用 BaseDialog 组件了。在需要使用弹窗的地方，我们可以直接使用 BaseDialog 组件，并设置其 title 和 visible 属性即可。例如：

<template>
  <BaseDialog title="这是一个弹窗" :visible="showDialog">
    <p>弹窗内容</p>
    <button @click="handleClose">关闭</button>
  </BaseDialog>
</template>

<script>
export default {
  data() {
    return {
      showDialog: false
    }
  },
  methods: {
    handleClose() {
      this.showDialog = false
    }
  }
}
</script>