update Form
update Form
This commit is contained in:
梁灏
parent
103cd35313
commit
9f5e2c7e4d
5 changed files with 326 additions and 13 deletions
|
|
@ -1,13 +1,232 @@
|
|||
<template>
|
||||
|
||||
<div :class="classes">
|
||||
<label :class="[prefixCls + '-label']" :style="labelStyles" v-if="label">{{ label }}</label>
|
||||
<div :style="contentStyles">
|
||||
<slot></slot>
|
||||
<div transition="fade" :class="[prefixCls + '-error']" v-if="validateState === 'error'">{{ validateMessage }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// https://github.com/ElemeFE/element/blob/dev/packages/form/src/form-item.vue
|
||||
|
||||
import AsyncValidator from 'async-validator';
|
||||
|
||||
const prefixCls = 'ivu-form-item';
|
||||
|
||||
function getPropByPath(obj, path) {
|
||||
let tempObj = obj;
|
||||
path = path.replace(/\[(\w+)\]/g, '.$1');
|
||||
path = path.replace(/^\./, '');
|
||||
|
||||
let keyArr = path.split('.');
|
||||
let i = 0;
|
||||
|
||||
for (let len = keyArr.length; i < len - 1; ++i) {
|
||||
let key = keyArr[i];
|
||||
if (key in tempObj) {
|
||||
tempObj = tempObj[key];
|
||||
} else {
|
||||
throw new Error('[iView warn]: please transfer a valid prop path to form item!');
|
||||
}
|
||||
}
|
||||
return {
|
||||
o: tempObj,
|
||||
k: keyArr[i],
|
||||
v: tempObj[keyArr[i]]
|
||||
};
|
||||
}
|
||||
|
||||
export default {
|
||||
props: {},
|
||||
data () {
|
||||
return {};
|
||||
props: {
|
||||
label: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
labelWidth: {
|
||||
type: Number
|
||||
},
|
||||
prop: {
|
||||
type: String
|
||||
},
|
||||
required: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
rules: {
|
||||
type: [Object, Array]
|
||||
},
|
||||
error: {
|
||||
type: Boolean
|
||||
},
|
||||
validateStatus: {
|
||||
type: Boolean
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
methods: {}
|
||||
data () {
|
||||
return {
|
||||
prefixCls: prefixCls,
|
||||
isRequired: false,
|
||||
validateState: '',
|
||||
validateMessage: '',
|
||||
validateDisabled: false,
|
||||
validator: {}
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
error (val) {
|
||||
this.validateMessage = val;
|
||||
this.validateState = 'error';
|
||||
},
|
||||
validateStatus (val) {
|
||||
this.validateState = val;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return [
|
||||
`${prefixCls}`,
|
||||
{
|
||||
[`${prefixCls}-required`]: this.required || this.isRequired,
|
||||
[`${prefixCls}-error`]: this.validateState === 'error',
|
||||
[`${prefixCls}-validating`]: this.validateState === 'validating'
|
||||
}
|
||||
];
|
||||
},
|
||||
form() {
|
||||
let parent = this.$parent;
|
||||
while (parent.$options.name !== 'iForm') {
|
||||
parent = parent.$parent;
|
||||
}
|
||||
return parent;
|
||||
},
|
||||
fieldValue: {
|
||||
cache: false,
|
||||
get() {
|
||||
const model = this.form.model;
|
||||
if (!model || !this.prop) { return; }
|
||||
|
||||
let path = this.prop;
|
||||
if (path.indexOf(':') !== -1) {
|
||||
path = path.replace(/:/, '.');
|
||||
}
|
||||
|
||||
return getPropByPath(model, path).v;
|
||||
}
|
||||
},
|
||||
labelStyles () {
|
||||
let style = {};
|
||||
const labelWidth = this.labelWidth || this.form.labelWidth;
|
||||
if (labelWidth) {
|
||||
style.width = `${labelWidth}px`;
|
||||
}
|
||||
return style;
|
||||
},
|
||||
contentStyles () {
|
||||
let style = {};
|
||||
const labelWidth = this.labelWidth || this.form.labelWidth;
|
||||
if (labelWidth) {
|
||||
style.marginLeft = `${labelWidth}px`;
|
||||
}
|
||||
return style;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getRules () {
|
||||
let formRules = this.form.rules;
|
||||
const selfRules = this.rules;
|
||||
|
||||
formRules = formRules ? formRules[this.prop] : [];
|
||||
|
||||
return [].concat(selfRules || formRules || []);
|
||||
},
|
||||
getFilteredRule (trigger) {
|
||||
const rules = this.getRules();
|
||||
|
||||
return rules.filter(rule => !rule.trigger || rule.trigger.indexOf(trigger) !== -1);
|
||||
},
|
||||
validate(trigger, callback = function () {}) {
|
||||
const rules = this.getFilteredRule(trigger);
|
||||
if (!rules || rules.length === 0) {
|
||||
callback();
|
||||
return true;
|
||||
}
|
||||
|
||||
this.validateState = 'validating';
|
||||
|
||||
let descriptor = {};
|
||||
descriptor[this.prop] = rules;
|
||||
|
||||
const validator = new AsyncValidator(descriptor);
|
||||
let model = {};
|
||||
|
||||
model[this.prop] = this.fieldValue;
|
||||
|
||||
validator.validate(model, { firstFields: true }, (errors, fields) => {
|
||||
this.validateState = !errors ? 'success' : 'error';
|
||||
this.validateMessage = errors ? errors[0].message : '';
|
||||
|
||||
callback(this.validateMessage);
|
||||
});
|
||||
},
|
||||
resetField () {
|
||||
this.validateState = '';
|
||||
this.validateMessage = '';
|
||||
|
||||
let model = this.form.model;
|
||||
let value = this.fieldValue;
|
||||
let path = this.prop;
|
||||
if (path.indexOf(':') !== -1) {
|
||||
path = path.replace(/:/, '.');
|
||||
}
|
||||
|
||||
let prop = getPropByPath(model, path);
|
||||
|
||||
if (Array.isArray(value) && value.length > 0) {
|
||||
this.validateDisabled = true;
|
||||
prop.o[prop.k] = [];
|
||||
} else if (value) {
|
||||
this.validateDisabled = true;
|
||||
prop.o[prop.k] = this.initialValue;
|
||||
}
|
||||
},
|
||||
onFieldBlur() {
|
||||
this.validate('blur');
|
||||
},
|
||||
onFieldChange() {
|
||||
if (this.validateDisabled) {
|
||||
this.validateDisabled = false;
|
||||
return;
|
||||
}
|
||||
|
||||
this.validate('change');
|
||||
}
|
||||
},
|
||||
ready () {
|
||||
if (this.prop) {
|
||||
this.$dispatch('on-form-item-add', this);
|
||||
|
||||
Object.defineProperty(this, 'initialValue', {
|
||||
value: this.fieldValue
|
||||
});
|
||||
|
||||
let rules = this.getRules();
|
||||
|
||||
if (rules.length) {
|
||||
rules.every(rule => {
|
||||
if (rule.required) {
|
||||
this.isRequired = true;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
// todo
|
||||
// this.$on('el.form.blur', this.onFieldBlur);
|
||||
// this.$on('el.form.change', this.onFieldChange);
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.$dispatch('on-form-item-remove', this);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,13 +1,84 @@
|
|||
<template>
|
||||
|
||||
<form :class="classes"><slot></slot></form>
|
||||
</template>
|
||||
<script>
|
||||
// https://github.com/ElemeFE/element/blob/dev/packages/form/src/form.vue
|
||||
|
||||
const prefixCls = 'ivu-form';
|
||||
|
||||
export default {
|
||||
props: {},
|
||||
data () {
|
||||
return {};
|
||||
name: 'iForm',
|
||||
props: {
|
||||
model: {
|
||||
type: Object
|
||||
},
|
||||
rules: {
|
||||
type: Object
|
||||
},
|
||||
labelWidth: {
|
||||
type: Number
|
||||
},
|
||||
inline: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
methods: {}
|
||||
data () {
|
||||
return {
|
||||
fields: []
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return [
|
||||
`${prefixCls}`,
|
||||
{
|
||||
[`${prefixCls}-inline`]: this.inline
|
||||
}
|
||||
];
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
resetFields() {
|
||||
this.fields.forEach(field => {
|
||||
field.resetField();
|
||||
});
|
||||
},
|
||||
validate(callback) {
|
||||
let valid = true;
|
||||
let count = 0;
|
||||
this.fields.forEach(field => {
|
||||
field.validate('', errors => {
|
||||
if (errors) {
|
||||
valid = false;
|
||||
}
|
||||
if (typeof callback === 'function' && ++count === this.fields.length) {
|
||||
callback(valid);
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
validateField(prop, cb) {
|
||||
const field = this.fields.filter(field => field.prop === prop)[0];
|
||||
if (!field) { throw new Error('[iView warn]: must call validateField with valid prop string!'); }
|
||||
|
||||
field.validate('', cb);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
rules() {
|
||||
this.validate();
|
||||
}
|
||||
},
|
||||
events: {
|
||||
'on-form-item-add' (field) {
|
||||
if (field) this.fields.push(field);
|
||||
return false;
|
||||
},
|
||||
'on-form-item-remove' (field) {
|
||||
if (field.prop) this.fields.splice(this.fields.indexOf(field), 1);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -46,6 +46,7 @@ li + li {
|
|||
<li><a v-link="'/tabs'">Tabs</a></li>
|
||||
<li><a v-link="'/menu'">Menu</a></li>
|
||||
<li><a v-link="'/date'">Date</a></li>
|
||||
<li><a v-link="'/form'">Form</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<router-view></router-view>
|
||||
|
|
|
|||
|
|
@ -127,7 +127,12 @@ router.map({
|
|||
component: function (resolve) {
|
||||
require(['./routers/date.vue'], resolve);
|
||||
}
|
||||
}
|
||||
},
|
||||
'/form': {
|
||||
component: function (resolve) {
|
||||
require(['./routers/form.vue'], resolve);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
router.beforeEach(function () {
|
||||
|
|
|
|||
17
test/routers/form.vue
Normal file
17
test/routers/form.vue
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<template>
|
||||
<div>
|
||||
<i-form>
|
||||
|
||||
</i-form>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {},
|
||||
data () {
|
||||
return {}
|
||||
},
|
||||
computed: {},
|
||||
methods: {}
|
||||
};
|
||||
</script>
|
||||
Loading…
Add table
Reference in a new issue