element-ui消息组件
目录
一、elementUI的消息组件
1、MessageBox 弹框：是模态框
2、Message 消息提示：非模态框，常用于主动操作后的反馈提示。
3、Notification 通知
二、Form表单：
1、基本结构
2、表单控件
三、Dialog组件
1、使用方法
一、elementUI的消息组件
1、MessageBox 弹框：是模态框
（1）消息提示：当用户进行操作时会被触发，该对话框中断用户操作，直到用户确认知晓后才可关闭。
this.$alert（’消息框的内容’，’消息框的标题’，{
confirmButtonText ：’按钮上的文本’，
callback: ()=>{ } // 回调函数，当用户单击按钮时触发
}）
（2）确认消息：提示用户确认其已经触发的动作，并询问是否进行此操作时会用到此对话框
this.$confirm（’消息内容’，’标题’，{
confirmButtonText: ‘确定’，
cancelButtonText: ‘取消’，
type: ‘消息框的类型’ // （sucess、warning、info、error）
}）.then(()=>{ }) //用户单击’确定’按钮后的操作代码
.catch(()=>{}) //用户单击’取消’按钮后的操作
（3）引入MessageBox进行消息的提示
MessageBox.confirm（’消息内容’，{
title：’消息框的标题’，
confirmButtonText: ‘确定’，
cancelButtonText: ‘取消’，
type: ‘消息框的类型’ ， // （success、warning、info、error）
callback: function(){ } //单击确定按钮后的操作
}）
2、Message 消息提示：非模态框，常用于主动操作后的反馈提示。
this.$message（{
showClose：true，//是否显示关闭按钮
message：’内容’,
type: ‘消息框的类型’， // sucess、warning、info、error，默认类型是info
duration：停留时间 //单位是毫秒，默认是3000毫秒
}）
3、Notification 通知
悬浮出现在页面角落，显示全局的通知提醒消息。
二、Form表单：
1、基本结构
表单控件
//"ref"：表示表单的别名，用于在js中定位form(this.$refs['ref属性值'])
//"rules"：用于定义表单控件的验证规则
//:model：用于绑定form，绑定后表单就是一个对象
//表单验证的语法：
this.$refs["formName"].validate((valide)=>{
if(valide){
验证通过的操作
}else{
return false
}
})
//表单重置的语法：
this.$refs["formName"].resetFields()
//表单内部控件的宽度设置
2、表单控件
（1）单行文本框
（2）密码框
（3）带图标的文本框
（4）文本域
（5）开关：表示两种状态的切换
// 关闭时的颜色
（6）复选框组和复选框
（7）单选框组和单选按钮
三、Dialog组件
1、使用方法
//对话框关闭之前
这是一段信息
@click="dialogVisible = false">取 消
@click="dialogVisible = false">确 定