在应用vue+element中,咱们时常会应用到element中的MessageBox 弹框,当初我分享一下我的教训
1.开发环境vue+element
- 要实现上面的成果
我简略说我一下我的思路,首先是应用element的MessageBox 弹框,代码如下
<el-dialog title="增加账号" :visible.sync="centerDialogVisible" width="60%" center :before-close="handleClose" id="chen-show"><!-- 设置上部门的按钮 --> <div class="chen-xinz-botton"> <!-- 设置按钮1 --> <el-button type="info" round @click="showryxx">人员信息</el-button> <!-- 按钮1 完结啦 --> <!-- 设置按钮2 --> <el-button type="info" round @click="showjnxx">技能信息</el-button> <!-- 设置按钮2 完结啦 --> </div> <!-- 设置上局部的按钮完结啦 --> </el-dialog> </div> - 在ruturn上面定义两个变量
- 在methods中定义事件
- 整体思路其实很简略,点击一个按钮呈现弹框,这段代码写在template中那个地位都能够,里边的布局跟失常的力其实没有区别。
- //留神在这块弹窗里边,其实有5块内容,父级就是弹框自身,在.el-dialog--center 中,有一个默认的margin-top是15vh,只能通过以下的形式去批改,留神,此时设置的高度是笼罩了弹框的高度
*这一块是弹框两头局部的高度,最好是应用最高权限
- 最初是设置底部的两个按钮,确认和勾销,默认在底部的两头地位,此时这个值设置为向右居中,示意:确认和勾销在左边的地位。
//整体思路:定义两个变量,管制点击人员信息和技能信息的模块的切换。而后设置弹框5块的款式,之后就是失常的布局了。
//本期的教程到了这里就完结啦,是不是很简略。在这个畛域,不要抬头,不要认输。