模态框是弹出来的表单,属于表单的一种形式;也是抽屉页的另一种使用场景 这里把模态框和表单放到一起,整理下笔记。接着看
1、模态框
<Modal v-model="modal1" title="Modal dialog"></Modal> 使用slot方式写对话框主题内容, 使用header,footer定义页眉页脚
v-moel => 绑定一个value值,显示或者隐藏控制
title => 绑定一个标题
width => 绑定一个宽度
ok-text => 定义确定按钮显示的字符串"ok"
cancel-text => 定义取消按钮显示的字符串"Cancel"
loading => ture 表示确定按钮,对话框不会消失
closable => false 禁用ESC直接退出或者退出图标
mask-closable => false 遮罩层点击,是否关闭
:styles={"top: '20px'"} 自定义位置样式
class-name => 指定新样式
fullscreen => 属性: 全屏幕显示
footer-hide => 属性: 隐藏对话框页脚
draggable => 属性: 对话框支持拖拽
@on-ok => 绑定确定按钮的回调函数
@on-cancel => 绑定取消按钮的回调函数,通过ESC键可执行
this.$Modal.info() / this.$Modal.success()
this.$Modal.warning() / this.$Model.error()
---- 可以生成对话框, 参数是一个对象 -----
this.$Modal.confirm() 确认模态框
this.$Modal.remove() 移除模态框
args = {
title: title,
content: content,
okText: 'ok',
cancelText: 'Cancel',
onOk: () => {},
onCancel: () => {}
}
this.$Message 对象是alter的封装
this.$refs 对象是提交的数据封装
-----------------------------------
2、表单
在 Form 内,每个表单域由 FormItem 组成,可包含的控件有: Input、Radio、Checkbox、Switch、Select、Slider、DatePicker、TimePicker、 Cascader、Transfer、InputNumber、Rate、Upload、AutoComplete、ColorPicker
<Form ref="fromInline" :model="formInline" :rules="ruleInline" inline>
<FormItem prop="user"> => 表单元素
Form 参数Props
ref ==> 表单的提交对象,讲由axios传输
model ==> 表单的数据对象,它由用户交互内容组成,即子组件
rules ==> 表单的规则对象,对象的属性值为列表,列出选项为受限制的条件
label-width ==> 指定表单提示语label的占用宽度
label-position ==> 指定表单提示语label的对齐方式
show-messsage ==> 指定是否显示校验错误信息
inline ==> 属性: 表单元素可以水平排列
FormItem 参数Props
label ==> 指定显示的标签提示
prop ==> 指定要验证的属性字段名称,配合rules左数据校验(不带对象)
rules ==> 单独为该域做验证,动态更新时常用
常见的校验方式: [{required: true, message: 'Mailbox cannot be empty', trigger: 'blur'}]