2在页面里面写一个 添加的按钮 点击按钮1弹出提示框

效果图

第一先加一个 按钮 的要个card片框住  要记得是框住

这是一个使用Element UI框架中的<el-card>和<el-button>组件的示例。

<el-card>组件用于创建一个卡片容器，可以在其中放置其他内容。通过添加不同的class名称，可以对卡片进行样式调整。

在这个例子中，<el-card class="box-card">定义了一个具有名为"box-card"的自定义类名的卡片容器。

<el-button>组件用于创建一个按钮。通过设置type属性为primary，可以使按钮具有主要的样式。

当点击这个按钮时，会触发@click事件，并将addDialogVisible属性设置为true。这通常用于控制一个对话框的显示或隐藏状态。您可以在Vue组件中定义addDialogVisible属性，并在点击按钮时执行相应的逻辑来显示添加对话框

然后再加一个  记得在一个自定义变量

ddDialogVisible是一个布尔类型的数据属性，用于控制对话框是否显示。它的初始值为false，表示对话框一开始是隐藏的。当用户点击"添加"按钮时，可以通过改变addDialogVisible的值来显示对话框。当用户关闭对话框时，可以将addDialogVisible的值再次设置为false，从而隐藏对话框。默认是隐藏

然后现在去改弹出框

在card里面加

这是一个使用Element UI组件库的弹出框（对话框）组件。通过:visible.sync属性，可以实现对话框的显示和隐藏。

在这个例子中，addDialogVisible是一个布尔类型的数据属性，用于控制对话框是否显示。初始化时，addDialogVisible的初始值应该为false，表示对话框一开始是隐藏的。

当用户点击"添加"按钮时，可以通过改变addDialogVisible的值为true来显示对话框。同时，:visible.sync绑定了addDialogVisible，这意味着当addDialogVisible的值发生改变时，对话框的显示状态也会自动更新。