mirror of https://github.com/ElemeFE/element
update form docs
parent
57b33a3e36
commit
538e2934c5
File diff suppressed because it is too large
Load Diff
|
@ -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) {
|
||||||
|
|
|
@ -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"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue