element中MessageBox 弹框使用

在使用vue+element中,我们时常会使用到element中的MessageBox 弹框,现在我分享一下我的经验

1.开发环境vue+element

• 要实现下面的效果

我简单说我一下我的思路,首先是使用element的MessageBox 弹框,代码如下

 



      

        
        人员信息
        
        
        技能信息
        
      
      
 
 

• 在ruturn下面定义两个变量
  
• 在methods中定义事件
  
• 整体思路其实很简单,点击一个按钮出现弹框,这段代码写在template中那个位置都可以,里边的布局跟正常的力其实没有区别。
• //注意在这块弹窗里边,其实有5块内容,父级就是弹框本身,在.el-dialog--center 中,有一个默认的margin-top是15vh,只能通过以下的方式去修改,注意,此时设置的高度是覆盖了弹框的高度

*这一块是弹框中间部分的高度,最好是使用最高权限

• 最后是设置底部的两个按钮,确认和取消,默认在底部的中间位置,此时这个值设置为向右居中,表示:确认和取消在右边的位置。

//整体思路:定义两个变量,控制点击人员信息和技能信息的模块的切换。然后设置弹框5块的样式,之后就是正常的布局了。
//本期的教程到了这里就结束啦,是不是很简单。在这个领域,不要低头,不要认输。