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