1.首先要点击 添加用户 按钮,弹出 添加用户 的对话框。这个对话框会用到 element 中 Dialog 对话框组件。 所以接下来要看一下 Dialog 对话框怎么使用。
2.在 element.js 的文件中,按需导入 Dialog 组件。 import { Dialog } from ‘element-ui’ 然后进行一下全局的注册 Vue.use(Dialog)
3. 把elementUI 中的 Dialog 对话框的最基本的 UI 结构,给粘到项目中。
:visible.sync="dialogVisible" 属性绑定用来控制对话框的显示和隐藏,我们需要把它绑定到布尔值身上。
:before-close=”handleClose“ 这是一个事件叫 before-close ,在对话框关闭之前会触发这个事件,但是呢我们目前不需要它,就暂时先删掉
第一个span是内容主体区域
第二个span 是底部按钮确定和取消区域
4.我么可以定义这个布尔值叫 addDialogVisible 。 现在呢这个布尔值并没有定义,找到所在组件的 script 行为区的 data(){} 中,定义 addDialogVisible:false, 默认为false 代表隐藏对话框
width=”50%“ 控制对话框的宽度为屏幕的50% 一般都是50%的宽度
5.当点击取消按钮绑定一个点击事件,<el-button @click="addDialogVisible = false">取消</el-button>只要触发点击事件我们就会触发事件 addDialogVisible:false 隐藏对话框,
同理点击确定也是一样效果隐藏对话框<el-button @click="addDialogVisible = false">确定</el-button>
6.点击添加用户的按钮时候,只需要给添加用户绑定一个点击事件,使得 addDialogVisible重置为true
即 对话框 不隐藏即可。
7.input里的v-model 指令,绑定到了一个表单的数据项身上,addForm的username 身上
密码邮箱手机同理
required:true 必填选项
trigger:‘blur’ 失去焦点触发时机
接下来接我主页另一篇文章