vxe-pc-ui 4.17.1 → 4.17.2

package/dist/all.esm.js

@@ -81,7 +81,7 @@ function checkDynamic() {
 }
 
 const { log } = VxeUI;
-const uiVersion = `ui v${"4.17.1"}`;
+const uiVersion = `ui v${"4.17.2"}`;
 function createComponentLog(name) {
     const tableVersion = VxeUI.tableVersion ? `table v${VxeUI.tableVersion}` : '';
     const ganttVersion = VxeUI.ganttVersion ? `gantt v${VxeUI.ganttVersion}` : '';
@@ -95,7 +95,7 @@ function createComponentLog(name) {
 const warnLog$h = log.create('warn', uiVersion);
 log.create('error', uiVersion);
 
-const version = "4.17.1";
+const version = "4.17.2";
 VxeUI.uiVersion = version;
 VxeUI.dynamicApp = dynamicApp;
 function config(options) {
@@ -9253,7 +9253,6 @@ var VxeInputComponent = defineVxeComponent({
             internalData,
             getRefMaps: () => refMaps
         };
-        let inputMethods = {};
         const parseDate = (value, format) => {
             const { type } = props;
             if (type === 'time') {
@@ -9714,8 +9713,9 @@ var VxeInputComponent = defineVxeComponent({
             return minuteList;
         });
         const computeInputReadonly = computed(() => {
-            const { type, editable, multiple, readonly } = props;
-            return readonly || multiple || !editable || type === 'week' || type === 'quarter';
+            const { type, editable, multiple } = props;
+            const formReadonly = computeFormReadonly.value;
+            return formReadonly || multiple || !editable || type === 'week' || type === 'quarter';
         });
         const computeInputType = computed(() => {
             const { type } = props;
@@ -9777,6 +9777,10 @@ var VxeInputComponent = defineVxeComponent({
             }
             return false;
         });
+        const computeDomValue = computed(() => {
+            const { inputValue } = reactData;
+            return inputValue;
+        });
         const getNumberValue = (val) => {
             const { type, exponential } = props;
             const inpMaxLength = computeInpMaxLength.value;
@@ -9787,12 +9791,22 @@ var VxeInputComponent = defineVxeComponent({
             }
             return restVal.slice(0, inpMaxLength);
         };
+        const dispatchEvent = (type, params, evnt) => {
+            emit(type, createEvent(evnt, { $input: $xeInput }, params));
+        };
+        const updateDomValue = () => {
+            const domValue = computeDomValue.value;
+            const inputElem = refInputTarget.value;
+            if (inputElem) {
+                inputElem.value = XEUtils.eqNull(domValue) ? '' : ('' + domValue);
+            }
+        };
         const emitModel = (value) => {
             emit('update:modelValue', value);
         };
         const triggerEvent = (evnt) => {
             const { inputValue } = reactData;
-            inputMethods.dispatchEvent(evnt.type, { value: inputValue }, evnt);
+            dispatchEvent(evnt.type, { value: inputValue }, evnt);
         };
         const handleChange = (value, evnt) => {
             if (props.trim) {
@@ -9800,9 +9814,9 @@ var VxeInputComponent = defineVxeComponent({
             }
             reactData.inputValue = value;
             emitModel(value);
-            inputMethods.dispatchEvent('input', { value }, evnt);
+            dispatchEvent('input', { value }, evnt);
             if (XEUtils.toValueString(props.modelValue) !== value) {
-                inputMethods.dispatchEvent('change', { value }, evnt);
+                dispatchEvent('change', { value }, evnt);
                 if (!$xeSelect && !$xeTreeSelect) {
                     // 自动更新校验状态
                     if ($xeForm && formItemInfo) {
@@ -9820,7 +9834,7 @@ var VxeInputComponent = defineVxeComponent({
                     handleChange(value, evnt);
                 }
                 else {
-                    inputMethods.dispatchEvent('input', { value }, evnt);
+                    dispatchEvent('input', { value }, evnt);
                     if (!$xeSelect && !$xeTreeSelect) {
                         // 自动更新校验状态
                         if ($xeForm && formItemInfo) {
@@ -9840,7 +9854,7 @@ var VxeInputComponent = defineVxeComponent({
             if (!inpImmediate) {
                 triggerEvent(evnt);
             }
-            $xeInput.dispatchEvent('lazy-change', { value: reactData.inputValue }, evnt);
+            dispatchEvent('lazy-change', { value: reactData.inputValue }, evnt);
         };
         const blurEvent = (evnt) => {
             const { inputValue } = reactData;
@@ -9853,7 +9867,7 @@ var VxeInputComponent = defineVxeComponent({
             if (!reactData.visiblePanel) {
                 reactData.isActivated = false;
             }
-            inputMethods.dispatchEvent('blur', { value }, evnt);
+            dispatchEvent('blur', { value }, evnt);
             if (!$xeSelect && !$xeTreeSelect) {
                 // 自动更新校验状态
                 if ($xeForm && formItemInfo) {
@@ -9878,7 +9892,7 @@ var VxeInputComponent = defineVxeComponent({
             const isDisabled = computeIsDisabled.value;
             if (!isDisabled) {
                 const { inputValue } = reactData;
-                $xeInput.dispatchEvent('prefix-click', { value: inputValue }, evnt);
+                dispatchEvent('prefix-click', { value: inputValue }, evnt);
             }
         };
         const hidePanel = () => {
@@ -9903,14 +9917,14 @@ var VxeInputComponent = defineVxeComponent({
                 }
             }
             handleChange('', evnt);
-            $xeInput.dispatchEvent('clear', { value }, evnt);
-            $xeInput.dispatchEvent('lazy-change', { value }, evnt);
+            dispatchEvent('clear', { value }, evnt);
+            dispatchEvent('lazy-change', { value }, evnt);
         };
         const clickSuffixEvent = (evnt) => {
             const isDisabled = computeIsDisabled.value;
             if (!isDisabled) {
                 const { inputValue } = reactData;
-                $xeInput.dispatchEvent('suffix-click', { value: inputValue }, evnt);
+                dispatchEvent('suffix-click', { value: inputValue }, evnt);
             }
         };
         const dateParseValue = (value) => {
@@ -10143,12 +10157,12 @@ var VxeInputComponent = defineVxeComponent({
             if (!isDisabled && !inputReadonly) {
                 reactData.showPwd = !showPwd;
             }
-            inputMethods.dispatchEvent('toggle-visible', { visible: reactData.showPwd }, evnt);
+            dispatchEvent('toggle-visible', { visible: reactData.showPwd }, evnt);
         };
         // 密码
         // 搜索
         const searchEvent = (evnt) => {
-            inputMethods.dispatchEvent('search-click', {}, evnt);
+            dispatchEvent('search-click', {}, evnt);
         };
         // 搜索
         // 数值
@@ -10178,7 +10192,7 @@ var VxeInputComponent = defineVxeComponent({
             if (!isDisabled && !inputReadonly && !isDisabledSubtractNumber) {
                 numberChange(false, evnt);
             }
-            inputMethods.dispatchEvent('next-number', { value: reactData.inputValue }, evnt);
+            dispatchEvent('next-number', { value: reactData.inputValue }, evnt);
         };
         const numberDownNextEvent = (evnt) => {
             internalData.dnTimeout = setTimeout(() => {
@@ -10194,7 +10208,7 @@ var VxeInputComponent = defineVxeComponent({
             if (!isDisabled && !inputReadonly && !isDisabledAddNumber) {
                 numberChange(true, evnt);
             }
-            inputMethods.dispatchEvent('prev-number', { value: reactData.inputValue }, evnt);
+            dispatchEvent('prev-number', { value: reactData.inputValue }, evnt);
         };
         const numberKeydownEvent = (evnt) => {
             const isUpArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_UP);
@@ -10346,7 +10360,7 @@ var VxeInputComponent = defineVxeComponent({
                     }
                 }
                 reactData.selectMonth = viewDate;
-                inputMethods.dispatchEvent('date-prev', { viewType: datePanelType, viewDate, value, type }, evnt);
+                dispatchEvent('date-prev', { viewType: datePanelType, viewDate, value, type }, evnt);
             }
         };
         const dateTodayMonthEvent = (evnt) => {
@@ -10355,7 +10369,7 @@ var VxeInputComponent = defineVxeComponent({
                 dateChange(reactData.currentDate);
                 hidePanel();
             }
-            inputMethods.dispatchEvent('date-today', { type: props.type }, evnt);
+            dispatchEvent('date-today', { type: props.type }, evnt);
         };
         const dateNextEvent = (evnt) => {
             const { type } = props;
@@ -10388,7 +10402,7 @@ var VxeInputComponent = defineVxeComponent({
                     }
                 }
                 reactData.selectMonth = viewDate;
-                inputMethods.dispatchEvent('date-next', { viewType: datePanelType, viewDate, value, type }, evnt);
+                dispatchEvent('date-next', { viewType: datePanelType, viewDate, value, type }, evnt);
             }
         };
         const isDateDisabled = (item) => {
@@ -10938,6 +10952,31 @@ var VxeInputComponent = defineVxeComponent({
                 }
             }
         };
+        const inputMethods = {
+            dispatchEvent,
+            focus() {
+                const inputElem = refInputTarget.value;
+                reactData.isActivated = true;
+                inputElem.focus();
+                return nextTick();
+            },
+            blur() {
+                const inputElem = refInputTarget.value;
+                inputElem.blur();
+                reactData.isActivated = false;
+                return nextTick();
+            },
+            select() {
+                const inputElem = refInputTarget.value;
+                inputElem.select();
+                reactData.isActivated = false;
+                return nextTick();
+            },
+            showPanel,
+            hidePanel,
+            updatePlacement
+        };
+        Object.assign($xeInput, inputMethods);
         const renderDateLabel = (item, label) => {
             const { festivalMethod } = props;
             if (festivalMethod) {
@@ -11559,34 +11598,6 @@ var VxeInputComponent = defineVxeComponent({
             }
             return createCommentVNode();
         };
-        const dispatchEvent = (type, params, evnt) => {
-            emit(type, createEvent(evnt, { $input: $xeInput }, params));
-        };
-        inputMethods = {
-            dispatchEvent,
-            focus() {
-                const inputElem = refInputTarget.value;
-                reactData.isActivated = true;
-                inputElem.focus();
-                return nextTick();
-            },
-            blur() {
-                const inputElem = refInputTarget.value;
-                inputElem.blur();
-                reactData.isActivated = false;
-                return nextTick();
-            },
-            select() {
-                const inputElem = refInputTarget.value;
-                inputElem.select();
-                reactData.isActivated = false;
-                return nextTick();
-            },
-            showPanel,
-            hidePanel,
-            updatePlacement
-        };
-        Object.assign($xeInput, inputMethods);
         const renderVN = () => {
             const { className, inputClassName, controls, type, title, align, showWordCount, countMethod, name, autoComplete, autocomplete } = props;
             const { inputValue, visiblePanel, isActivated } = reactData;
@@ -11633,7 +11644,6 @@ var VxeInputComponent = defineVxeComponent({
                     h('input', {
                         ref: refInputTarget,
                         class: 'vxe-input--inner' + (inputClassName ? (' ' + inputClassName) : ''),
-                        value: inputValue,
                         name,
                         type: inputType,
                         placeholder: inpPlaceholder,
@@ -11687,6 +11697,19 @@ var VxeInputComponent = defineVxeComponent({
                 reactData.inputValue = props.multiple ? computeDateMultipleLabel.value : reactData.datePanelLabel;
             }
         });
+        const rDvFlag = ref(0);
+        watch(computeFormReadonly, () => {
+            rDvFlag.value++;
+        });
+        watch(computeDomValue, () => {
+            rDvFlag.value++;
+        });
+        watch(rDvFlag, () => {
+            updateDomValue();
+            nextTick(() => {
+                updateDomValue();
+            });
+        });
         onMounted(() => {
             const { type } = props;
             if (['date', 'time', 'datetime', 'week', 'month', 'quarter', 'year'].includes(type)) {
@@ -11706,6 +11729,7 @@ var VxeInputComponent = defineVxeComponent({
             globalEvents.on($xeInput, 'mousedown', handleGlobalMousedownEvent);
             globalEvents.on($xeInput, 'keydown', handleGlobalKeydownEvent);
             globalEvents.on($xeInput, 'blur', handleGlobalBlurEvent);
+            updateDomValue();
         });
         onBeforeUnmount(() => {
             numberStopDown();
@@ -15416,6 +15440,10 @@ var VxeNumberInputComponent = defineVxeComponent({
             }
             return false;
         });
+        const computeInpClassNamevalue = computed(() => {
+            const { inputClassName } = props;
+            return 'vxe-number-input--input' + (inputClassName ? (' ' + inputClassName) : '');
+        });
         const refMaps = {
             refElem,
             refInput: refInputTarget
@@ -15432,7 +15460,9 @@ var VxeNumberInputComponent = defineVxeComponent({
             getRefMaps: () => refMaps,
             getComputeMaps: () => computeMaps
         };
-        let numberInputMethods = {};
+        const dispatchEvent = (type, params, evnt) => {
+            emit(type, createEvent(evnt, { $numberInput: $xeNumberInput }, params));
+        };
         const handleNumberString = (val) => {
             if (XEUtils.eqNull(val)) {
                 return '';
@@ -15461,7 +15491,7 @@ var VxeNumberInputComponent = defineVxeComponent({
         };
         const triggerEvent = (evnt) => {
             const { inputValue } = reactData;
-            numberInputMethods.dispatchEvent(evnt.type, { value: inputValue }, evnt);
+            dispatchEvent(evnt.type, { value: inputValue }, evnt);
         };
         const handleChange = (val, inputValue, evnt) => {
             const value = eqEmptyValue(val) ? null : Number(val);
@@ -15475,9 +15505,9 @@ var VxeNumberInputComponent = defineVxeComponent({
                     reactData.inputValue = inputValue || '';
                 });
             }
-            numberInputMethods.dispatchEvent('input', { value }, evnt);
+            dispatchEvent('input', { value }, evnt);
             if (isChange) {
-                numberInputMethods.dispatchEvent('change', { value }, evnt);
+                dispatchEvent('change', { value }, evnt);
                 // 自动更新校验状态
                 if ($xeForm && formItemInfo) {
                     $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
@@ -15492,7 +15522,7 @@ var VxeNumberInputComponent = defineVxeComponent({
                 handleChange(value, inputValue, evnt);
             }
             else {
-                numberInputMethods.dispatchEvent('input', { value }, evnt);
+                dispatchEvent('input', { value }, evnt);
                 // 自动更新校验状态
                 if ($xeForm && formItemInfo) {
                     $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
@@ -15509,7 +15539,7 @@ var VxeNumberInputComponent = defineVxeComponent({
             if (!inpImmediate) {
                 triggerEvent(evnt);
             }
-            $xeNumberInput.dispatchEvent('lazy-change', { value: reactData.inputValue }, evnt);
+            dispatchEvent('lazy-change', { value: reactData.inputValue }, evnt);
         };
         const focusEvent = (evnt) => {
             const inputReadonly = computeInputReadonly.value;
@@ -15525,20 +15555,20 @@ var VxeNumberInputComponent = defineVxeComponent({
             const isDisabled = computeIsDisabled.value;
             if (!isDisabled) {
                 const { inputValue } = reactData;
-                numberInputMethods.dispatchEvent('prefix-click', { value: inputValue }, evnt);
+                dispatchEvent('prefix-click', { value: inputValue }, evnt);
             }
         };
         const clearValueEvent = (evnt, value) => {
             focus();
             handleChange(null, '', evnt);
-            numberInputMethods.dispatchEvent('clear', { value }, evnt);
-            $xeNumberInput.dispatchEvent('lazy-change', { value }, evnt);
+            dispatchEvent('clear', { value }, evnt);
+            dispatchEvent('lazy-change', { value }, evnt);
         };
         const clickSuffixEvent = (evnt) => {
             const isDisabled = computeIsDisabled.value;
             if (!isDisabled) {
                 const { inputValue } = reactData;
-                numberInputMethods.dispatchEvent('suffix-click', { value: inputValue }, evnt);
+                dispatchEvent('suffix-click', { value: inputValue }, evnt);
             }
         };
         const updateModel = (val) => {
@@ -15640,7 +15670,7 @@ var VxeNumberInputComponent = defineVxeComponent({
             afterCheckValue();
             reactData.isFocus = false;
             reactData.isActivated = false;
-            numberInputMethods.dispatchEvent('blur', { value }, evnt);
+            dispatchEvent('blur', { value }, evnt);
             // 自动更新校验状态
             if ($xeForm && formItemInfo) {
                 $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
@@ -15673,10 +15703,10 @@ var VxeNumberInputComponent = defineVxeComponent({
                 numberChange(true, evnt);
             }
             reactData.isActivated = true;
-            numberInputMethods.dispatchEvent('plus-number', { value: reactData.inputValue }, evnt);
-            $xeNumberInput.dispatchEvent('lazy-change', { value: reactData.inputValue }, evnt);
+            dispatchEvent('plus-number', { value: reactData.inputValue }, evnt);
+            dispatchEvent('lazy-change', { value: reactData.inputValue }, evnt);
             // 已废弃
-            numberInputMethods.dispatchEvent('next-number', { value: reactData.inputValue }, evnt);
+            dispatchEvent('next-number', { value: reactData.inputValue }, evnt);
         };
         const numberMinusEvent = (evnt) => {
             const isDisabled = computeIsDisabled.value;
@@ -15686,10 +15716,10 @@ var VxeNumberInputComponent = defineVxeComponent({
                 numberChange(false, evnt);
             }
             reactData.isActivated = true;
-            numberInputMethods.dispatchEvent('minus-number', { value: reactData.inputValue }, evnt);
-            $xeNumberInput.dispatchEvent('lazy-change', { value: reactData.inputValue }, evnt);
+            dispatchEvent('minus-number', { value: reactData.inputValue }, evnt);
+            dispatchEvent('lazy-change', { value: reactData.inputValue }, evnt);
             // 已废弃
-            numberInputMethods.dispatchEvent('prev-number', { value: reactData.inputValue }, evnt);
+            dispatchEvent('prev-number', { value: reactData.inputValue }, evnt);
         };
         const numberKeydownEvent = (evnt) => {
             const isUpArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_UP);
@@ -15876,10 +15906,7 @@ var VxeNumberInputComponent = defineVxeComponent({
                 afterCheckValue();
             }
         };
-        const dispatchEvent = (type, params, evnt) => {
-            emit(type, createEvent(evnt, { $numberInput: $xeNumberInput }, params));
-        };
-        numberInputMethods = {
+        const numberInputMethods = {
             dispatchEvent,
             focus() {
                 const inputReadonly = computeInputReadonly.value;
@@ -15980,13 +16007,14 @@ var VxeNumberInputComponent = defineVxeComponent({
             ]);
         };
         const renderInput = () => {
-            const { inputClassName, type, name, autocomplete, autoComplete } = props;
+            const { type, name, autocomplete, autoComplete } = props;
             const { inputValue, isFocus } = reactData;
             const isDisabled = computeIsDisabled.value;
             const numLabel = computeNumLabel.value;
             const inputReadonly = computeInputReadonly.value;
             const inpMaxLength = computeInpMaxLength.value;
             const inpPlaceholder = computeInpPlaceholder.value;
+            const inpClassName = computeInpClassNamevalue.value;
             return h('div', {
                 key: 'ni',
                 class: 'vxe-number-input--input-wrapper'
@@ -15997,10 +16025,10 @@ var VxeNumberInputComponent = defineVxeComponent({
                 }, [
                     h('input', {
                         ref: refInputTarget,
-                        class: 'vxe-number-input--input' + (inputClassName ? (' ' + inputClassName) : ''),
-                        value: !isFocus && type === 'amount' ? numLabel : inputValue,
+                        class: inpClassName,
                         name,
                         type: 'text',
+                        value: !isFocus && type === 'amount' ? numLabel : inputValue,
                         placeholder: inpPlaceholder,
                         maxlength: inpMaxLength,
                         readonly: inputReadonly,
@@ -33831,6 +33859,10 @@ var VxePasswordInputComponent = defineVxeComponent({
             type: Boolean,
             default: () => getConfig$3().passwordInput.controls
         },
+        editable: {
+            type: Boolean,
+            default: true
+        },
         // 已废弃
         autocomplete: String
     },
@@ -33871,14 +33903,9 @@ var VxePasswordInputComponent = defineVxeComponent({
             reactData,
             getRefMaps: () => refMaps
         };
-        let passwordInputMethods = {};
         const computeIsClearable = computed(() => {
             return props.clearable;
         });
-        const computeInpReadonly = computed(() => {
-            const { readonly } = props;
-            return readonly;
-        });
         const computeInpPlaceholder = computed(() => {
             const { placeholder } = props;
             if (placeholder) {
@@ -33890,6 +33917,32 @@ var VxePasswordInputComponent = defineVxeComponent({
             }
             return getI18n$2('vxe.base.pleaseInput');
         });
+        const computeFormReadonly = computed(() => {
+            if (getConfig$3().inputReadonly === 'obsolete') {
+                if ($xeForm) {
+                    return $xeForm.props.readonly;
+                }
+                return false;
+            }
+            const { readonly } = props;
+            if (readonly === null) {
+                if ($xeForm) {
+                    return $xeForm.props.readonly;
+                }
+                return false;
+            }
+            return readonly;
+        });
+        const computeIsDisabled = computed(() => {
+            const { disabled } = props;
+            if (disabled === null) {
+                if ($xeForm) {
+                    return $xeForm.props.disabled;
+                }
+                return false;
+            }
+            return disabled;
+        });
         const computeInputType = computed(() => {
             const { showPwd } = reactData;
             if (showPwd) {
@@ -33901,9 +33954,28 @@ var VxePasswordInputComponent = defineVxeComponent({
             const { immediate } = props;
             return immediate;
         });
+        const computeInputReadonly = computed(() => {
+            const { editable } = props;
+            const formReadonly = computeFormReadonly.value;
+            return formReadonly || !editable;
+        });
+        const computeDomValue = computed(() => {
+            const { inputValue } = reactData;
+            return inputValue;
+        });
+        const dispatchEvent = (type, params, evnt) => {
+            emit(type, createEvent(evnt, { $passwordInput: $xePasswordInput }, params));
+        };
+        const updateDomValue = () => {
+            const domValue = computeDomValue.value;
+            const inputElem = refInputTarget.value;
+            if (inputElem) {
+                inputElem.value = XEUtils.eqNull(domValue) ? '' : ('' + domValue);
+            }
+        };
         const triggerEvent = (evnt) => {
             const { inputValue } = reactData;
-            passwordInputMethods.dispatchEvent(evnt.type, { value: inputValue }, evnt);
+            dispatchEvent(evnt.type, { value: inputValue }, evnt);
         };
         const emitInputEvent = (value, evnt) => {
             const inpImmediate = computeInpImmediate.value;
@@ -33912,7 +33984,7 @@ var VxePasswordInputComponent = defineVxeComponent({
                 handleChange(value, evnt);
             }
             else {
-                passwordInputMethods.dispatchEvent('input', { value }, evnt);
+                dispatchEvent('input', { value }, evnt);
             }
         };
         const inputEvent = (evnt) => {
@@ -33923,9 +33995,9 @@ var VxePasswordInputComponent = defineVxeComponent({
         const handleChange = (value, evnt) => {
             reactData.inputValue = value;
             emit('update:modelValue', value);
-            passwordInputMethods.dispatchEvent('input', { value }, evnt);
+            dispatchEvent('input', { value }, evnt);
             if (XEUtils.toValueString(props.modelValue) !== value) {
-                passwordInputMethods.dispatchEvent('change', { value }, evnt);
+                dispatchEvent('change', { value }, evnt);
                 // 自动更新校验状态
                 if ($xeForm && formItemInfo) {
                     $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
@@ -33934,7 +34006,7 @@ var VxePasswordInputComponent = defineVxeComponent({
         };
         const changeEvent = (evnt) => {
             triggerEvent(evnt);
-            $xePasswordInput.dispatchEvent('lazy-change', { value: reactData.inputValue }, evnt);
+            dispatchEvent('lazy-change', { value: reactData.inputValue }, evnt);
             // 自动更新校验状态
             if ($xeForm && formItemInfo) {
                 $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, reactData.inputValue);
@@ -33948,19 +34020,20 @@ var VxePasswordInputComponent = defineVxeComponent({
             const { inputValue } = reactData;
             const value = inputValue;
             reactData.isActivated = false;
-            $xePasswordInput.dispatchEvent('blur', { value }, evnt);
+            dispatchEvent('blur', { value }, evnt);
             // 自动更新校验状态
             if ($xeForm && formItemInfo) {
                 $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
             }
         };
         const passwordToggleEvent = (evnt) => {
-            const { readonly, disabled } = props;
             const { showPwd } = reactData;
-            if (!disabled && !readonly) {
+            const isDisabled = computeIsDisabled.value;
+            const formReadonly = computeFormReadonly.value;
+            if (!isDisabled && !formReadonly) {
                 reactData.showPwd = !showPwd;
             }
-            $xePasswordInput.dispatchEvent('toggle-visible', { visible: reactData.showPwd }, evnt);
+            dispatchEvent('toggle-visible', { visible: reactData.showPwd }, evnt);
         };
         const clickEvent = (evnt) => {
             triggerEvent(evnt);
@@ -33968,23 +34041,45 @@ var VxePasswordInputComponent = defineVxeComponent({
         const clearValueEvent = (evnt, value) => {
             focus();
             handleChange('', evnt);
-            $xePasswordInput.dispatchEvent('clear', { value }, evnt);
-            $xePasswordInput.dispatchEvent('lazy-change', { value: reactData.inputValue }, evnt);
+            dispatchEvent('clear', { value }, evnt);
+            dispatchEvent('lazy-change', { value: reactData.inputValue }, evnt);
         };
         const clickSuffixEvent = (evnt) => {
-            const { disabled } = props;
-            if (!disabled) {
+            const isDisabled = computeIsDisabled.value;
+            if (!isDisabled) {
                 const { inputValue } = reactData;
-                $xePasswordInput.dispatchEvent('suffix-click', { value: inputValue }, evnt);
+                dispatchEvent('suffix-click', { value: inputValue }, evnt);
             }
         };
         const clickPrefixEvent = (evnt) => {
-            const { disabled } = props;
-            if (!disabled) {
+            const isDisabled = computeIsDisabled.value;
+            if (!isDisabled) {
                 const { inputValue } = reactData;
-                $xePasswordInput.dispatchEvent('prefix-click', { value: inputValue }, evnt);
+                dispatchEvent('prefix-click', { value: inputValue }, evnt);
             }
         };
+        const passwordInputMethods = {
+            dispatchEvent,
+            focus() {
+                const inputElem = refInputTarget.value;
+                reactData.isActivated = true;
+                inputElem.focus();
+                return nextTick();
+            },
+            blur() {
+                const inputElem = refInputTarget.value;
+                inputElem.blur();
+                reactData.isActivated = false;
+                return nextTick();
+            },
+            select() {
+                const inputElem = refInputTarget.value;
+                inputElem.select();
+                reactData.isActivated = false;
+                return nextTick();
+            }
+        };
+        Object.assign($xePasswordInput, passwordInputMethods);
         const renderPasswordIcon = () => {
             const { showPwd } = reactData;
             return h('div', {
@@ -34017,14 +34112,15 @@ var VxePasswordInputComponent = defineVxeComponent({
                 : null;
         };
         const renderSuffixIcon = () => {
-            const { disabled, suffixIcon, controls } = props;
+            const { suffixIcon, controls } = props;
             const { inputValue } = reactData;
-            const suffixSlot = slots.suffix;
+            const isDisabled = computeIsDisabled.value;
             const isClearable = computeIsClearable.value;
+            const suffixSlot = slots.suffix;
             return isClearable || controls || suffixSlot || suffixIcon
                 ? h('div', {
                     class: ['vxe-password-input--suffix', {
-                            'is--clear': isClearable && !disabled && !(inputValue === '' || XEUtils.eqNull(inputValue))
+                            'is--clear': isClearable && !isDisabled && !(inputValue === '' || XEUtils.eqNull(inputValue))
                         }]
                 }, [
                     isClearable
@@ -34053,41 +34149,22 @@ var VxePasswordInputComponent = defineVxeComponent({
                 ])
                 : null;
         };
-        passwordInputMethods = {
-            dispatchEvent(type, params, evnt) {
-                emit(type, createEvent(evnt, { $passwordInput: $xePasswordInput }, params));
-            },
-            focus() {
-                const inputElem = refInputTarget.value;
-                reactData.isActivated = true;
-                inputElem.focus();
-                return nextTick();
-            },
-            blur() {
-                const inputElem = refInputTarget.value;
-                inputElem.blur();
-                reactData.isActivated = false;
-                return nextTick();
-            },
-            select() {
-                const inputElem = refInputTarget.value;
-                inputElem.select();
-                reactData.isActivated = false;
-                return nextTick();
-            }
-        };
-        Object.assign($xePasswordInput, passwordInputMethods);
-        watch(() => props.modelValue, (val) => {
-            reactData.inputValue = val;
-        });
         const renderVN = () => {
-            const { className, inputClassName, name, disabled, readonly, autocomplete, autoComplete, maxLength } = props;
+            const { className, inputClassName, name, readonly, autocomplete, autoComplete, maxLength } = props;
             const { inputValue, isActivated } = reactData;
+            const isDisabled = computeIsDisabled.value;
+            const formReadonly = computeFormReadonly.value;
+            if (formReadonly) {
+                return h('div', {
+                    ref: refElem,
+                    class: ['vxe-password-input--readonly', className]
+                }, getText(inputValue));
+            }
             const vSize = computeSize.value;
-            const inpReadonly = computeInpReadonly.value;
             const inputType = computeInputType.value;
             const inpPlaceholder = computeInpPlaceholder.value;
             const isClearable = computeIsClearable.value;
+            const inputReadonly = computeInputReadonly.value;
             const prefix = renderPrefixIcon();
             const suffix = renderSuffixIcon();
             return h('div', {
@@ -34097,9 +34174,9 @@ var VxePasswordInputComponent = defineVxeComponent({
                         'is--prefix': !!prefix,
                         'is--suffix': !!suffix,
                         'is--readonly': readonly,
-                        'is--disabled': disabled,
+                        'is--disabled': isDisabled,
                         'is--active': isActivated,
-                        'show--clear': isClearable && !disabled && !(inputValue === '' || XEUtils.eqNull(inputValue))
+                        'show--clear': isClearable && !isDisabled && !(inputValue === '' || XEUtils.eqNull(inputValue))
                     }],
                 spellcheck: false
             }, [
@@ -34110,12 +34187,11 @@ var VxePasswordInputComponent = defineVxeComponent({
                     h('input', {
                         ref: refInputTarget,
                         class: 'vxe-password-input--inner' + (inputClassName ? (' ' + inputClassName) : ''),
-                        value: inputValue,
                         name,
                         type: inputType,
                         placeholder: inpPlaceholder,
-                        readonly: inpReadonly,
-                        disabled,
+                        readonly: inputReadonly,
+                        disabled: isDisabled,
                         autocomplete: autocomplete || autoComplete,
                         maxlength: maxLength,
                         onClick: clickEvent,
@@ -34128,6 +34204,25 @@ var VxePasswordInputComponent = defineVxeComponent({
                 suffix || renderEmptyElement($xePasswordInput)
             ]);
         };
+        watch(() => props.modelValue, (val) => {
+            reactData.inputValue = val;
+        });
+        const rDvFlag = ref(0);
+        watch(computeFormReadonly, () => {
+            rDvFlag.value++;
+        });
+        watch(computeDomValue, () => {
+            rDvFlag.value++;
+        });
+        watch(rDvFlag, () => {
+            updateDomValue();
+            nextTick(() => {
+                updateDomValue();
+            });
+        });
+        onMounted(() => {
+            updateDomValue();
+        });
         $xePasswordInput.renderVN = renderVN;
         return $xePasswordInput;
     },
@@ -40394,7 +40489,6 @@ var VxeTextareaComponent = defineVxeComponent({
             reactData,
             getRefMaps: () => refMaps
         };
-        let textareaMethods = {};
         const computeFormReadonly = computed(() => {
             const { readonly } = props;
             if (readonly === null) {
@@ -40449,6 +40543,20 @@ var VxeTextareaComponent = defineVxeComponent({
             }
             return Object.assign({ minRows: 1, maxRows: 10 }, getConfig$3().textarea.autoSize, autoSize);
         });
+        const computeDomValue = computed(() => {
+            const { inputValue } = reactData;
+            return inputValue;
+        });
+        const dispatchEvent = (type, params, evnt) => {
+            emit(type, createEvent(evnt, { $textarea: $xeTextarea }, params));
+        };
+        const updateDomValue = () => {
+            const domValue = computeDomValue.value;
+            const taElem = refTextarea.value;
+            if (taElem) {
+                taElem.value = XEUtils.eqNull(domValue) ? '' : ('' + domValue);
+            }
+        };
         const updateAutoTxt = () => {
             const { size, autosize, autoSize } = props;
             const { inputValue } = reactData;
@@ -40509,7 +40617,7 @@ var VxeTextareaComponent = defineVxeComponent({
         };
         const triggerEvent = (evnt) => {
             const value = reactData.inputValue;
-            $xeTextarea.dispatchEvent(evnt.type, { value }, evnt);
+            dispatchEvent(evnt.type, { value }, evnt);
         };
         const handleChange = (value, evnt) => {
             if (props.trim) {
@@ -40539,7 +40647,7 @@ var VxeTextareaComponent = defineVxeComponent({
                     $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
                 }
             }
-            $xeTextarea.dispatchEvent('input', { value }, evnt);
+            dispatchEvent('input', { value }, evnt);
             handleResize();
         };
         const changeEvent = (evnt) => {
@@ -40550,7 +40658,7 @@ var VxeTextareaComponent = defineVxeComponent({
             else {
                 handleChange(reactData.inputValue, evnt);
             }
-            $xeTextarea.dispatchEvent('lazy-change', { value: reactData.inputValue }, evnt);
+            dispatchEvent('lazy-change', { value: reactData.inputValue }, evnt);
         };
         const blurEvent = (evnt) => {
             const { immediate } = props;
@@ -40558,12 +40666,10 @@ var VxeTextareaComponent = defineVxeComponent({
             if (!immediate) {
                 handleChange(inputValue, evnt);
             }
-            $xeTextarea.dispatchEvent('blur', { value: inputValue }, evnt);
+            dispatchEvent('blur', { value: inputValue }, evnt);
         };
-        textareaMethods = {
-            dispatchEvent(type, params, evnt) {
-                emit(type, createEvent(evnt, { $textarea: $xeTextarea }, params));
-            },
+        const textareaMethods = {
+            dispatchEvent,
             focus() {
                 const textElem = refTextarea.value;
                 textElem.focus();
@@ -40613,7 +40719,6 @@ var VxeTextareaComponent = defineVxeComponent({
                 h('textarea', {
                     ref: refTextarea,
                     class: 'vxe-textarea--inner' + (inputClassName ? (' ' + inputClassName) : ''),
-                    value: inputValue,
                     name: props.name,
                     placeholder: inpPlaceholder,
                     maxlength: inpMaxLength,
@@ -40664,6 +40769,22 @@ var VxeTextareaComponent = defineVxeComponent({
             updateAutoTxt();
             handleResize();
         });
+        const rDvFlag = ref(0);
+        watch(computeFormReadonly, () => {
+            rDvFlag.value++;
+        });
+        watch(computeDomValue, () => {
+            rDvFlag.value++;
+        });
+        watch(rDvFlag, () => {
+            updateDomValue();
+        });
+        onMounted(() => {
+            updateDomValue();
+            nextTick(() => {
+                updateDomValue();
+            });
+        });
         nextTick(() => {
             const { autosize, autoSize } = props;
             if (autosize) {