diff --git a/components/vc-form/src/createBaseForm.jsx b/components/vc-form/src/createBaseForm.jsx index 23c60d38e..4384cb712 100644 --- a/components/vc-form/src/createBaseForm.jsx +++ b/components/vc-form/src/createBaseForm.jsx @@ -18,7 +18,7 @@ import { flattenArray, } from './utils' -const DEFAULT_TRIGGER = 'onChange' +const DEFAULT_TRIGGER = 'change' function createBaseForm (option = {}, mixins = []) { const { @@ -94,7 +94,7 @@ function createBaseForm (option = {}, mixins = []) { const valuesAllSet = {} valuesAll[name] = value Object.keys(valuesAll).forEach(key => set(valuesAllSet, key, valuesAll[key])) - onValuesChange(this.props, set({}, name, value), valuesAllSet) + onValuesChange(this.$props, set({}, name, value), valuesAllSet) } const field = this.fieldsStore.getField(name) return ({ name, field: { ...field, value, touched: true }, fieldMeta }) @@ -148,7 +148,7 @@ function createBaseForm (option = {}, mixins = []) { }, getFieldDecorator (name, fieldOption) { - const { ref, ...restProps } = this.getFieldProps(name, fieldOption) + const { directives, props } = this.getFieldProps(name, fieldOption) return (fieldElem) => { const fieldMeta = this.fieldsStore.getFieldMeta(name) const originalProps = fieldElem.props @@ -173,10 +173,10 @@ function createBaseForm (option = {}, mixins = []) { fieldMeta.ref = fieldElem.ref return cloneElement(fieldElem, { props: { - ...restProps, + ...props, ...this.fieldsStore.getFieldValuePropValue(fieldMeta), }, - ref, + directives, }) } }, @@ -220,25 +220,10 @@ function createBaseForm (option = {}, mixins = []) { const inputProps = { ...this.fieldsStore.getFieldValuePropValue(fieldOption), - ref: name, + // ref: name, + on: {}, } const saveRef = this.getCacheBind(name, `${name}__ref`, this.saveRef) - this.$nextTick(() => { - if (this.instances[name] !== this.$refs[name]) { - this.$refs[name].destroyed = () => { - this.$refs[name].destroyed() - // after destroy, delete data - this.clearedFieldMetaCache[name] = { - field: this.fieldsStore.getField(name), - meta: this.fieldsStore.getFieldMeta(name), - } - this.fieldsStore.clearField(name) - delete this.instances[name] - delete this.cachedBind[name] - } - } - saveRef(name, `${name}__ref`, this.$refs[name]) - }) if (fieldNameProp) { inputProps[fieldNameProp] = name } @@ -252,7 +237,7 @@ function createBaseForm (option = {}, mixins = []) { // make sure that the value will be collect if (trigger && validateTriggers.indexOf(trigger) === -1) { - inputProps[trigger] = this.getCacheBind(name, trigger, this.onCollect) + inputProps.on[trigger] = this.getCacheBind(name, trigger, this.onCollect) } const meta = { @@ -269,7 +254,14 @@ function createBaseForm (option = {}, mixins = []) { inputProps[fieldDataProp] = this.fieldsStore.getField(name) } - return inputProps + return { + props: inputProps, + directives: [ + { name: 'ant-form-item-ref-cal', value: (component) => { + saveRef(component) + } }, + ], + } }, getFieldInstance (name) { @@ -289,9 +281,12 @@ function createBaseForm (option = {}, mixins = []) { if (onFieldsChange) { const changedFields = Object.keys(fields) .reduce((acc, name) => set(acc, name, this.fieldsStore.getField(name)), {}) - onFieldsChange(this.props, changedFields, this.fieldsStore.getNestedAllFields()) + onFieldsChange(this.$props, changedFields, this.fieldsStore.getNestedAllFields()) } - this.forceUpdate(callback) + this.$forceUpdate() + this.$nextTick(() => { + callback && callback() + }) }, resetFields (ns) { @@ -330,11 +325,22 @@ function createBaseForm (option = {}, mixins = []) { this.setFields(newFields, callback) if (onValuesChange) { const allValues = this.fieldsStore.getAllValues() - onValuesChange(this.props, changedValues, allValues) + onValuesChange(this.$props, changedValues, allValues) } }, saveRef (name, _, component) { + if (!component) { + // after destroy, delete data + this.clearedFieldMetaCache[name] = { + field: this.fieldsStore.getField(name), + meta: this.fieldsStore.getFieldMeta(name), + } + this.fieldsStore.clearField(name) + delete this.instances[name] + delete this.cachedBind[name] + return + } this.recoverClearedField(name) const fieldMeta = this.fieldsStore.getFieldMeta(name) if (fieldMeta) { diff --git a/components/vc-form/src/index.jsx b/components/vc-form/src/index.jsx index ad1f4f338..d54a498b7 100644 --- a/components/vc-form/src/index.jsx +++ b/components/vc-form/src/index.jsx @@ -2,5 +2,15 @@ import createForm from './createForm' import createFormField from './createFormField' import formShape from './propTypes' +import Vue from 'vue' + +Vue.directive('ant-form-item-ref-cal', { + inserted: function (el, binding, vnode) { + binding.value(vnode) + }, + unbind: function (el, binding, vnode) { + binding.value() + }, +}) export { createForm, createFormField, formShape } diff --git a/package-lock.json b/package-lock.json index d4b851fe9..884880a88 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "vue-antd-ui", - "version": "0.4.0", + "version": "0.4.3", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -620,6 +620,14 @@ "integrity": "sha1-GdOGodntxufByF04iu28xW0zYC0=", "dev": true }, + "async-validator": { + "version": "1.8.2", + "resolved": "http://registry.npm.taobao.org/async-validator/download/async-validator-1.8.2.tgz", + "integrity": "sha1-t3WXIm6WJC+NUxwNRq4pX2JCK6Q=", + "requires": { + "babel-runtime": "6.26.0" + } + }, "asynckit": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", @@ -1044,6 +1052,12 @@ "integrity": "sha1-ytnK0RkbWtY0vzCuCHI5HgZHvpU=", "dev": true }, + "babel-plugin-syntax-class-properties": { + "version": "6.13.0", + "resolved": "http://registry.npm.taobao.org/babel-plugin-syntax-class-properties/download/babel-plugin-syntax-class-properties-6.13.0.tgz", + "integrity": "sha1-1+sjt5oxf4VDlixQW4J8fWysJ94=", + "dev": true + }, "babel-plugin-syntax-decorators": { "version": "6.13.0", "resolved": "https://registry.npmjs.org/babel-plugin-syntax-decorators/-/babel-plugin-syntax-decorators-6.13.0.tgz", @@ -1091,6 +1105,18 @@ "babel-runtime": "6.26.0" } }, + "babel-plugin-transform-class-properties": { + "version": "6.24.1", + "resolved": "http://registry.npm.taobao.org/babel-plugin-transform-class-properties/download/babel-plugin-transform-class-properties-6.24.1.tgz", + "integrity": "sha1-anl2PqYdM9NvN7YRqp3vgagbRqw=", + "dev": true, + "requires": { + "babel-helper-function-name": "6.24.1", + "babel-plugin-syntax-class-properties": "6.13.0", + "babel-runtime": "6.26.0", + "babel-template": "6.26.0" + } + }, "babel-plugin-transform-decorators": { "version": "6.24.1", "resolved": "https://registry.npmjs.org/babel-plugin-transform-decorators/-/babel-plugin-transform-decorators-6.24.1.tgz", diff --git a/package.json b/package.json index 404d4bed9..cb1430ec5 100644 --- a/package.json +++ b/package.json @@ -61,6 +61,7 @@ "babel-plugin-istanbul": "^4.1.1", "babel-plugin-syntax-dynamic-import": "^6.18.0", "babel-plugin-syntax-jsx": "^6.18.0", + "babel-plugin-transform-class-properties": "^6.24.1", "babel-plugin-transform-decorators": "^6.24.1", "babel-plugin-transform-decorators-legacy": "^1.3.4", "babel-plugin-transform-es3-member-expression-literals": "^6.22.0", @@ -81,8 +82,8 @@ "css-loader": "^0.28.7", "deep-assign": "^2.0.0", "eslint": "^4.7.2", - "eslint-plugin-vue": "^3.13.0", "eslint-plugin-html": "^3.2.2", + "eslint-plugin-vue": "^3.13.0", "eslint-plugin-vue-libs": "^1.2.1", "extract-text-webpack-plugin": "^3.0.2", "fetch-jsonp": "^1.1.3",