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

File diff suppressed because it is too large Load Diff

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) {

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"
} }
} }

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 {

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;
}
}
} }

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);
} }
} }