Skip to content

E
Element
Commit 22bd899a authored by baiyaaaaa's avatar baiyaaaaa
Browse files
Options

update form

parent 37ebca5b
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 294 additions and 237 deletions
examples/docs/form.md
View file @ 22bd899a
This diff is collapsed.
packages/checkbox/src/checkbox-group.vue
View file @ 22bd899a
......@@ -7,16 +7,13 @@
mixins: [emitter],
props: {
value: {
default: '',
required: true
}
value: {}
},
watch: {
value(value) {
this.$emit('change', value);
this.dispatch('form-item', 'el.form.change', value);
this.dispatch('form-item', 'el.form.change', [value]);
}
}
};
......
packages/form/package.json
View file @ 22bd899a
......@@ -12,6 +12,6 @@
"author": "haiping.zeng<haiping.zeng@ele.me>",
"license": "MIT",
"dependencies": {
"async-validator": "^1.6.3"
"async-validator": "^1.6.5"
}
}
packages/form/src/form-item.vue
View file @ 22bd899a
......@@ -2,14 +2,16 @@
<div class="el-form-item" :class="{
'is-error': error !== '',
'is-validating': validating,
'is-required': required
'is-required': isRequired || required
}">
<label class="el-form-item__label" v-bind:style="labelStyle" v-if="label">
{{label + form.labelSuffix}}
</label>
<div class="el-form-item__content" v-bind:style="contentStyle">
<slot></slot>
<div class="el-form-item__error" v-if="error !== ''" transition="md-fade-bottom">{{error}}</div>
<transition name="md-fade-bottom">
<div class="el-form-item__error" v-if="error !== ''">{{error}}</div>
</transition>
</div>
</div>
</template>
......@@ -50,24 +52,23 @@
},
form() {
var parent = this.$parent;
while (parent.$el.tagName !== 'FORM') {
while (parent.$options.componentName !== 'form') {
parent = parent.$parent;
}
return parent;
},
fieldValue() {
var model = this.form.model;
if (!model) { return; }
if (!model[this.prop]) {
let temp = this.prop.split(':');
return model[temp[0]][temp[1]];
} else {
return model[this.prop];
fieldValue: {
cache: false,
get() {
var model = this.form.model;
if (!model || !this.prop) { return; }
var temp = this.prop.split(':');
return temp.length > 1
? model[temp[0]][temp[1]]
: model[this.prop];
}
},
fieldRule() {
return this.rules || (this.form.rules ? this.form.rules[this.prop] : null);
}
},
data() {
......@@ -76,7 +77,8 @@
error: '',
validateDisabled: false,
validating: false,
validator: {}
validator: {},
isRequired: false
};
},
methods: {
......@@ -98,7 +100,7 @@
model[this.prop] = this.fieldValue;
validator.validate(model, { first: true, firstFields: true }, (errors, fields) => {
validator.validate(model, { firstFields: true }, (errors, fields) => {
this.valid = !errors;
this.error = errors ? errors[0].message : '';
......@@ -111,7 +113,7 @@
this.error = '';
let model = this.form.model;
let value = model[this.prop];
let value = this.fieldValue;
if (Array.isArray(value) && value.length > 0) {
this.validateDisabled = true;
......@@ -124,60 +126,49 @@
model[this.prop] = 0;
}
},
getRules() {
if (!this.prop) { return []; }
var rules = this.rules || (this.form.rules ? this.form.rules[this.prop] : []);
return Array.isArray(rules) ? rules : [rules];
},
getFilteredRule(trigger) {
var rules = this.fieldRule;
if (!rules) { return null; }
if (!trigger) { return rules; }
if (Array.isArray(rules)) {
return rules.filter(rule => {
return !rule.trigger || rule.trigger.indexOf(trigger) !== -1;
});
}
var rules = this.getRules();
if (rules.trigger && rules.trigger.indexOf(trigger) === -1) {
return null;
} else {
return rules;
}
}
},
ready() {
var rules = this.fieldRule;
if (rules) {
if (Array.isArray(rules)) {
rules.every(rule => {
if (rule.required) {
this.required = true;
return false;
}
});
} else {
this.required = !!this.rules.required;
}
}
if (this.prop) {
this.dispatch('form', 'el.form.addField', this);
}
},
events: {
'el.form.blur'(value) {
return rules.filter(rule => {
return !rule.trigger || rule.trigger.indexOf(trigger) !== -1;
});
},
onFieldBlur() {
this.validate('blur');
},
'el.form.change'(value, useTrigger = true) {
onFieldChange() {
if (this.validateDisabled) {
this.validateDisabled = false;
return;
}
var trigger = useTrigger ? 'change' : '';
this.validate(trigger);
this.validate('change');
}
},
mounted() {
var rules = this.getRules();
rules.every(rule => {
if (rule.required) {
this.isRequired = true;
return false;
}
});
if (this.prop) {
this.dispatch('form', 'el.form.addField', [this]);
}
this.$on('el.form.blur', this.onFieldBlur);
this.$on('el.form.change', this.onFieldChange);
},
beforeDestroy() {
this.dispatch('form', 'el.form.removeField', this);
this.dispatch('form', 'el.form.removeField', [this]);
}
};
</script>
packages/form/src/form.vue
View file @ 22bd899a
......@@ -7,8 +7,6 @@
</form>
</template>
<script>
import AsyncValidator from 'async-validator';
export default {
name: 'ElForm',
......@@ -28,27 +26,21 @@
data() {
return {
fields: {},
fieldLength: 0,
validator: {}
fieldLength: 0
};
},
ready() {
if (this.rules) {
this.validator = new AsyncValidator(this.rules);
}
},
events: {
'el.form.addField'(field) {
created() {
this.$on('el.form.addField', (field) => {
this.fields[field.prop] = field;
this.fieldLength++;
},
'el.form.removeField'(field) {
});
this.$on('el.form.removeField', (field) => {
delete this.fields[field.prop];
this.fieldLength--;
}
});
},
methods: {
resetForm() {
resetFields() {
for (let prop in this.fields) {
let field = this.fields[prop];
field.resetField();
......
packages/input/src/input.vue
View file @ 22bd899a
......@@ -25,7 +25,7 @@
>
</template>
<!-- 写成垂直的方式会导致 placeholder 失效, 蜜汁bug -->
<textarea v-else v-model="currentValue" class="el-textarea__inner" :name="name" :placeholder="placeholder" :disabled="disabled" :readonly="readonly" @focus="$emit('onfocus', val)" @blur="handleBlur"></textarea>
<textarea v-else v-model="currentValue" class="el-textarea__inner" :name="name" :placeholder="placeholder" :disabled="disabled" :readonly="readonly" @focus="$emit('onfocus', currentValue)" @blur="handleBlur"></textarea>
</div>
</template>
<script>
......@@ -37,7 +37,7 @@
mixins: [emitter],
props: {
value: {},
value: [String, Number],
placeholder: {
type: String,
default: ''
......@@ -116,7 +116,7 @@
'currentValue'(val) {
this.$emit('input', val);
this.$emit('onchange', val);
this.dispatch('form-item', 'el.form.change', val);
this.dispatch('form-item', 'el.form.change', [val]);
}
}
};
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment