详解如何在vue+element-ui的项目中封装dialog组件

下面是我对如何在 Vue + Element-UI 的项目中封装 Dialog 组件的详细攻略。

一、组件封装思路

首先，我们需要了解如何在 Vue 中封装一个组件。封装组件的基本思路是定义好组件的模板、样式和行为，并将其统一封装起来，以便在需要的地方使用。下面是我们封装 Dialog 组件的基本思路：

• 定义好 Dialog 组件的模板，包括标题、内容、底部按钮等。
• 定义好 Dialog 组件的样式，使用 Element-UI 的样式作为基础，再针对性的进行样式的更改和覆盖。
• 定义好 Dialog 组件的行为，包括打开、关闭等方法，并将这些方法暴露出来，供父组件调用。

二、组件封装实现

下面我们就来讲解一下在 Vue + Element-UI 的项目中如何封装 Dialog 组件。

1. 安装 Element-UI

首先，在 Vue + Element-UI 的项目中使用 Dialog 组件，我们需要先安装 Element-UI。可以使用以下命令进行安装：

npm install element-ui --save

安装完成后，需要在 main.js 文件中引入 Element-UI：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

2. 定义 Dialog 组件模板和样式

接下来，我们需要定义 Dialog 组件的模板和样式。模板和样式的部分都可以放在组件的 .vue 文件中。

首先，是 Dialog 组件的模板示例：

<template>
  <el-dialog :visible.sync="visible" :before-close="handleClose" :title="title">
    <div v-html="content"></div>
    <div slot="footer">
      <el-button @click="handleClose">关闭</el-button>
      <el-button type="success" @click="handleConfirm">确认</el-button>
    </div>
  </el-dialog>
</template>

其中，我们使用了 el-dialog 和 el-button 两个 Element-UI 的组件，这样就不需要再编写样式了。

接着是 Dialog 组件的样式示例：

.el-dialog {
  box-sizing: border-box;
  max-width: 600px;
  font-size: 14px;
}

.el-dialog__header {
  padding: 20px;
  background-color: #f5f9fc;
  border: none;
  border-bottom: 1px solid #e5e9f2;
  font-size: 16px;
  color: #303133;
}

.el-dialog__body {
  padding: 20px 0;
}

.el-dialog__footer {
  padding: 10px 20px;
  text-align: right;
  border-top: 1px solid #e5e9f2;
}

可以看到，我们只需要覆盖 el-dialog、el-dialog__header、el-dialog__body 和 el-dialog__footer 这四个 Element-UI 的类即可。

3. 封装 Dialog 组件的行为

最后，我们需要定义 Dialog 组件的行为。这里我们需要定义两个方法：handleClose 和 handleConfirm。其中，handleClose 方法用于关闭 Dialog，handleConfirm 方法用于确认 Dialog。

完整的 Dialog 组件的代码示例：

<template>
  <el-dialog :visible.sync="visible" :before-close="handleClose" :title="title">
    <div v-html="content"></div>
    <div slot="footer">
      <el-button @click="handleClose">关闭</el-button>
      <el-button type="success" @click="handleConfirm">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'MyDialog',
  props: {
    visible: Boolean,
    title: String,
    content: String,
    confirm: Function,
  },
  methods: {
    handleClose() {
      this.$emit('update:visible', false);
    },
    handleConfirm() {
      this.confirm && this.confirm();
      this.handleClose();
    },
  }
}
</script>

<style>
.el-dialog {
  box-sizing: border-box;
  max-width: 600px;
  font-size: 14px;
}

.el-dialog__header {
  padding: 20px;
  background-color: #f5f9fc;
  border: none;
  border-bottom: 1px solid #e5e9f2;
  font-size: 16px;
  color: #303133;
}

.el-dialog__body {
  padding: 20px 0;
}

.el-dialog__footer {
  padding: 10px 20px;
  text-align: right;
  border-top: 1px solid #e5e9f2;
}
</style>

4. 在父组件中使用封装好的 Dialog 组件

最后，我们可以在父组件中使用封装好的 Dialog 组件。示例如下：

<template>
  <div>
    <el-button @click="handleShowDialog">打开 Dialog</el-button>
    <my-dialog :visible.sync="showDialog" :title="dialogTitle" :content="dialogContent" :confirm="handleConfirm"></my-dialog>
  </div>
</template>

<script>
import MyDialog from './MyDialog.vue';

export default {
  name: 'MyComponent',
  components: {
    MyDialog,
  },
  data() {
    return {
      showDialog: false,
      dialogTitle: '这是 Dialog 标题',
      dialogContent: '<p>这是 Dialog 内容</p>',
    }
  },
  methods: {
    handleShowDialog() {
      this.showDialog = true;
    },
    handleConfirm() {
      this.$message('确认了');
    }
  }
}
</script>

在代码中，我们先引入了封装好的 Dialog 组件 MyDialog，然后在父组件中使用。我们给 Dialog 组件传递了一些参数，这些参数包括 Dialog 是否可见、Dialog 的标题、Dialog 的内容和确认按钮的回调函数。在点击确认按钮后，就会弹出一个提示框。

另外一个示例是在表格中使用 Dialog 组件：

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="{ row }">
          <el-button @click="handleEdit(row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <my-dialog :visible.sync="showDialog" :title="dialogTitle" :content="dialogContent" :confirm="handleConfirm"></my-dialog>
  </div>
</template>

<script>
import MyDialog from './MyDialog.vue';

export default {
  name: 'MyTable',
  components: {
    MyDialog,
  },
  data() {
    return {
      tableData: [
        { name: '张三' },
        { name: '李四' },
        { name: '王五' },
      ],
      showDialog: false,
      dialogTitle: '编辑信息',
      dialogContent: '<p>这里是编辑内容</p>',
      currentRow: null,
    }
  },
  methods: {
    handleEdit(row) {
      this.currentRow = row;
      this.dialogContent = `<p>请输入 ${row.name} 的新信息：</p><el-input v-model="currentRow.info"></el-input>`;
      this.showDialog = true;
    },
    handleConfirm() {
      this.$message('更新了信息：' + JSON.stringify(this.currentRow));
      this.showDialog = false;
    }
  }
}
</script>

在代码中，我们在表格中使用 Element-UI 的 el-button 组件实现编辑按钮，然后在点击按钮的时候，设置 Dialog 组件的内容为当前行的信息，并让 Dialog 显示出来。在点击确认按钮后，我们会更新当前行的信息并提示信息更新成功。

三、总结

封装 Dialog 组件是非常常见的操作，这篇攻略介绍了如何在 Vue + Element-UI 的项目中封装 Dialog 组件。需要注意的是，在封装组件的时候，要充分使用 Vue 和 Element-UI 的特点和优势，尽可能地减少代码量和重复工作。我希望这篇攻略能对你有所帮助。