情景:
点击新增用户或者新增订单,弹出对话框页面进行信息输入操作
分析:
这个对话框组件是直接放到用户组件代码中的,自带一个属性,控制是否显示,默认为false不显示,需要显示的时候拿到此属性对应的变量,设置为true
主体内容使用表单组件
<!-- 添加用户的对话框 -->
<el-dialog
title="添加用户"
:visible.sync="addDialogVisible"
width="50%">
<!-- 内容主体区域 -->
<el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px">
<el-form-item label="用户名" prop="username">
<el-input v-model="addForm.username"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="addForm.password"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="email">
<el-input v-model="addForm.email"></el-input>
</el-form-item>
<el-form-item label="手机" prop="mobile">
<el-input v-model="addForm.mobile"></el-input>
</el-form-item>
</el-form>
<!-- 底部区域 -->
<span slot="footer" class="dialog-footer">
<el-button @click="addDialogVisible = false">取 消</el-button>
<el-button type="primary" @click="addDialogVisible = false">确 定</el-button>
</span>
</el-dialog>
注意:1.element-ui中复制过来的组件经常是组合起来去使用
2.使用form表单的验证规则很方便
3.它与app中还不一样,app中是用到的时候才new出来,html中是先写出来,用到时候去显示