vue3+elementPlus+js之弹框的简单封装

在Vue 3和Element Plus中，可以通过创建一个自定义组件来简单地封装弹框（对话框）的功能。以下是一个简单的示例：

1. 创建一个新的Vue组件BaseDialog.vue:

<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    width="30%"
    :before-close="handleClose">
    <span>{{ message }}</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
 
<script setup>
import { ref } from 'vue';
 
const props = defineProps({
  title: String,
  message: String
});
 
const emit = defineEmits(['update:visible', 'confirm']);
const visible = ref(false);
 
const handleClose = (done) => {
  emit('update:visible', false);
  done();
};
 
const handleConfirm = () => {
  emit('confirm');
  visible.value = false;
};
</script>

2. 在父组件中使用BaseDialog组件：

<template>
  <BaseDialog
    :title="dialogTitle"
    :message="dialogMessage"
    :visible="isDialogVisible"
    @update:visible="isDialogVisible = false"
    @confirm="handleConfirm"
  />
</template>
 
<script setup>
import BaseDialog from './BaseDialog.vue';
import { ref } from 'vue';
 
const isDialogVisible = ref(false);
const dialogTitle = '提示';
const dialogMessage = '这是一个弹框消息。';
 
const handleConfirm = () => {
  console.log('确认操作');
};
 
// 触发弹框显示
const showDialog = () => {
  isDialogVisible.value = true;
};
 
// 在需要的时候调用showDialog方法
</script>

在这个例子中，BaseDialog组件接收title、message和visible属性，并定义了一个confirm事件。父组件通过@update:visible和@confirm监听对话框的关闭和确认事件。通过这种方式，你可以在不同的场景下复用弹框组件，并且可以通过传递不同的属性和监听不同的事件来定制弹框的行为。