diff --git a/examples/docs/form.md b/examples/docs/form.md
index b5481515..3c6c1655 100644
--- a/examples/docs/form.md
+++ b/examples/docs/form.md
@@ -56,25 +56,25 @@
type: '',
remark: ''
},
+ formAlignRight: {
+ name: '',
+ region: '',
+ type: ''
+ },
formAlignLeft: {
name: '',
region: '',
- type: '',
- remark: ''
+ type: ''
},
ruleForm: {
- sex: '',
- user1: '',
- user2: '',
- age: '',
- region: [],
- desc: '',
- mail: ''
- },
- formNoLabel: {
- username: '',
- pass: '',
- rememberPss: false
+ name: '',
+ region: '',
+ date1: '',
+ date2: '',
+ delivery: false,
+ type: [],
+ resource: '',
+ desc: ''
},
ruleForm2: {
pass: '',
@@ -85,28 +85,26 @@
options: [
],
rules: {
- user1: [
- { required: true, min: 5, message: '用户名至少为 5 个字符', 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: '请选择性别' }
+ name: [
+ { required: true, message: '请输入活动名称', trigger: 'blur' }
],
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: [
- { required: true, message: '请填写个人简介', trigger: 'blur' }
+ { required: true, message: '请填写活动形式', trigger: 'blur' }
]
},
rules2: {
@@ -202,9 +200,8 @@
-## 基础使用
+## Form 表单
-Form 组件是一个具有校验和提交功能的表单，包含复选框、单选框、输入框、下拉选择框等元素。
+由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 立即创建
- 取消
-
-
-
+### 典型表单
+包括各种表单项，比如输入框、选择器、开关、单选框、多选框等。
+
+::: demo 在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker
```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 立即创建
- 取消
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ -
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 立即创建
+ 取消
+
+
```
+:::
-## Inline Form
+### 行内表单
-
-
-
-
-
-
-
-
-
-
- 查询
-
-
-
+当垂直方向空间受限且表单较简单时，可以在一行内放置表单。
+::: demo Form 组件的 `type` 属性可以控制表单的类型，当设为 `inline` 时可以让表单域变为行内的表单域
```html
-
-
-
-
-
-
-
-
-
-
- 查询
-
-
-
+
+
+
+
+
+
+
+
+
+ 查询
+
+
```
+:::
-## Stacked Form
+### 对齐方式
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 立即创建
- 取消
-
-
-
+根据具体目标和制约因素，选择最佳的标签对齐方式。
+顶部对齐
+
+::: demo 通过设置 `label-position` 属性可以改变表单域标签的位置，可选值为 `top`、`left`，当设为 `top` 时标签会置于表单域的顶部
```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 立即创建
- 取消
-
-
-
+
+
+
+
+
+
+
+
+
+
+
```
+:::
-## 标签左对齐
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 查询
-
-
-
+右对齐
+::: demo 通过设置 `label-position` 属性可以改变表单域标签的位置，默认不设置的情况下标签是右对齐的
```html
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 查询
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+```
+:::
+
+左对齐
+
+::: demo 通过设置 `label-position` 属性可以改变表单域标签的位置，可选值为 `top`、`left`，当设为 `left` 时标签会变为左对齐
+```html
+
+
+
+
+
+
+
+
+
+
+
```
+:::
-## 无标签
+### 表单验证
-
-
-
-
-
-
-
-
-
- 登录
-
-
-
-
+在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误。
+::: demo Form 组件提供了表单验证的功能，只需要通过 `rule` 属性传入约定的验证规则，并 Form-Item 的 `prop` 属相设置为需校验的字段名即可。校验规则参见 [async-validator](https://github.com/yiminghe/async-validator)
```html
-
-
-
-
-
-
-
-
-
- 登录
-
-
-
-
-
-```
-
-## 表单验证
-
-
-
-```html
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 提交
- 重置
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ -
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 立即创建
+ 重置
+
+
```
+:::
-## 自定义校验规则
-
-
-
-
-
-
-
-
-
-
-
-
-
- 提交
- 重置
-
-
-
+### 自定义校验规则
+::: demo 这个例子中展示了如何使用自定义验证规则来完成密码的二次验证
```html
-
-
-
-
-
-
-
-
-
-
-
-
- 提交
- 重置
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+ 提交
+ 重置
+
+
```
+:::
-## 动态增减表单项
-
-
-
-
-
-
-
- 删除
-
-
- 提交
- 新增域名
-
-
-
+### 动态增减表单项
+::: demo 除了在 Form 组件上一次性传递所有的验证规则外还可以在单个的表单域上传递属性的验证规则
```html
-
-
-
-
-
-
- 删除
-
-
- 提交
- 新增域名
-
-
-
+
+
+
+
+
+ 删除
+
+
+ 提交
+ 新增域名
+
+
```
+:::
-## el-form API
-### 组件属性和事件
+### Form Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
-| model | 表单数据对象 | object | | |
-| rules | 表单验证规则 | object | | |
+| model | 表单数据对象 | object | — | — |
+| rules | 表单验证规则 | object | — | — |
| type | 表单类型 | string | stacked, inline, horizontal | horizontal |
| label-align | 表单域标签的水平对齐位置 | string | right,left | right |
-| label-width | 表单域标签的宽度，所有的 form-item 都会继承 form 组件的 labelWidth 的值 | string | | |
-| label-suffix | 表单域标签的后缀 | string | | |
+| label-width | 表单域标签的宽度，所有的 form-item 都会继承 form 组件的 labelWidth 的值 | string | — | — |
+| label-suffix | 表单域标签的后缀 | string | — | — |
-### el-form 实例属性和方法
+### Form Methods
-| 方法名 | 说明 | 类型 | 默认值 |
-|---------- |-------------- |---------- |-------- |
-| validate(cb) | 对整个表单进行校验的方法, 校验结束后会调用传入的回调方法, cb(valid), valid 参数是校验 bool 值结果 | function | |
-| validateField(prop, cb) | 对部分表单字段进行校验的方法 | | |
-| resetFields | 对整个表单进行重置，将所有字段值重置为空并移除校验结果 | | |
+| 方法名 | 说明 |
+|---------- |-------------- |
+| validate(cb) | 对整个表单进行校验的方法 |
+| validateField(prop, cb) | 对部分表单字段进行校验的方法 |
+| resetFields | 对整个表单进行重置，将所有字段值重置为空并移除校验结果 |
+
+### Form-Item Attributes
-## el-form-item API
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
-| prop | 表单域model字段 | string | 传入父级 v-form 的 model 中的所有属性 | |
-| label | 标签文本 | string | | |
-| label-width | 表单域标签的的宽度，例如 '50px' | string | | |
-| required | 是否必填，如不设置，则会根据校验规则自动生成 | bolean | | false |
+| prop | 表单域 model 字段 | string | 传入 Form 组件的 `model` 中的字段 | — |
+| label | 标签文本 | string | — | — |
+| label-width | 表单域标签的的宽度，例如 '50px' | string | — | — |
+| required | 是否必填，如不设置，则会根据校验规则自动生成 | bolean | — | false |
diff --git a/packages/date-picker/src/picker.vue b/packages/date-picker/src/picker.vue
index 81c21e41..83c0fc97 100644
--- a/packages/date-picker/src/picker.vue
+++ b/packages/date-picker/src/picker.vue
@@ -34,6 +34,7 @@ import Vue from 'vue';
import Clickoutside from 'main/utils/clickoutside';
import { merge, formatDate, parseDate, getWeekNumber } from './util';
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 RANGE_SEPARATOR = ' - ';
@@ -178,6 +179,8 @@ const TYPE_VALUE_RESOLVER_MAP = {
};
export default {
+ mixins: [emitter],
+
props: {
format: String,
readonly: Boolean,
@@ -200,6 +203,9 @@ export default {
watch: {
pickerVisible(val) {
val === true ? this.showPicker() : this.hidePicker();
+ },
+ value(val) {
+ this.dispatch('form-item', 'el.form.change');
}
},
@@ -284,6 +290,7 @@ export default {
handleBlur() {
this.$emit('blur', this);
+ this.dispatch('form-item', 'el.form.blur');
},
handleKeydown(event) {
diff --git a/packages/form/package.json b/packages/form/package.json
index 87d07f1a..10d0c355 100644
--- a/packages/form/package.json
+++ b/packages/form/package.json
@@ -12,6 +12,6 @@
"author": "haiping.zeng",
"license": "MIT",
"dependencies": {
- "async-validator": "^1.6.5"
+ "async-validator": "^1.6.6"
}
}
diff --git a/packages/form/src/form.vue b/packages/form/src/form.vue
index 8427414e..adebb2e1 100644
--- a/packages/form/src/form.vue
+++ b/packages/form/src/form.vue
@@ -1,7 +1,7 @@
-
@@ -16,12 +16,13 @@
model: Object,
rules: Object,
type: String,
- labelAlign: String,
+ labelPosition: String,
labelWidth: String,
labelSuffix: {
type: String,
default: ''
- }
+ },
+ inline: Boolean
},
data() {
return {
diff --git a/packages/theme-default/src/form.css b/packages/theme-default/src/form.css
index 0b44df05..896fad72 100644
--- a/packages/theme-default/src/form.css
+++ b/packages/theme-default/src/form.css
@@ -3,11 +3,28 @@
@component-namespace el {
@b form {
- @when label-left {
+ @m label-left {
& .el-form-item__label {
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 {
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;
- }
- }
}
diff --git a/packages/theme-default/src/switch.css b/packages/theme-default/src/switch.css
index b8fceca5..5678d916 100644
--- a/packages/theme-default/src/switch.css
+++ b/packages/theme-default/src/switch.css
@@ -72,7 +72,7 @@
border-radius: 15px;
transition: transform .3s;
size: 16px;
- z-index: 100;
+ z-index: 20;
background-color: var(--color-white);
}
}