vxe-pc-ui 4.1.19 → 4.1.21

package/es/icon-picker/src/icon-picker.js

@@ -9,7 +9,10 @@ export default defineComponent({
         modelValue: String,
         placeholder: String,
         clearable: Boolean,
-        size: { type: String, default: () => getConfig().iconPicker.size || getConfig().size },
+        size: {
+            type: String,
+            default: () => getConfig().iconPicker.size || getConfig().size
+        },
         className: [String, Function],
         popupClassName: [String, Function],
         showIconTitle: {
@@ -40,6 +43,7 @@ export default defineComponent({
     setup(props, context) {
         const { emit } = context;
         const $xeModal = inject('$xeModal', null);
+        const $xeDrawer = inject('$xeDrawer', null);
         const $xeTable = inject('$xeTable', null);
         const $xeForm = inject('$xeForm', null);
         const formItemInfo = inject('xeFormItemInfo', null);
@@ -47,7 +51,7 @@ export default defineComponent({
         const { computeSize } = useSize(props);
         const reactData = reactive({
             initialized: false,
-            selectIcon: '',
+            selectIcon: `${props.modelValue || ''}`,
             panelIndex: 0,
             panelStyle: {},
             panelPlacement: null,
@@ -55,6 +59,9 @@ export default defineComponent({
             isAniVisible: false,
             isActivated: false
         });
+        const internalData = {
+            hpTimeout: undefined
+        };
         const refElem = ref();
         const refInput = ref();
         const refOptionPanel = ref();
@@ -96,7 +103,7 @@ export default defineComponent({
                 if (XEUtils.isBoolean(globalTransfer)) {
                     return globalTransfer;
                 }
-                if ($xeTable || $xeModal || $xeForm) {
+                if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
                     return true;
                 }
             }
@@ -207,11 +214,14 @@ export default defineComponent({
                 }
             });
         };
-        let hidePanelTimeout;
         const showOptionPanel = () => {
+            const { hpTimeout } = internalData;
             const isDisabled = computeIsDisabled.value;
             if (!isDisabled) {
-                clearTimeout(hidePanelTimeout);
+                if (hpTimeout) {
+                    clearTimeout(hpTimeout);
+                    internalData.hpTimeout = undefined;
+                }
                 if (!reactData.initialized) {
                     reactData.initialized = true;
                 }
@@ -226,7 +236,7 @@ export default defineComponent({
         };
         const hideOptionPanel = () => {
             reactData.visiblePanel = false;
-            hidePanelTimeout = window.setTimeout(() => {
+            internalData.hpTimeout = window.setTimeout(() => {
                 reactData.isAniVisible = false;
             }, 350);
         };
@@ -351,10 +361,11 @@ export default defineComponent({
         const handleGlobalBlurEvent = () => {
             hideOptionPanel();
         };
+        const dispatchEvent = (type, params, evnt) => {
+            emit(type, createEvent(evnt, { $iconPicker: $xeIconPicker }, params));
+        };
         iconPickerMethods = {
-            dispatchEvent(type, params, evnt) {
-                emit(type, createEvent(evnt, { $iconPicker: $xeIconPicker }, params));
-            },
+            dispatchEvent,
             isPanelVisible() {
                 return reactData.visiblePanel;
             },
@@ -519,13 +530,14 @@ export default defineComponent({
                         initialized
                             ? h('div', {
                                 class: 'vxe-ico-picker--panel-wrapper'
-                            }, renderIconWrapper())
+                            }, [
+                                renderIconWrapper()
+                            ])
                             : createCommentVNode()
                     ])
                 ])
             ]);
         };
-        $xeIconPicker.renderVN = renderVN;
         watch(() => props.modelValue, (val) => {
             reactData.selectIcon = `${val || ''}`;
         });
@@ -542,6 +554,7 @@ export default defineComponent({
             globalEvents.off($xeIconPicker, 'blur');
         });
         provide('$xeIconPicker', $xeIconPicker);
+        $xeIconPicker.renderVN = renderVN;
         return $xeIconPicker;
     },
     render() {

package/es/image/src/group.js

@@ -103,6 +103,9 @@ export default defineComponent({
         };
         $xeImageGroup.renderVN = renderVN;
         provide('$xeImageGroup', $xeImageGroup);
-        return renderVN;
+        return $xeImageGroup;
+    },
+    render() {
+        return this.renderVN();
     }
 });

package/es/image/src/preview.js

@@ -582,7 +582,6 @@ export default defineComponent({
                 renderBtnWrapper()
             ]);
         };
-        $xeImagePreview.renderVN = renderVN;
         watch(() => props.modelValue, val => {
             reactData.activeIndex = val;
             resetStyle();
@@ -600,6 +599,7 @@ export default defineComponent({
             globalEvents.off($xeImagePreview, 'keydown');
         });
         provide('$xeImagePreview', $xeImagePreview);
+        $xeImagePreview.renderVN = renderVN;
         return renderVN;
     }
 });

package/es/input/src/input.js

@@ -10,10 +10,19 @@ export default defineComponent({
     name: 'VxeInput',
     props: {
         modelValue: [String, Number, Date],
-        immediate: { type: Boolean, default: true },
+        immediate: {
+            type: Boolean,
+            default: true
+        },
         name: String,
-        type: { type: String, default: 'text' },
-        clearable: { type: Boolean, default: () => getConfig().input.clearable },
+        type: {
+            type: String,
+            default: 'text'
+        },
+        clearable: {
+            type: Boolean,
+            default: () => getConfig().input.clearable
+        },
         readonly: {
             type: Boolean,
             default: null
@@ -24,39 +33,81 @@ export default defineComponent({
         },
         placeholder: String,
         maxLength: [String, Number],
-        autoComplete: { type: String, default: 'off' },
+        autoComplete: {
+            type: String,
+            default: 'off'
+        },
         align: String,
         form: String,
         className: String,
-        size: { type: String, default: () => getConfig().input.size || getConfig().size },
+        size: {
+            type: String,
+            default: () => getConfig().input.size || getConfig().size
+        },
         multiple: Boolean,
         // text
         showWordCount: Boolean,
         countMethod: Function,
         // number、integer、float
-        min: { type: [String, Number], default: null },
-        max: { type: [String, Number], default: null },
+        min: {
+            type: [String, Number],
+            default: null
+        },
+        max: {
+            type: [String, Number],
+            default: null
+        },
         step: [String, Number],
-        exponential: { type: Boolean, default: () => getConfig().input.exponential },
+        exponential: {
+            type: Boolean,
+            default: () => getConfig().input.exponential
+        },
         // number、integer、float、password
-        controls: { type: Boolean, default: () => getConfig().input.controls },
+        controls: {
+            type: Boolean,
+            default: () => getConfig().input.controls
+        },
         // float
-        digits: { type: [String, Number], default: () => getConfig().input.digits },
+        digits: {
+            type: [String, Number],
+            default: () => getConfig().input.digits
+        },
         // date、week、month、quarter、year
-        startDate: { type: [String, Number, Date], default: () => getConfig().input.startDate },
-        endDate: { type: [String, Number, Date], default: () => getConfig().input.endDate },
+        startDate: {
+            type: [String, Number, Date],
+            default: () => getConfig().input.startDate
+        },
+        endDate: {
+            type: [String, Number, Date],
+            default: () => getConfig().input.endDate
+        },
         minDate: [String, Number, Date],
         maxDate: [String, Number, Date],
         // 已废弃 startWeek，被 startDay 替换
         startWeek: Number,
-        startDay: { type: [String, Number], default: () => getConfig().input.startDay },
+        startDay: {
+            type: [String, Number],
+            default: () => getConfig().input.startDay
+        },
         labelFormat: String,
         valueFormat: String,
-        editable: { type: Boolean, default: true },
-        festivalMethod: { type: Function, default: () => getConfig().input.festivalMethod },
-        disabledMethod: { type: Function, default: () => getConfig().input.disabledMethod },
+        editable: {
+            type: Boolean,
+            default: true
+        },
+        festivalMethod: {
+            type: Function,
+            default: () => getConfig().input.festivalMethod
+        },
+        disabledMethod: {
+            type: Function,
+            default: () => getConfig().input.disabledMethod
+        },
         // week
-        selectDay: { type: [String, Number], default: () => getConfig().input.selectDay },
+        selectDay: {
+            type: [String, Number],
+            default: () => getConfig().input.selectDay
+        },
         prefixIcon: String,
         suffixIcon: String,
         placement: String,
@@ -93,21 +144,19 @@ export default defineComponent({
     setup(props, context) {
         const { slots, emit } = context;
         const $xeModal = inject('$xeModal', null);
+        const $xeDrawer = inject('$xeDrawer', null);
         const $xeTable = inject('$xeTable', null);
         const $xeForm = inject('$xeForm', null);
         const formItemInfo = inject('xeFormItemInfo', null);
         const xID = XEUtils.uniqueId();
         const { computeSize } = useSize(props);
-        const yearSize = 12;
-        const monthSize = 20;
-        const quarterSize = 8;
         const reactData = reactive({
             initialized: false,
             panelIndex: 0,
             showPwd: false,
             visiblePanel: false,
             isAniVisible: false,
-            panelStyle: null,
+            panelStyle: {},
             panelPlacement: '',
             isActivated: false,
             inputValue: props.modelValue,
@@ -118,6 +167,13 @@ export default defineComponent({
             selectMonth: null,
             currentDate: null
         });
+        const internalData = {
+            yearSize: 12,
+            monthSize: 20,
+            quarterSize: 8,
+            hpTimeout: undefined,
+            dnTimeout: undefined
+        };
         const refElem = ref();
         const refInputTarget = ref();
         const refInputPanel = ref();
@@ -132,6 +188,7 @@ export default defineComponent({
             props,
             context,
             reactData,
+            internalData,
             getRefMaps: () => refMaps
         };
         let inputMethods = {};
@@ -149,7 +206,7 @@ export default defineComponent({
                 if (XEUtils.isBoolean(globalTransfer)) {
                     return globalTransfer;
                 }
-                if ($xeTable || $xeModal || $xeForm) {
+                if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
                     return true;
                 }
             }
@@ -324,10 +381,11 @@ export default defineComponent({
             if (isDatePickerType) {
                 return labelFormat || dateValueFormat || getI18n(`vxe.input.date.labelFormat.${props.type}`);
             }
-            return null;
+            return '';
         });
         const computeYearList = computed(() => {
             const { selectMonth, currentDate } = reactData;
+            const { yearSize } = internalData;
             const years = [];
             if (selectMonth && currentDate) {
                 const currFullYear = currentDate.getFullYear();
@@ -421,6 +479,7 @@ export default defineComponent({
         });
         const computeQuarterList = computed(() => {
             const { selectMonth, currentDate } = reactData;
+            const { quarterSize } = internalData;
             const quarters = [];
             if (selectMonth && currentDate) {
                 const currFullYear = currentDate.getFullYear();
@@ -450,6 +509,7 @@ export default defineComponent({
         });
         const computeMonthList = computed(() => {
             const { selectMonth, currentDate } = reactData;
+            const { monthSize } = internalData;
             const months = [];
             if (selectMonth && currentDate) {
                 const currFullYear = currentDate.getFullYear();
@@ -594,12 +654,6 @@ export default defineComponent({
             }
             return getI18n('vxe.base.pleaseInput');
         });
-        const computeInpMaxlength = computed(() => {
-            const isNumType = computeIsNumType.value;
-            const inpMaxLength = computeInpMaxLength.value;
-            // 数值最大长度限制 16 位，包含小数
-            return isNumType && !XEUtils.toNumber(inpMaxLength) ? 16 : inpMaxLength;
-        });
         const computeInpImmediate = computed(() => {
             const { type, immediate } = props;
             return immediate || !(type === 'text' || type === 'number' || type === 'integer' || type === 'float');
@@ -637,19 +691,19 @@ export default defineComponent({
         });
         const getNumberValue = (val) => {
             const { type, exponential } = props;
-            const inpMaxlength = computeInpMaxlength.value;
+            const inpMaxLength = computeInpMaxLength.value;
             const digitsValue = computeDigitsValue.value;
             const restVal = (type === 'float' ? toFloatValueFixed(val, digitsValue) : XEUtils.toValueString(val));
             if (exponential && (val === restVal || XEUtils.toValueString(val).toLowerCase() === XEUtils.toNumber(restVal).toExponential())) {
                 return val;
             }
-            return restVal.slice(0, inpMaxlength);
+            return restVal.slice(0, inpMaxLength);
         };
         const triggerEvent = (evnt) => {
             const { inputValue } = reactData;
             inputMethods.dispatchEvent(evnt.type, { value: inputValue }, evnt);
         };
-        const emitModel = (value, evnt) => {
+        const handleChange = (value, evnt) => {
             reactData.inputValue = value;
             emit('update:modelValue', value);
             inputMethods.dispatchEvent('input', { value }, evnt);
@@ -667,7 +721,7 @@ export default defineComponent({
             reactData.inputValue = value;
             if (!isDatePickerType) {
                 if (inpImmediate) {
-                    emitModel(value, evnt);
+                    handleChange(value, evnt);
                 }
                 else {
                     inputMethods.dispatchEvent('input', { value }, evnt);
@@ -700,11 +754,10 @@ export default defineComponent({
                 inputMethods.dispatchEvent('prefix-click', { value: inputValue }, evnt);
             }
         };
-        let hidePanelTimeout;
         const hidePanel = () => {
             return new Promise(resolve => {
                 reactData.visiblePanel = false;
-                hidePanelTimeout = window.setTimeout(() => {
+                internalData.hpTimeout = window.setTimeout(() => {
                     reactData.isAniVisible = false;
                     resolve();
                 }, 350);
@@ -720,7 +773,7 @@ export default defineComponent({
             if (isNumType || ['text', 'search', 'password'].indexOf(type) > -1) {
                 focus();
             }
-            emitModel('', evnt);
+            handleChange('', evnt);
             inputMethods.dispatchEvent('clear', { value }, evnt);
         };
         const clickSuffixEvent = (evnt) => {
@@ -788,7 +841,7 @@ export default defineComponent({
                 if (inputValue) {
                     const validValue = toFloatValueFixed(inputValue, digitsValue);
                     if (inputValue !== validValue) {
-                        emitModel(validValue, { type: 'init' });
+                        handleChange(validValue, { type: 'init' });
                     }
                 }
             }
@@ -847,22 +900,22 @@ export default defineComponent({
                             datetimeRest.push(item);
                         }
                     });
-                    emitModel(datetimeRest.map(date => XEUtils.toDateString(date, dateValueFormat)).join(','), { type: 'update' });
+                    handleChange(datetimeRest.map(date => XEUtils.toDateString(date, dateValueFormat)).join(','), { type: 'update' });
                 }
                 else {
                     // 如果是日期类型
                     if (dateMultipleValue.some(val => XEUtils.isEqual(val, inpVal))) {
-                        emitModel(dateMultipleValue.filter(val => !XEUtils.isEqual(val, inpVal)).join(','), { type: 'update' });
+                        handleChange(dateMultipleValue.filter(val => !XEUtils.isEqual(val, inpVal)).join(','), { type: 'update' });
                     }
                     else {
-                        emitModel(dateMultipleValue.concat([inpVal]).join(','), { type: 'update' });
+                        handleChange(dateMultipleValue.concat([inpVal]).join(','), { type: 'update' });
                     }
                 }
             }
             else {
                 // 如果为单选
                 if (!XEUtils.isEqual(modelValue, inpVal)) {
-                    emitModel(inpVal, { type: 'update' });
+                    handleChange(inpVal, { type: 'update' });
                 }
             }
         };
@@ -889,7 +942,7 @@ export default defineComponent({
                                 inpNumVal = inpStringVal;
                             }
                         }
-                        emitModel(getNumberValue(inpNumVal), { type: 'check' });
+                        handleChange(getNumberValue(inpNumVal), { type: 'check' });
                     }
                 }
                 else if (isDatePickerType) {
@@ -899,7 +952,7 @@ export default defineComponent({
                             if (type === 'time') {
                                 inpDateVal = XEUtils.toDateString(inpDateVal, dateLabelFormat);
                                 if (inputValue !== inpDateVal) {
-                                    emitModel(inpDateVal, { type: 'check' });
+                                    handleChange(inpDateVal, { type: 'check' });
                                 }
                                 reactData.inputValue = inpDateVal;
                             }
@@ -929,7 +982,7 @@ export default defineComponent({
                         }
                     }
                     else {
-                        emitModel('', { type: 'check' });
+                        handleChange('', { type: 'check' });
                     }
                 }
             }
@@ -938,7 +991,7 @@ export default defineComponent({
             const { inputValue } = reactData;
             const inpImmediate = computeInpImmediate.value;
             if (!inpImmediate) {
-                emitModel(inputValue, evnt);
+                handleChange(inputValue, evnt);
             }
             afterCheckValue();
             if (!reactData.visiblePanel) {
@@ -981,19 +1034,18 @@ export default defineComponent({
             }
             emitInputEvent(getNumberValue(restNum), evnt);
         };
-        let downbumTimeout;
         const numberNextEvent = (evnt) => {
             const isDisabled = computeIsDisabled.value;
             const isReadonly = computeIsReadonly.value;
             const isDisabledSubtractNumber = computeIsDisabledSubtractNumber.value;
-            clearTimeout(downbumTimeout);
+            numberStopDown();
             if (!isDisabled && !isReadonly && !isDisabledSubtractNumber) {
                 numberChange(false, evnt);
             }
             inputMethods.dispatchEvent('next-number', {}, evnt);
         };
         const numberDownNextEvent = (evnt) => {
-            downbumTimeout = window.setTimeout(() => {
+            internalData.dnTimeout = window.setTimeout(() => {
                 numberNextEvent(evnt);
                 numberDownNextEvent(evnt);
             }, 60);
@@ -1002,7 +1054,7 @@ export default defineComponent({
             const isDisabled = computeIsDisabled.value;
             const isReadonly = computeIsReadonly.value;
             const isDisabledAddNumber = computeIsDisabledAddNumber.value;
-            clearTimeout(downbumTimeout);
+            numberStopDown();
             if (!isDisabled && !isReadonly && !isDisabledAddNumber) {
                 numberChange(true, evnt);
             }
@@ -1051,10 +1103,14 @@ export default defineComponent({
         };
         // 数值
         const numberStopDown = () => {
-            clearTimeout(downbumTimeout);
+            const { dnTimeout } = internalData;
+            if (dnTimeout) {
+                clearTimeout(dnTimeout);
+                internalData.dnTimeout = undefined;
+            }
         };
         const numberDownPrevEvent = (evnt) => {
-            downbumTimeout = window.setTimeout(() => {
+            internalData.dnTimeout = window.setTimeout(() => {
                 numberPrevEvent(evnt);
                 numberDownPrevEvent(evnt);
             }, 60);
@@ -1069,7 +1125,7 @@ export default defineComponent({
                 else {
                     numberNextEvent(evnt);
                 }
-                downbumTimeout = window.setTimeout(() => {
+                internalData.dnTimeout = window.setTimeout(() => {
                     if (isPrevNumber) {
                         numberDownPrevEvent(evnt);
                     }
@@ -1117,6 +1173,7 @@ export default defineComponent({
         const datePrevEvent = (evnt) => {
             const { type } = props;
             const { datePanelType, selectMonth } = reactData;
+            const { yearSize } = internalData;
             const isDisabledPrevDateBtn = computeIsDisabledPrevDateBtn.value;
             if (!isDisabledPrevDateBtn) {
                 if (type === 'year') {
@@ -1155,6 +1212,7 @@ export default defineComponent({
         const dateNextEvent = (evnt) => {
             const { type } = props;
             const { datePanelType, selectMonth } = reactData;
+            const { yearSize } = internalData;
             const isDisabledNextDateBtn = computeIsDisabledNextDateBtn.value;
             if (!isDisabledNextDateBtn) {
                 if (type === 'year') {
@@ -1337,11 +1395,11 @@ export default defineComponent({
                                 datetimeRest.push(item);
                             }
                         });
-                        emitModel(datetimeRest.map(date => XEUtils.toDateString(date, dateValueFormat)).join(','), { type: 'update' });
+                        handleChange(datetimeRest.map(date => XEUtils.toDateString(date, dateValueFormat)).join(','), { type: 'update' });
                     }
                     else {
                         // 如果是日期类型
-                        emitModel(dateMultipleValue.join(','), { type: 'update' });
+                        handleChange(dateMultipleValue.join(','), { type: 'update' });
                     }
                 }
                 else {
@@ -1468,7 +1526,9 @@ export default defineComponent({
                 reactData.datetimePanelValue = reactData.datePanelValue || XEUtils.getWhatDay(Date.now(), 0, 'first');
                 nextTick(() => {
                     const timeBodyElem = refInputTimeBody.value;
-                    XEUtils.arrayEach(timeBodyElem.querySelectorAll('li.is--selected'), updateTimePos);
+                    XEUtils.arrayEach(timeBodyElem.querySelectorAll('li.is--selected'), (elem) => {
+                        updateTimePos(elem);
+                    });
                 });
             }
         };
@@ -1556,13 +1616,17 @@ export default defineComponent({
         };
         const showPanel = () => {
             const { visiblePanel } = reactData;
+            const { hpTimeout } = internalData;
             const isDisabled = computeIsDisabled.value;
             const isDatePickerType = computeIsDatePickerType.value;
             if (!isDisabled && !visiblePanel) {
                 if (!reactData.initialized) {
                     reactData.initialized = true;
                 }
-                clearTimeout(hidePanelTimeout);
+                if (hpTimeout) {
+                    clearTimeout(hpTimeout);
+                    internalData.hpTimeout = undefined;
+                }
                 reactData.isActivated = true;
                 reactData.isAniVisible = true;
                 if (isDatePickerType) {
@@ -1721,13 +1785,13 @@ export default defineComponent({
                             }]
                     }, extraItem && extraItem.label
                         ? [
-                            h('span', label),
+                            h('span', `${label || ''}`),
                             h('span', {
                                 class: ['vxe-input--date-label--extra', extraItem.important ? 'is-important' : '', extraItem.className],
                                 style: extraItem.style
                             }, XEUtils.toValueString(extraItem.label))
                         ]
-                        : label)
+                        : [`${label || ''}`])
                 ];
                 const festivalLabel = festivalItem.label;
                 if (festivalLabel) {
@@ -1748,7 +1812,7 @@ export default defineComponent({
                 }
                 return labels;
             }
-            return label;
+            return [`${label || ''}`];
         };
         const renderDateDayTable = () => {
             const { multiple } = props;
@@ -2298,10 +2362,11 @@ export default defineComponent({
             }
             return createCommentVNode();
         };
+        const dispatchEvent = (type, params, evnt) => {
+            emit(type, createEvent(evnt, { $input: $xeInput }, params));
+        };
         inputMethods = {
-            dispatchEvent(type, params, evnt) {
-                emit(type, createEvent(evnt, { $input: $xeInput }, params));
-            },
+            dispatchEvent,
             focus() {
                 const inputElem = refInputTarget.value;
                 reactData.isActivated = true;
@@ -2340,7 +2405,7 @@ export default defineComponent({
             const isCountError = computeIsCountError.value;
             const inputCount = computeInputCount.value;
             const inputReadonly = computeInputReadonly.value;
-            const inpMaxlength = computeInpMaxlength.value;
+            const inpMaxLength = computeInpMaxLength.value;
             const inputType = computeInputType.value;
             const inpPlaceholder = computeInpPlaceholder.value;
             const isClearable = computeIsClearable.value;
@@ -2374,7 +2439,7 @@ export default defineComponent({
                         name,
                         type: inputType,
                         placeholder: inpPlaceholder,
-                        maxlength: inpMaxlength,
+                        maxlength: inpMaxLength,
                         readonly: inputReadonly,
                         disabled: isDisabled,
                         autocomplete: autoComplete || autocomplete,
@@ -2397,11 +2462,10 @@ export default defineComponent({
                         class: ['vxe-input--count', {
                                 'is--error': isCountError
                             }]
-                    }, countMethod ? `${countMethod({ value: inputValue })}` : `${inputCount}${inpMaxlength ? `/${inpMaxlength}` : ''}`)
+                    }, countMethod ? `${countMethod({ value: inputValue })}` : `${inputCount}${inpMaxLength ? `/${inpMaxLength}` : ''}`)
                     : createCommentVNode()
             ]);
         };
-        $xeInput.renderVN = renderVN;
         watch(() => props.modelValue, (val) => {
             reactData.inputValue = val;
             changeValue();
@@ -2441,6 +2505,7 @@ export default defineComponent({
             globalEvents.off($xeInput, 'blur');
         });
         initValue();
+        $xeInput.renderVN = renderVN;
         return $xeInput;
     },
     render() {

package/es/layout-aside/src/layout-aside.js

@@ -91,8 +91,8 @@ export default defineComponent({
                 })
             ]);
         };
-        $xeLayoutAside.renderVN = renderVN;
         provide('$xeLayoutAside', $xeLayoutAside);
+        $xeLayoutAside.renderVN = renderVN;
         return $xeLayoutAside;
     },
     render() {