目录
一、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、基本结构
<el-form ref="" :model="" rules="">
<el-form-item label="">
表单控件
</el-form-item>
</el-form>
//"ref"：表示表单的别名，用于在js中定位form(this.$refs['ref属性值'])
//"rules"：用于定义表单控件的验证规则
//:model：用于绑定form，绑定后表单就是一个对象
//表单验证的语法：
this.$refs["formName"].validate((valide)=>{
if(valide){
验证通过的操作
}else{
return false
}
})
//表单重置的语法：
this.$refs["formName"].resetFields()
//表单内部控件的宽度设置
<el-col :span="栏数">
<el-input style="width:100%">
</el-col>2、表单控件
（1）单行文本框
<el-input v-model="input" placeholder="请输入内容"></el-input> （2）密码框
<el-input v-model="input" placeholder="请输入内容" show-password></el-input> （3）带图标的文本框
<el-input v-model="input" placeholder="请输入内容" ></el-input>
“suffix-icon”：表示在右边放置图标
“prefix-icon”：表示在左边放置图标 （4）文本域
<el-input type="textarea" v-model="textarea" :row="行数" placeholder="请输入内容" ></el-input> （5）开关：表示两种状态的切换
<el-switch
v-model="value"
active-color="#13ce66" //活动时的颜色
inactive-color="#ff4949"> // 关闭时的颜色
</el-switch> （6）复选框组和复选框文章来源：https://www.toymoban.com/news/detail-433038.html
<el-checkbox-group v-model="checkList">
<el-checkbox label="复选框 A"></el-checkbox>
<el-checkbox label="复选框 B"></el-checkbox>
<el-checkbox label="复选框 C"></el-checkbox>
<el-checkbox label="禁用" disabled></el-checkbox>
<el-checkbox label="选中且禁用" disabled></el-checkbox>
</el-checkbox-group> （7）单选框组和单选按钮文章来源地址https://www.toymoban.com/news/detail-433038.html
<el-radio-group v-model="radio">
<el-radio label=""></el-radio> //普通单选按钮
<el-radio-button></el-radio-button> //单选按钮
</el-radio-group>三、Dialog组件
1、使用方法
//对话框关闭之前
这是一段信息
@click="dialogVisible = false">取 消
@click="dialogVisible = false">确 定到了这里，关于element-ui消息组件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
