github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

update form docs

pull/2/head
baiyaaaaa 2016-08-29 19:19:14 +08:00
parent 57b33a3e36
commit 538e2934c5
6 changed files with 363 additions and 577 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

611
examples/docs/form.md
View File

@ -56,25 +56,25 @@
type: '', type: '',
remark: '' remark: ''
}, },
formAlignRight: {
name: '',
region: '',
type: ''
},
formAlignLeft: { formAlignLeft: {
name: '', name: '',
region: '', region: '',
type: '', type: ''
remark: ''
}, },
ruleForm: { ruleForm: {
sex: '', name: '',
user1: '', region: '',
user2: '', date1: '',
age: '', date2: '',
region: [], delivery: false,
desc: '', type: [],
mail: '' resource: '',
}, desc: ''
formNoLabel: {
username: '',
pass: '',
rememberPss: false
}, },
ruleForm2: { ruleForm2: {
pass: '', pass: '',
@ -85,28 +85,26 @@
options: [ options: [
], ],
rules: { rules: {
user1: [ name: [
{ required: true, min: 5, message: '用户名至少为 5 个字符', trigger: 'blur' } { required: true, message: '请输入活动名称', trigger: 'blur' }
],
user2: [
{ required: true, min: 3, message: '用户名至少为 3 个字符', trigger: 'blur' }
],
age: [
{ required: true, message: '请输入年龄', trigger: 'blur' },
{ type: 'number', min: 18, message: '输入必须为大于18的整数', trigger: 'blur' }
],
mail: [
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
],
sex: [
{ required: true, message: '请选择性别' }
], ],
region: [ region: [
{ type: 'array', required: true, message: '请至少选择一个地区', trigger: 'change' } { required: true, message: '请选择活动区域', trigger: 'change' }
],
date1: [
{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }
],
date2: [
{ type: 'date', required: true, message: '请选择时间', trigger: 'change' }
],
type: [
{ type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
],
resource: [
{ required: true, message: '请选择活动资源', trigger: 'change' }
], ],
desc: [ desc: [
{ required: true, message: '请填写个人简介', trigger: 'blur' } { required: true, message: '请填写活动形式', trigger: 'blur' }
] ]
}, },
rules2: { rules2: {
@ -202,9 +200,8 @@
<style> <style>
.demo-form { .demo-form {
.el-input, .el-form {
.el-textarea { width: 440px;
width: 360px;
} }
.line { .line {
@ -240,11 +237,6 @@
} }
} }
} }
.el-date-picker + .el-date-picker {
margin-left: 10px;
}
}
.demo-form-normal { .demo-form-normal {
width: 440px; width: 440px;
} }
@ -256,8 +248,15 @@
margin-right: 10px; margin-right: 10px;
} }
} }
.demo-form-stacked {
width: 270px;
.el-select .el-input {
width: 100%;
}
}
.demo-ruleForm { .demo-ruleForm {
width: 440px; width: 460px;
.el-input, .el-input,
.el-textarea { .el-textarea {
@ -268,19 +267,26 @@
.el-input { .el-input {
display: inline-block; display: inline-block;
margin-right: 10px; margin-right: 10px;
width: 270px;
} }
} }
.fr { .fr {
float: right; float: right;
} }
}
</style> </style>
## 基础使用 ## Form 表单
Form 组件是一个具有校验和提交功能的表单，包含复选框、单选框、输入框、下拉选择框等元素。 由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据
<div class="demo-box demo-form demo-form-normal"> ### 典型表单
<el-form ref="form" @submit.prevent="onSubmit" label-width="80px">
包括各种表单项，比如输入框、选择器、开关、单选框、多选框等。
::: demo 在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker
```html
<el-form ref="form" :model="form" label-width="80px" @submit.prevent="onSubmit">
<el-form-item label="活动名称"> <el-form-item label="活动名称">
<el-input v-model="form.name"></el-input> <el-input v-model="form.name"></el-input>
</el-form-item> </el-form-item>
@ -290,7 +296,7 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单
<el-option label="区域二" value="beijing"></el-option> <el-option label="区域二" value="beijing"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="配送时间"> <el-form-item label="活动时间">
<el-col :span="11"> <el-col :span="11">
<el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker> <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
</el-col> </el-col>
@ -299,7 +305,7 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单
<el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker> <el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
</el-col> </el-col>
</el-form-item> </el-form-item>
<el-form-item label="蜂鸟配送"> <el-form-item label="即时配送">
<el-switch on-text="" off-text="" v-model="form.delivery"></el-switch> <el-switch on-text="" off-text="" v-model="form.delivery"></el-switch>
</el-form-item> </el-form-item>
<el-form-item label="活动性质"> <el-form-item label="活动性质">
@ -311,8 +317,10 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单
</el-checkbox-group> </el-checkbox-group>
</el-form-item> </el-form-item>
<el-form-item label="特殊资源"> <el-form-item label="特殊资源">
<el-radio v-model="form.resource" label="线上品牌商赞助"></el-radio> <el-radio-group v-model="form.resource">
<el-radio v-model="form.resource" label="线下场地免费"></el-radio> <el-radio label="线上品牌商赞助"></el-radio>
<el-radio label="线下场地免费"></el-radio>
</el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="活动形式"> <el-form-item label="活动形式">
<el-input type="textarea" v-model="form.desc"></el-input> <el-input type="textarea" v-model="form.desc"></el-input>
@ -322,53 +330,6 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单
<el-button @click.native.prevent>取消</el-button> <el-button @click.native.prevent>取消</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div>
```html
<template>
<el-form ref="form" @submit.prevent="onSubmit" label-width="80px">
<el-form-item label="活动名称">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="活动区域">
<el-select v-model="form.region" :width="360" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="配送时间">
<el-col :span="11">
<el-date-picker type="date" placeholder="选择日期" style="width: 100%;"></el-date-picker>
</el-col>
<el-col class="line" :span="2">-</el-col>
<el-col :span="11">
<el-time-picker type="fixed-time" placeholder="选择时间" style="width: 100%;"></el-time-picker>
</el-col>
</el-form-item>
<el-form-item label="蜂鸟配送">
<el-switch on-text="" off-text="" :value="form.delivery"></el-switch>
</el-form-item>
<el-form-item label="活动性质">
<el-checkbox-group v-model="form.type">
<el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
<el-checkbox label="地推活动" name="type"></el-checkbox>
<el-checkbox label="线下主题活动" name="type"></el-checkbox>
<el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="特殊资源">
<el-radio v-model="form.resource" label="线上品牌商赞助"></el-radio>
<el-radio v-model="form.resource" label="线下场地免费"></el-radio>
</el-form-item>
<el-form-item label="活动形式">
<el-input type="textarea" v-model="form.desc"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary">立即创建</el-button>
<el-button @click.native.prevent>取消</el-button>
</el-form-item>
</el-form>
</template>
<script> <script>
export default { export default {
data() { data() {
@ -393,31 +354,19 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单
} }
</script> </script>
``` ```
:::
## Inline Form ### 行内表单
<div class="demo-box demo-form demo-form-inline"> 当垂直方向空间受限且表单较简单时，可以在一行内放置表单。
<el-form type="inline" :model="formInline" @submit.prevent="onSubmit">
<el-form-item>
<el-input v-model="formInline.user" placeholder="审批人"></el-input>
</el-form-item><el-form-item>
<el-select v-model="formInline.region" :width="150" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item><el-form-item>
<el-button type="primary">查询</el-button>
</el-form-item>
</el-form>
</div>
::: demo Form 组件的 `type` 属性可以控制表单的类型，当设为 `inline` 时可以让表单域变为行内的表单域
```html ```html
<template> <el-form :inline="true" :model="formInline" @submit.prevent="onSubmit" class="demo-form-inline">
<el-form type="inline" :model="formInline" @submit.prevent="onSubmit">
<el-form-item> <el-form-item>
<el-input v-model="formInline.user" placeholder="审批人"></el-input> <el-input v-model="formInline.user" placeholder="审批人"></el-input>
</el-form-item><el-form-item> </el-form-item><el-form-item>
<el-select v-model="formInline.region" :width="150" placeholder="请选择活动区域"> <el-select v-model="formInline.region" :width="150" placeholder="活动区域">
<el-option label="区域一" value="shanghai"></el-option> <el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option> <el-option label="区域二" value="beijing"></el-option>
</el-select> </el-select>
@ -425,7 +374,6 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单
<el-button type="primary">查询</el-button> <el-button type="primary">查询</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</template>
<script> <script>
export default { export default {
data() { data() {
@ -444,57 +392,27 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单
} }
</script> </script>
``` ```
:::
## Stacked Form ### 对齐方式
<div class="demo-box demo-form demo-form-stacked"> 根据具体目标和制约因素，选择最佳的标签对齐方式。
<el-form type="stacked" :model="formStacked" @submit.prevent="onSubmit">
<el-form-item label="名称">
<el-input v-model="formStacked.name"></el-input>
</el-form-item>
<el-form-item label="活动区域">
<el-select v-model="formStacked.region" :width="360" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="活动展开形式">
<el-input v-model="formStacked.type"></el-input>
</el-form-item>
<el-form-item label="备注">
<el-input v-model="formStacked.remark"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary">立即创建</el-button>
<el-button @click.native.prevent>取消</el-button>
</el-form-item>
</el-form>
</div>
顶部对齐
::: demo 通过设置 `label-position` 属性可以改变表单域标签的位置，可选值为 `top`、`left`，当设为 `top` 时标签会置于表单域的顶部
```html ```html
<template> <el-form label-position="top" :model="formStacked" class="demo-form-stacked">
<el-form type="stacked" :model="formStacked" @submit.prevent="onSubmit">
<el-form-item label="名称"> <el-form-item label="名称">
<el-input v-model="formStacked.name"></el-input> <el-input v-model="formStacked.name"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="活动区域"> <el-form-item label="活动区域">
<el-select v-model="formStacked.region" :width="360" placeholder="请选择活动区域"> <el-input v-model="formStacked.region"></el-input>
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item> </el-form-item>
<el-form-item label="活动展开形式"> <el-form-item label="活动展开形式">
<el-input v-model="formStacked.type"></el-input> <el-input v-model="formStacked.type"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="备注">
<el-input v-model="formStacked.remark"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary">立即创建</el-button>
<el-button @click.native.prevent>取消</el-button>
</el-form-item>
</el-form> </el-form>
</template>
<script> <script>
export default { export default {
data() { data() {
@ -502,62 +420,61 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单
formStacked: { formStacked: {
name: '', name: '',
region: '', region: '',
type: '', type: ''
remark: ''
} }
}; };
},
methods: {
onSubmit() {
console.log('submit!');
}
} }
} }
</script> </script>
``` ```
:::
## 标签左对齐 右对齐
<div class="demo-box demo-form">
<el-form :model="formAlignLeft" label-align="left" @submit.prevent="onSubmit" label-width="80px">
<el-form-item label="名称">
<el-input v-model="formAlignLeft.name"></el-input>
</el-form-item>
<el-form-item label="推广地">
<el-select v-model="formAlignLeft.region" :width="360" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="活动形式">
<el-input v-model="formAlignLeft.type"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary">查询</el-button>
</el-form-item>
</el-form>
</div>
::: demo 通过设置 `label-position` 属性可以改变表单域标签的位置，默认不设置的情况下标签是右对齐的
```html ```html
<template> <el-form :model="formAlignRight" label-width="80px">
<el-form :model="formAlignLeft" label-align="left" @submit.prevent="onSubmit" label-width="80px"> <el-form-item label="活动名称">
<el-form-item label="名称"> <el-input v-model="formAlignRight.name"></el-input>
</el-form-item>
<el-form-item label="推广地">
<el-input v-model="formAlignRight.region"></el-input>
</el-form-item>
<el-form-item label="活动形式">
<el-input v-model="formAlignRight.type"></el-input>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
formAlignRight: {
name: '',
region: '',
type: ''
}
};
}
}
</script>
```
:::
左对齐
::: demo 通过设置 `label-position` 属性可以改变表单域标签的位置，可选值为 `top`、`left`，当设为 `left` 时标签会变为左对齐
```html
<el-form :model="formAlignLeft" label-position="left" @submit.prevent="onSubmit" label-width="80px">
<el-form-item label="活动名称">
<el-input v-model="formAlignLeft.name"></el-input> <el-input v-model="formAlignLeft.name"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="推广地"> <el-form-item label="推广地">
<el-select v-model="formAlignLeft.region" :width="360" placeholder="请选择活动区域"> <el-input v-model="formAlignLeft.region"></el-input>
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item> </el-form-item>
<el-form-item label="活动形式"> <el-form-item label="活动形式">
<el-input v-model="formAlignLeft.type"></el-input> <el-input v-model="formAlignLeft.type"></el-input>
</el-form-item> </el-form-item>
<el-form-item>
<el-button type="primary">查询</el-button>
</el-form-item>
</el-form> </el-form>
</template>
<script> <script>
export default { export default {
data() { data() {
@ -568,196 +485,101 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单
type: '' type: ''
} }
}; };
},
methods: {
onSubmit() {
console.log('submit!');
}
} }
} }
</script> </script>
``` ```
:::
## 无标签 ### 表单验证
<div class="demo-box demo-form"> 在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误。
<el-form :model="formNoLabel" @submit.prevent="onSubmit" style="width: 360px;">
<el-form-item>
<el-input v-model="formNoLabel.username" placeholder="手机号码/电子邮箱"></el-input>
</el-form-item>
<el-form-item>
<el-input v-model="formNoLabel.pass" placeholder="账户密码" auto-complete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" class="fr">登录</el-button>
<el-checkbox v-model="formNoLabel.rememberPss" label="记住密码"></el-checkbox>
</el-form-item>
</el-form>
</div>
::: demo Form 组件提供了表单验证的功能，只需要通过 `rule` 属性传入约定的验证规则，并 Form-Item 的 `prop` 属相设置为需校验的字段名即可。校验规则参见 [async-validator](https://github.com/yiminghe/async-validator)
```html ```html
<template> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form :model="formNoLabel" @submit.prevent="onSubmit" style="width: 360px;"> <el-form-item label="活动名称" prop="name">
<el-form-item> <el-input v-model="ruleForm.name"></el-input>
<el-input v-model="formNoLabel.username" placeholder="手机号码/电子邮箱"></el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item label="活动区域" prop="region">
<el-input v-model="formNoLabel.pass" placeholder="账户密码" auto-complete="off"></el-input> <el-select v-model="ruleForm.region" :width="360" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item label="活动时间">
<el-button type="primary" class="fr">登录</el-button>
<el-checkbox v-model="formNoLabel.rememberPss" label="记住密码"></el-checkbox>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
formNoLabel: {
username: '',
pass: '',
rememberPss: false
}
};
},
methods: {
onSubmit() {
console.log('submit!');
}
}
}
</script>
```
## 表单验证
<div class="demo-box demo-form demo-ruleForm">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px">
<el-form-item label="用户名" :required="true">
<el-col :span="11"> <el-col :span="11">
<el-form-item prop="user1"> <el-form-item prop="date1">
<el-input v-model="ruleForm.user1" placeholder="First Name"></el-input> <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="2"><div class="line">-</div></el-col> <el-col class="line" :span="2">-</el-col>
<el-col :span="11"> <el-col :span="11">
<el-form-item prop="user2"> <el-form-item prop="date2">
<el-input v-model="ruleForm.user2" placeholder="Last Name"></el-input> <el-time-picker type="fixed-time" placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
</el-form-item> </el-form-item>
</el-col> </el-col>
</el-form-item> </el-form-item>
<el-form-item label="年龄" prop="age"> <el-form-item label="即时配送">
<el-input v-model="ruleForm.age" :number="true"></el-input> <el-switch on-text="" off-text="" v-model="ruleForm.delivery"></el-switch>
</el-form-item> </el-form-item>
<el-form-item label="邮箱" prop="mail"> <el-form-item label="活动性质" prop="type">
<el-input v-model="ruleForm.mail"></el-input> <el-checkbox-group v-model="ruleForm.type">
</el-form-item> <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
<el-form-item label="性别" prop="sex"> <el-checkbox label="地推活动" name="type"></el-checkbox>
<el-radio-group v-model="ruleForm.sex"> <el-checkbox label="线下主题活动" name="type"></el-checkbox>
<el-radio label="男" name="sex"></el-radio> <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
<el-radio label="女" name="sex"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="简介" prop="desc">
<el-input type="textarea" v-model="ruleForm.desc"></el-input>
</el-form-item>
<el-form-item label="地区" prop="region" placeholder="请选择地区">
<el-checkbox-group v-model="ruleForm.region">
<el-checkbox label="BeiJing" name="region"></el-checkbox>
<el-checkbox label="ShangHai" name="region"></el-checkbox>
<el-checkbox label="ShenZhen" name="region"></el-checkbox>
<el-checkbox label="GuangZhou" name="region"></el-checkbox>
</el-checkbox-group> </el-checkbox-group>
</el-form-item> </el-form-item>
<el-form-item label="特殊资源" prop="resource">
<el-radio-group v-model="ruleForm.resource">
<el-radio label="线上品牌商赞助"></el-radio>
<el-radio label="线下场地免费"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="活动形式" prop="desc">
<el-input type="textarea" v-model="ruleForm.desc"></el-input>
</el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" @click.native.prevent="handleSubmit">提交</el-button> <el-button type="primary" @click.native.prevent="handleSubmit">立即创建</el-button>
<el-button @click.native.prevent="handleReset">重置</el-button> <el-button @click.native.prevent="handleReset">重置</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div>
```html
<template>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="80px">
<el-form-item label="用户名" :required="true">
<el-col :span="11">
<el-form-item prop="user1">
<el-input v-model="ruleForm.user1" placeholder="First Name"></el-input>
</el-form-item>
</el-col>
<el-col :span="2"><div class="line">-</div></el-col>
<el-col :span="11">
<el-form-item prop="user2">
<el-input v-model="ruleForm.user2" placeholder="Last Name"></el-input>
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model="ruleForm.age" :number="true"></el-input>
</el-form-item>
<el-form-item label="邮箱" prop="mail">
<el-input v-model="ruleForm.mail"></el-input>
</el-form-item>
<el-form-item label="性别" prop="sex">
<el-radio-group v-model="ruleForm.sex">
<el-radio label="男" name="sex"></el-radio>
<el-radio label="女" name="sex"></el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="简介" prop="desc">
<el-input type="textarea" v-model="ruleForm.desc"></el-input>
</el-form-item>
<el-form-item label="地区" prop="region" placeholder="请选择地区">
<el-checkbox-group v-model="ruleForm.region">
<el-checkbox label="BeiJing" name="region"></el-checkbox>
<el-checkbox label="ShangHai" name="region"></el-checkbox>
<el-checkbox label="ShenZhen" name="region"></el-checkbox>
<el-checkbox label="GuangZhou" name="region"></el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item>
<el-button type="primary" @click.prevent="handleSubmit">提交</el-button>
<el-button @click.prevent="handleReset">重置</el-button>
</el-form-item>
</el-form>
</template>
<script> <script>
export default { export default {
data() { data() {
return { return {
ruleForm: { ruleForm: {
sex: '', name: '',
user1: '', region: '',
user2: '', date1: '',
age: '', date2: '',
region: [], delivery: false,
desc: '', type: [],
mail: '' resource: '',
desc: ''
}, },
rules: { rules: {
user1: [ name: [
{ required: true, min: 5, message: '用户名至少为 5 个字符', trigger: 'blur' } { required: true, message: '请输入活动名称', trigger: 'blur' }
],
user2: [
{ required: true, min: 3, message: '用户名至少为 3 个字符', trigger: 'blur' }
],
age: [
{ required: true, message: '请输入年龄', trigger: 'blur' },
{ type: 'number', min: 18, message: '输入必须为大于18的整数', trigger: 'blur' }
],
mail: [
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
],
sex: [
{ required: true, message: '请选择性别' }
], ],
region: [ region: [
{ type: 'array', required: true, message: '请至少选择一个地区', trigger: 'change' } { required: true, message: '请选择活动区域', trigger: 'change' }
],
date1: [
{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }
],
date2: [
{ type: 'date', required: true, message: '请选择时间', trigger: 'change' }
],
type: [
{ type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
],
resource: [
{ required: true, message: '请选择活动资源', trigger: 'change' }
], ],
desc: [ desc: [
{ required: true, message: '请填写个人简介', trigger: 'blur' } { required: true, message: '请填写活动形式', trigger: 'blur' }
] ]
} }
}; };
@ -780,30 +602,13 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单
} }
</script> </script>
``` ```
:::
## 自定义校验规则 ### 自定义校验规则
<div class="demo-box demo-form demo-ruleForm">
<el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="80px">
<el-form-item label="密码" prop="pass">
<el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="checkPass">
<el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model="ruleForm2.age"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click.native.prevent="handleSubmit2">提交</el-button>
<el-button @click.native.prevent="handleReset2">重置</el-button>
</el-form-item>
</el-form>
</div>
::: demo 这个例子中展示了如何使用自定义验证规则来完成密码的二次验证
```html ```html
<template> <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
<el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="80px">
<el-form-item label="密码" prop="pass"> <el-form-item label="密码" prop="pass">
<el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input> <el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
</el-form-item> </el-form-item>
@ -818,7 +623,6 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单
<el-button @click.native.prevent="handleReset2">重置</el-button> <el-button @click.native.prevent="handleReset2">重置</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</template>
<script> <script>
export default { export default {
data() { data() {
@ -896,38 +700,13 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单
} }
</script> </script>
``` ```
:::
## 动态增减表单项 ### 动态增减表单项
<div class="demo-box demo-form demo-dynamic">
<el-form :model="dynamicForm" :rules="dynamicRule" ref="dynamicForm" label-width="80px">
<el-form-item prop="email" label="邮箱">
<el-input v-model="dynamicForm.email"></el-input>
</el-form-item>
<el-form-item
v-for="(domain, index) in dynamicForm.domains"
:label="'域名' + index"
:key="domain.key"
:prop="'domains:' + index"
:rules="{
type: 'object', required: true,
fields: {
value: { required: true, message: '域名不能为空', trigger: 'blur' }
}
}"
>
<el-input v-model="domain.value"></el-input><el-button @click.native.prevent="removeDomain(domain)">删除</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click.native.prevent="handleSubmit3">提交</el-button>
<el-button @click.native.prevent="addDomain">新增域名</el-button>
</el-form-item>
</el-form>
</div>
::: demo 除了在 Form 组件上一次性传递所有的验证规则外还可以在单个的表单域上传递属性的验证规则
```html ```html
<template> <el-form :model="dynamicForm" :rules="dynamicRule" ref="dynamicForm" label-width="100px" class="demo-dynamic">
<el-form :model="dynamicForm" :rules="dynamicRule" ref="dynamicForm" label-width="80px">
<el-form-item prop="email" label="邮箱"> <el-form-item prop="email" label="邮箱">
<el-input v-model="dynamicForm.email"></el-input> <el-input v-model="dynamicForm.email"></el-input>
</el-form-item> </el-form-item>
@ -950,7 +729,6 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单
<el-button @click.native.prevent="addDomain">新增域名</el-button> <el-button @click.native.prevent="addDomain">新增域名</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</template>
<script> <script>
export default { export default {
data() { data() {
@ -997,31 +775,32 @@ Form 组件是一个具有校验和提交功能的表单，包含复选框、单
} }
</script> </script>
``` ```
:::
## el-form API ### Form Attributes
### 组件属性和事件
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- | |---------- |-------------- |---------- |-------------------------------- |-------- |
| model | 表单数据对象 | object | | | | model | 表单数据对象 | object | — | — |
| rules | 表单验证规则 | object | | | | rules | 表单验证规则 | object | — | — |
| type | 表单类型 | string | stacked, inline, horizontal | horizontal | | type | 表单类型 | string | stacked, inline, horizontal | horizontal |
| label-align | 表单域标签的水平对齐位置 | string | right,left | right | | label-align | 表单域标签的水平对齐位置 | string | right,left | right |
| label-width | 表单域标签的宽度，所有的 form-item 都会继承 form 组件的 labelWidth 的值 | string | | | | label-width | 表单域标签的宽度，所有的 form-item 都会继承 form 组件的 labelWidth 的值 | string | — | — |
| label-suffix | 表单域标签的后缀 | string | | | | label-suffix | 表单域标签的后缀 | string | — | — |
### el-form 实例属性和方法 ### Form Methods
| 方法名 | 说明 | 类型 | 默认值 | | 方法名 | 说明 |
|---------- |-------------- |---------- |-------- | |---------- |-------------- |
| validate(cb) | 对整个表单进行校验的方法, 校验结束后会调用传入的回调方法, cb(valid), valid 参数是校验 bool 值结果 | function | | | validate(cb) | 对整个表单进行校验的方法 |
| validateField(prop, cb) | 对部分表单字段进行校验的方法 | | | | validateField(prop, cb) | 对部分表单字段进行校验的方法 |
| resetFields | 对整个表单进行重置，将所有字段值重置为空并移除校验结果 | | | | resetFields | 对整个表单进行重置，将所有字段值重置为空并移除校验结果 |
### Form-Item Attributes
## el-form-item API
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- | |---------- |-------------- |---------- |-------------------------------- |-------- |
| prop | 表单域model字段 | string | 传入父级 v-form 的 model 中的所有属性 | | | prop | 表单域 model 字段 | string | 传入 Form 组件的 `model` 中的字段 | — |
| label | 标签文本 | string | | | | label | 标签文本 | string | — | — |
| label-width | 表单域标签的的宽度，例如 '50px' | string | | | | label-width | 表单域标签的的宽度，例如 '50px' | string | — | — |
| required | 是否必填，如不设置，则会根据校验规则自动生成 | bolean | | false | | required | 是否必填，如不设置，则会根据校验规则自动生成 | bolean | — | false |

7
packages/date-picker/src/picker.vue
View File

@ -34,6 +34,7 @@ import Vue from 'vue';
import Clickoutside from 'main/utils/clickoutside'; import Clickoutside from 'main/utils/clickoutside';
import { merge, formatDate, parseDate, getWeekNumber } from './util'; import { merge, formatDate, parseDate, getWeekNumber } from './util';
import Popper from 'main/utils/popper'; import Popper from 'main/utils/popper';
import emitter from 'main/mixins/emitter';
const FUNCTION_KEYS = [13, 16, 17, 18, 19, 20, 27, 33, 34, 35, 36, 37, 38, 39, 40]; const FUNCTION_KEYS = [13, 16, 17, 18, 19, 20, 27, 33, 34, 35, 36, 37, 38, 39, 40];
const RANGE_SEPARATOR = ' - '; const RANGE_SEPARATOR = ' - ';
@ -178,6 +179,8 @@ const TYPE_VALUE_RESOLVER_MAP = {
}; };
export default { export default {
mixins: [emitter],
props: { props: {
format: String, format: String,
readonly: Boolean, readonly: Boolean,
@ -200,6 +203,9 @@ export default {
watch: { watch: {
pickerVisible(val) { pickerVisible(val) {
val === true ? this.showPicker() : this.hidePicker(); val === true ? this.showPicker() : this.hidePicker();
},
value(val) {
this.dispatch('form-item', 'el.form.change');
} }
}, },
@ -284,6 +290,7 @@ export default {
handleBlur() { handleBlur() {
this.$emit('blur', this); this.$emit('blur', this);
this.dispatch('form-item', 'el.form.blur');
}, },
handleKeydown(event) { handleKeydown(event) {

2
packages/form/package.json
View File

@ -12,6 +12,6 @@
"author": "haiping.zeng<haiping.zeng@ele.me>", "author": "haiping.zeng<haiping.zeng@ele.me>",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"async-validator": "^1.6.5" "async-validator": "^1.6.6"
} }
} }

11
packages/form/src/form.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<form :class="[ <form class="el-form" :class="[
type ? 'el-form-' + type : 'el-form', labelPosition ? 'el-form--label-' + labelPosition : '',
{ 'is-label-left': labelAlign === 'left' } { 'el-form--inline': inline }
]"> ]">
<slot></slot> <slot></slot>
</form> </form>
@ -16,12 +16,13 @@
model: Object, model: Object,
rules: Object, rules: Object,
type: String, type: String,
labelAlign: String, labelPosition: String,
labelWidth: String, labelWidth: String,
labelSuffix: { labelSuffix: {
type: String, type: String,
default: '' default: ''
} },
inline: Boolean
}, },
data() { data() {
return { return {

37
packages/theme-default/src/form.css
View File

@ -3,11 +3,28 @@
@component-namespace el { @component-namespace el {
@b form { @b form {
@when label-left { @m label-left {
& .el-form-item__label { & .el-form-item__label {
text-align: left; text-align: left;
} }
} }
@m label-top {
& .el-form-item__label {
float: none;
display: inline-block;
padding: 0 0 10px 0;
}
}
@m inline {
& .el-form-item {
display: inline-block;
margin-right: 10px;
> * {
vertical-align: top;
}
}
}
} }
@b form-item { @b form-item {
margin-bottom: 22px; margin-bottom: 22px;
@ -67,22 +84,4 @@
} }
} }
} }
@b form-inline {
& .el-form-item {
display: inline-block;
margin-right: 10px;
> * {
vertical-align: top;
}
}
}
@b form-stacked {
& .el-form-item__label {
float: none;
display: inline-block;
padding: 0 0 10px 0;
}
}
} }

2
packages/theme-default/src/switch.css
View File

@ -72,7 +72,7 @@
border-radius: 15px; border-radius: 15px;
transition: transform .3s; transition: transform .3s;
size: 16px; size: 16px;
z-index: 100; z-index: 20;
background-color: var(--color-white); background-color: var(--color-white);
} }
} }