目录
一、elementUI的消息组件
1、MessageBox 弹框:是模态框
2、Message 消息提示:非模态框,常用于主动操作后的反馈提示。
3、Notification 通知
二、Form表单:
1、基本结构
2、表单控件
三、Dialog组件
1、使用方法
(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(){ } //单击确定按钮后的操作
})
this.$message({
showClose:true,//是否显示关闭按钮
message:’内容’,
type: ‘消息框的类型’, // sucess、warning、info、error,默认类型是info
duration:停留时间 //单位是毫秒,默认是3000毫秒
})
悬浮出现在页面角落,显示全局的通知提醒消息。
表单控件
//"ref":表示表单的别名,用于在js中定位form(this.$refs['ref属性值'])
//"rules":用于定义表单控件的验证规则
//:model:用于绑定form,绑定后表单就是一个对象
//表单验证的语法:
this.$refs["formName"].validate((valide)=>{
if(valide){
验证通过的操作
}else{
return false
}
})
//表单重置的语法:
this.$refs["formName"].resetFields()
//表单内部控件的宽度设置
(1)单行文本框
(2)密码框
(3)带图标的文本框
“suffix-icon”:表示在右边放置图标
“prefix-icon”:表示在左边放置图标
(4)文本域
(5)开关:表示两种状态的切换
// 关闭时的颜色
(6)复选框组和复选框
(7)单选框组和单选按钮
//普通单选按钮
//单选按钮
//对话框关闭之前
这是一段信息
@click="dialogVisible = false">取 消
@click="dialogVisible = false">确 定