在应用 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 块的款式, 之后就是失常的布局了。
// 本期的教程到了这里就完结啦, 是不是很简略。在这个畛域, 不要抬头, 不要认输。