首先，确保你已经引入了 Element-React 的样式和脚本。可以通过以下方式之一来引入：
1. 使用 CDN：
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入脚本 -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
2. 使用 npm 安装：
npm install element-ui
然后在你的 Vue 项目中引入并使用 Dialog 组件：
<template>
<div>
<el-button @click="openDialog">打开对话框</el-button>
<el-dialog
:visible.sync="dialogVisible"
title="对话框标题"
width="30%"
@close="handleDialogClose"
>
<!-- 对话框内容 -->
<p>这是对话框的内容。</p>
<!-- 对话框底部按钮 -->
<div slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="handleDialogConfirm">确定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { ElButton, ElDialog } from 'element-ui';
export default {
data() {
return {
dialogVisible: false,
};
},
methods: {
openDialog() {
this.dialogVisible = true;
},
handleDialogClose() {
// 对话框关闭时的处理逻辑
console.log('对话框关闭');
},
handleDialogConfirm() {
// 对话框确认按钮点击时的处理逻辑
console.log('确定按钮点击');
this.dialogVisible = false;
},
},
components: {
ElButton,
ElDialog,
},
};
</script>
在上面的例子中，我们使用了 ElDialog 组件来创建对话框。通过设置 visible 属性来控制对话框的显示和隐藏，通过 title 属性设置对话框标题，通过 width 属性设置对话框宽度。
对话框内容可以在 <el-dialog> 标签内部添加。对话框底部的按钮可以通过在 <el-dialog> 中使用 <div slot="footer"> 来定义，从而设置底部按钮的样式和行为。
转载请注明出处：http://www.zyzy.cn/article/detail/5633/Element-React