1. 安装 Element Plus：
如果你还没有安装 Element Plus，请参考前面的步骤进行安装。
2. 导入和使用 Dialog：
在你的 Vue 组件中导入 Dialog，并在模板中使用它。以下是一个简单的示例：
<template>
<div>
<el-button @click="openDialog">打开对话框</el-button>
<el-dialog
:visible.sync="dialogVisible"
title="对话框标题"
width="30%"
:before-close="handleClose"
>
<!-- 对话框内容 -->
<p>这是对话框的内容。</p>
<!-- 对话框底部按钮 -->
<span class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="handleConfirm">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { ElButton, ElDialog } from 'element-plus';
export default {
components: {
ElButton,
ElDialog,
},
data() {
return {
dialogVisible: false,
};
},
methods: {
openDialog() {
this.dialogVisible = true;
},
handleClose(done) {
// 在这里可以进行一些关闭前的处理
done(); // 调用 done 表示关闭对话框
},
handleConfirm() {
// 处理确认按钮点击事件
this.dialogVisible = false; // 关闭对话框
// 在这里可以添加其他确认逻辑
},
},
};
</script>
在上述代码中，我们导入了 ElButton 和 ElDialog 组件，并在模板中使用它们。通过点击按钮，可以打开对话框。对话框中包含标题、内容和底部按钮，你可以根据需要进行配置。
3. 自定义 Dialog：
你可以根据需求自定义 Dialog，比如添加表单、调整样式等：
<template>
<div>
<el-button @click="openCustomDialog">打开自定义对话框</el-button>
<el-dialog :visible.sync="customDialogVisible" title="自定义对话框" width="50%">
<!-- 自定义对话框内容 -->
<el-form :model="form" label-width="80px">
<el-form-item label="姓名">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="年龄">
<el-input v-model.number="form.age"></el-input>
</el-form-item>
</el-form>
<!-- 对话框底部按钮 -->
<span class="dialog-footer">
<el-button @click="customDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="handleCustomConfirm">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { ElButton, ElDialog, ElForm, ElFormItem, ElInput } from 'element-plus';
export default {
components: {
ElButton,
ElDialog,
ElForm,
ElFormItem,
ElInput,
},
data() {
return {
customDialogVisible: false,
form: {
name: '',
age: null,
},
};
},
methods: {
openCustomDialog() {
this.customDialogVisible = true;
},
handleCustomConfirm() {
// 处理自定义对话框确认按钮点击事件
this.customDialogVisible = false; // 关闭对话框
// 在这里可以添加其他确认逻辑
},
},
};
</script>
在这个例子中，我们创建了一个包含表单的自定义对话框。你可以根据实际需求定制对话框的内容和行为。
转载请注明出处：http://www.zyzy.cn/article/detail/5575/ElementPlus