关于element:element中MessageBox-弹框使用

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