vxe-pc-ui 4.17.1 → 4.17.2

package/lib/index.umd.js

@@ -3346,7 +3346,7 @@ if (typeof window !== 'undefined') {
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.push.js
 var es_array_push = __webpack_require__(4114);
 ;// ./node_modules/@vxe-ui/core/es/src/core.js
-const coreVersion = "4.4.18";
+const coreVersion = "4.4.20";
 const VxeCore = {
   coreVersion,
   uiVersion: '',
@@ -3633,6 +3633,7 @@ const GLOBAL_EVENT_KEYS = {
   PAGE_DOWN: 'PageDown',
   HOME: 'Home',
   END: 'End',
+  PROCESS: 'Process',
   A: 'A',
   X: 'X',
   C: 'C',
@@ -3973,7 +3974,7 @@ function createLog(type, name) {
     return msg;
   };
 }
-const version = "4.4.18";
+const version = "4.4.20";
 const log = {
   create: createLog,
   warn: createLog('warn', `v${version}`),
@@ -4657,7 +4658,7 @@ function checkDynamic() {
 const {
   log: log_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}` : '';
@@ -4675,7 +4676,7 @@ const errLog = log_log.create('error', uiVersion);
 
 
 
-const ui_version = "4.17.1";
+const ui_version = "4.17.2";
 VxeUI.uiVersion = ui_version;
 VxeUI.dynamicApp = dynamicApp;
 function config(options) {
@@ -14810,7 +14811,6 @@ const {
       internalData,
       getRefMaps: () => refMaps
     };
-    let inputMethods = {};
     const parseDate = (value, format) => {
       const {
         type
@@ -15329,10 +15329,10 @@ const {
       const {
         type,
         editable,
-        multiple,
-        readonly
+        multiple
       } = props;
-      return readonly || multiple || !editable || type === 'week' || type === 'quarter';
+      const formReadonly = computeFormReadonly.value;
+      return formReadonly || multiple || !editable || type === 'week' || type === 'quarter';
     });
     const computeInputType = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       const {
@@ -15415,6 +15415,12 @@ const {
       }
       return false;
     });
+    const computeDomValue = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        inputValue
+      } = reactData;
+      return inputValue;
+    });
     const getNumberValue = val => {
       const {
         type,
@@ -15428,6 +15434,18 @@ const {
       }
       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 = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eqNull(domValue) ? '' : '' + domValue;
+      }
+    };
     const emitModel = value => {
       emit('update:modelValue', value);
     };
@@ -15435,7 +15453,7 @@ const {
       const {
         inputValue
       } = reactData;
-      inputMethods.dispatchEvent(evnt.type, {
+      dispatchEvent(evnt.type, {
         value: inputValue
       }, evnt);
     };
@@ -15445,11 +15463,11 @@ const {
       }
       reactData.inputValue = value;
       emitModel(value);
-      inputMethods.dispatchEvent('input', {
+      dispatchEvent('input', {
         value
       }, evnt);
       if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toValueString(props.modelValue) !== value) {
-        inputMethods.dispatchEvent('change', {
+        dispatchEvent('change', {
           value
         }, evnt);
         if (!$xeSelect && !$xeTreeSelect) {
@@ -15468,7 +15486,7 @@ const {
         if (inpImmediate) {
           handleChange(value, evnt);
         } else {
-          inputMethods.dispatchEvent('input', {
+          dispatchEvent('input', {
             value
           }, evnt);
           if (!$xeSelect && !$xeTreeSelect) {
@@ -15490,7 +15508,7 @@ const {
       if (!inpImmediate) {
         triggerEvent(evnt);
       }
-      $xeInput.dispatchEvent('lazy-change', {
+      dispatchEvent('lazy-change', {
         value: reactData.inputValue
       }, evnt);
     };
@@ -15507,7 +15525,7 @@ const {
       if (!reactData.visiblePanel) {
         reactData.isActivated = false;
       }
-      inputMethods.dispatchEvent('blur', {
+      dispatchEvent('blur', {
         value
       }, evnt);
       if (!$xeSelect && !$xeTreeSelect) {
@@ -15537,7 +15555,7 @@ const {
         const {
           inputValue
         } = reactData;
-        $xeInput.dispatchEvent('prefix-click', {
+        dispatchEvent('prefix-click', {
           value: inputValue
         }, evnt);
       }
@@ -15567,10 +15585,10 @@ const {
         }
       }
       handleChange('', evnt);
-      $xeInput.dispatchEvent('clear', {
+      dispatchEvent('clear', {
         value
       }, evnt);
-      $xeInput.dispatchEvent('lazy-change', {
+      dispatchEvent('lazy-change', {
         value
       }, evnt);
     };
@@ -15580,7 +15598,7 @@ const {
         const {
           inputValue
         } = reactData;
-        $xeInput.dispatchEvent('suffix-click', {
+        dispatchEvent('suffix-click', {
           value: inputValue
         }, evnt);
       }
@@ -15848,14 +15866,14 @@ const {
       if (!isDisabled && !inputReadonly) {
         reactData.showPwd = !showPwd;
       }
-      inputMethods.dispatchEvent('toggle-visible', {
+      dispatchEvent('toggle-visible', {
         visible: reactData.showPwd
       }, evnt);
     };
     // 密码
     // 搜索
     const searchEvent = evnt => {
-      inputMethods.dispatchEvent('search-click', {}, evnt);
+      dispatchEvent('search-click', {}, evnt);
     };
     // 搜索
     // 数值
@@ -15889,7 +15907,7 @@ const {
       if (!isDisabled && !inputReadonly && !isDisabledSubtractNumber) {
         numberChange(false, evnt);
       }
-      inputMethods.dispatchEvent('next-number', {
+      dispatchEvent('next-number', {
         value: reactData.inputValue
       }, evnt);
     };
@@ -15907,7 +15925,7 @@ const {
       if (!isDisabled && !inputReadonly && !isDisabledAddNumber) {
         numberChange(true, evnt);
       }
-      inputMethods.dispatchEvent('prev-number', {
+      dispatchEvent('prev-number', {
         value: reactData.inputValue
       }, evnt);
     };
@@ -16066,7 +16084,7 @@ const {
           }
         }
         reactData.selectMonth = viewDate;
-        inputMethods.dispatchEvent('date-prev', {
+        dispatchEvent('date-prev', {
           viewType: datePanelType,
           viewDate,
           value,
@@ -16080,7 +16098,7 @@ const {
         dateChange(reactData.currentDate);
         hidePanel();
       }
-      inputMethods.dispatchEvent('date-today', {
+      dispatchEvent('date-today', {
         type: props.type
       }, evnt);
     };
@@ -16118,7 +16136,7 @@ const {
           }
         }
         reactData.selectMonth = viewDate;
-        inputMethods.dispatchEvent('date-next', {
+        dispatchEvent('date-next', {
           viewType: datePanelType,
           viewDate,
           value,
@@ -16699,6 +16717,31 @@ const {
         }
       }
     };
+    const inputMethods = {
+      dispatchEvent,
+      focus() {
+        const inputElem = refInputTarget.value;
+        reactData.isActivated = true;
+        inputElem.focus();
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
+      },
+      blur() {
+        const inputElem = refInputTarget.value;
+        inputElem.blur();
+        reactData.isActivated = false;
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
+      },
+      select() {
+        const inputElem = refInputTarget.value;
+        inputElem.select();
+        reactData.isActivated = false;
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
+      },
+      showPanel,
+      hidePanel,
+      updatePlacement
+    };
+    Object.assign($xeInput, inputMethods);
     const renderDateLabel = (item, label) => {
       const {
         festivalMethod
@@ -17243,36 +17286,6 @@ const {
       }
       return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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 (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
-      },
-      blur() {
-        const inputElem = refInputTarget.value;
-        inputElem.blur();
-        reactData.isActivated = false;
-        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
-      },
-      select() {
-        const inputElem = refInputTarget.value;
-        inputElem.select();
-        reactData.isActivated = false;
-        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
-      },
-      showPanel,
-      hidePanel,
-      updatePlacement
-    };
-    Object.assign($xeInput, inputMethods);
     const renderVN = () => {
       const {
         className,
@@ -17332,7 +17345,6 @@ const {
       }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('input', {
         ref: refInputTarget,
         class: 'vxe-input--inner' + (inputClassName ? ' ' + inputClassName : ''),
-        value: inputValue,
         name,
         type: inputType,
         placeholder: inpPlaceholder,
@@ -17383,6 +17395,19 @@ const {
         reactData.inputValue = props.multiple ? computeDateMultipleLabel.value : reactData.datePanelLabel;
       }
     });
+    const rDvFlag = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(0);
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeFormReadonly, () => {
+      rDvFlag.value++;
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeDomValue, () => {
+      rDvFlag.value++;
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(rDvFlag, () => {
+      updateDomValue();
+      (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
+        updateDomValue();
+      });
+    });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onMounted)(() => {
       const {
         type
@@ -17404,6 +17429,7 @@ const {
       globalEvents.on($xeInput, 'mousedown', handleGlobalMousedownEvent);
       globalEvents.on($xeInput, 'keydown', handleGlobalKeydownEvent);
       globalEvents.on($xeInput, 'blur', handleGlobalBlurEvent);
+      updateDomValue();
     });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onBeforeUnmount)(() => {
       numberStopDown();
@@ -21614,6 +21640,12 @@ function hexToRgb(str) {
       }
       return false;
     });
+    const computeInpClassNamevalue = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        inputClassName
+      } = props;
+      return 'vxe-number-input--input' + (inputClassName ? ' ' + inputClassName : '');
+    });
     const refMaps = {
       refElem,
       refInput: refInputTarget
@@ -21630,7 +21662,11 @@ function hexToRgb(str) {
       getRefMaps: () => refMaps,
       getComputeMaps: () => computeMaps
     };
-    let numberInputMethods = {};
+    const dispatchEvent = (type, params, evnt) => {
+      emit(type, createEvent(evnt, {
+        $numberInput: $xeNumberInput
+      }, params));
+    };
     const handleNumberString = val => {
       if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eqNull(val)) {
         return '';
@@ -21665,7 +21701,7 @@ function hexToRgb(str) {
       const {
         inputValue
       } = reactData;
-      numberInputMethods.dispatchEvent(evnt.type, {
+      dispatchEvent(evnt.type, {
         value: inputValue
       }, evnt);
     };
@@ -21681,11 +21717,11 @@ function hexToRgb(str) {
           reactData.inputValue = inputValue || '';
         });
       }
-      numberInputMethods.dispatchEvent('input', {
+      dispatchEvent('input', {
         value
       }, evnt);
       if (isChange) {
-        numberInputMethods.dispatchEvent('change', {
+        dispatchEvent('change', {
           value
         }, evnt);
         // 自动更新校验状态
@@ -21701,7 +21737,7 @@ function hexToRgb(str) {
       if (inpImmediate) {
         handleChange(value, inputValue, evnt);
       } else {
-        numberInputMethods.dispatchEvent('input', {
+        dispatchEvent('input', {
           value
         }, evnt);
         // 自动更新校验状态
@@ -21720,7 +21756,7 @@ function hexToRgb(str) {
       if (!inpImmediate) {
         triggerEvent(evnt);
       }
-      $xeNumberInput.dispatchEvent('lazy-change', {
+      dispatchEvent('lazy-change', {
         value: reactData.inputValue
       }, evnt);
     };
@@ -21742,7 +21778,7 @@ function hexToRgb(str) {
         const {
           inputValue
         } = reactData;
-        numberInputMethods.dispatchEvent('prefix-click', {
+        dispatchEvent('prefix-click', {
           value: inputValue
         }, evnt);
       }
@@ -21750,10 +21786,10 @@ function hexToRgb(str) {
     const clearValueEvent = (evnt, value) => {
       focus();
       handleChange(null, '', evnt);
-      numberInputMethods.dispatchEvent('clear', {
+      dispatchEvent('clear', {
         value
       }, evnt);
-      $xeNumberInput.dispatchEvent('lazy-change', {
+      dispatchEvent('lazy-change', {
         value
       }, evnt);
     };
@@ -21763,7 +21799,7 @@ function hexToRgb(str) {
         const {
           inputValue
         } = reactData;
-        numberInputMethods.dispatchEvent('suffix-click', {
+        dispatchEvent('suffix-click', {
           value: inputValue
         }, evnt);
       }
@@ -21891,7 +21927,7 @@ function hexToRgb(str) {
       afterCheckValue();
       reactData.isFocus = false;
       reactData.isActivated = false;
-      numberInputMethods.dispatchEvent('blur', {
+      dispatchEvent('blur', {
         value
       }, evnt);
       // 自动更新校验状态
@@ -21930,14 +21966,14 @@ function hexToRgb(str) {
         numberChange(true, evnt);
       }
       reactData.isActivated = true;
-      numberInputMethods.dispatchEvent('plus-number', {
+      dispatchEvent('plus-number', {
         value: reactData.inputValue
       }, evnt);
-      $xeNumberInput.dispatchEvent('lazy-change', {
+      dispatchEvent('lazy-change', {
         value: reactData.inputValue
       }, evnt);
       // 已废弃
-      numberInputMethods.dispatchEvent('next-number', {
+      dispatchEvent('next-number', {
         value: reactData.inputValue
       }, evnt);
     };
@@ -21949,14 +21985,14 @@ function hexToRgb(str) {
         numberChange(false, evnt);
       }
       reactData.isActivated = true;
-      numberInputMethods.dispatchEvent('minus-number', {
+      dispatchEvent('minus-number', {
         value: reactData.inputValue
       }, evnt);
-      $xeNumberInput.dispatchEvent('lazy-change', {
+      dispatchEvent('lazy-change', {
         value: reactData.inputValue
       }, evnt);
       // 已废弃
-      numberInputMethods.dispatchEvent('prev-number', {
+      dispatchEvent('prev-number', {
         value: reactData.inputValue
       }, evnt);
     };
@@ -22160,12 +22196,7 @@ function hexToRgb(str) {
         afterCheckValue();
       }
     };
-    const dispatchEvent = (type, params, evnt) => {
-      emit(type, createEvent(evnt, {
-        $numberInput: $xeNumberInput
-      }, params));
-    };
-    numberInputMethods = {
+    const numberInputMethods = {
       dispatchEvent,
       focus() {
         const inputReadonly = computeInputReadonly.value;
@@ -22242,7 +22273,6 @@ function hexToRgb(str) {
     };
     const renderInput = () => {
       const {
-        inputClassName,
         type,
         name,
         autocomplete,
@@ -22257,6 +22287,7 @@ function hexToRgb(str) {
       const inputReadonly = computeInputReadonly.value;
       const inpMaxLength = computeInpMaxLength.value;
       const inpPlaceholder = computeInpPlaceholder.value;
+      const inpClassName = computeInpClassNamevalue.value;
       return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         key: 'ni',
         class: 'vxe-number-input--input-wrapper'
@@ -22264,10 +22295,10 @@ function hexToRgb(str) {
         class: 'vxe-number-input--input-inner'
       }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.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,
@@ -42196,6 +42227,10 @@ const Pager = VxePager;
       type: Boolean,
       default: () => getConfig().passwordInput.controls
     },
+    editable: {
+      type: Boolean,
+      default: true
+    },
     // 已废弃
     autocomplete: String
   },
@@ -42229,16 +42264,9 @@ const Pager = VxePager;
       reactData,
       getRefMaps: () => refMaps
     };
-    let passwordInputMethods = {};
     const computeIsClearable = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       return props.clearable;
     });
-    const computeInpReadonly = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
-      const {
-        readonly
-      } = props;
-      return readonly;
-    });
     const computeInpPlaceholder = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       const {
         placeholder
@@ -42252,6 +42280,36 @@ const Pager = VxePager;
       }
       return getI18n('vxe.base.pleaseInput');
     });
+    const computeFormReadonly = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      if (getConfig().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 = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        disabled
+      } = props;
+      if (disabled === null) {
+        if ($xeForm) {
+          return $xeForm.props.disabled;
+        }
+        return false;
+      }
+      return disabled;
+    });
     const computeInputType = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       const {
         showPwd
@@ -42267,11 +42325,36 @@ const Pager = VxePager;
       } = props;
       return immediate;
     });
+    const computeInputReadonly = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        editable
+      } = props;
+      const formReadonly = computeFormReadonly.value;
+      return formReadonly || !editable;
+    });
+    const computeDomValue = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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 = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eqNull(domValue) ? '' : '' + domValue;
+      }
+    };
     const triggerEvent = evnt => {
       const {
         inputValue
       } = reactData;
-      passwordInputMethods.dispatchEvent(evnt.type, {
+      dispatchEvent(evnt.type, {
         value: inputValue
       }, evnt);
     };
@@ -42281,7 +42364,7 @@ const Pager = VxePager;
       if (inpImmediate) {
         handleChange(value, evnt);
       } else {
-        passwordInputMethods.dispatchEvent('input', {
+        dispatchEvent('input', {
           value
         }, evnt);
       }
@@ -42294,11 +42377,11 @@ const Pager = VxePager;
     const handleChange = (value, evnt) => {
       reactData.inputValue = value;
       emit('update:modelValue', value);
-      passwordInputMethods.dispatchEvent('input', {
+      dispatchEvent('input', {
         value
       }, evnt);
       if (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toValueString(props.modelValue) !== value) {
-        passwordInputMethods.dispatchEvent('change', {
+        dispatchEvent('change', {
           value
         }, evnt);
         // 自动更新校验状态
@@ -42309,7 +42392,7 @@ const Pager = VxePager;
     };
     const changeEvent = evnt => {
       triggerEvent(evnt);
-      $xePasswordInput.dispatchEvent('lazy-change', {
+      dispatchEvent('lazy-change', {
         value: reactData.inputValue
       }, evnt);
       // 自动更新校验状态
@@ -42327,7 +42410,7 @@ const Pager = VxePager;
       } = reactData;
       const value = inputValue;
       reactData.isActivated = false;
-      $xePasswordInput.dispatchEvent('blur', {
+      dispatchEvent('blur', {
         value
       }, evnt);
       // 自动更新校验状态
@@ -42336,17 +42419,15 @@ const Pager = VxePager;
       }
     };
     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', {
+      dispatchEvent('toggle-visible', {
         visible: reactData.showPwd
       }, evnt);
     };
@@ -42356,39 +42437,57 @@ const Pager = VxePager;
     const clearValueEvent = (evnt, value) => {
       focus();
       handleChange('', evnt);
-      $xePasswordInput.dispatchEvent('clear', {
+      dispatchEvent('clear', {
         value
       }, evnt);
-      $xePasswordInput.dispatchEvent('lazy-change', {
+      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', {
+        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', {
+        dispatchEvent('prefix-click', {
           value: inputValue
         }, evnt);
       }
     };
+    const passwordInputMethods = {
+      dispatchEvent,
+      focus() {
+        const inputElem = refInputTarget.value;
+        reactData.isActivated = true;
+        inputElem.focus();
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
+      },
+      blur() {
+        const inputElem = refInputTarget.value;
+        inputElem.blur();
+        reactData.isActivated = false;
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
+      },
+      select() {
+        const inputElem = refInputTarget.value;
+        inputElem.select();
+        reactData.isActivated = false;
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
+      }
+    };
+    Object.assign($xePasswordInput, passwordInputMethods);
     const renderPasswordIcon = () => {
       const {
         showPwd
@@ -42416,18 +42515,18 @@ const Pager = VxePager;
     };
     const renderSuffixIcon = () => {
       const {
-        disabled,
         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 ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         class: ['vxe-password-input--suffix', {
-          'is--clear': isClearable && !disabled && !(inputValue === '' || external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eqNull(inputValue))
+          'is--clear': isClearable && !isDisabled && !(inputValue === '' || external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eqNull(inputValue))
         }]
       }, [isClearable ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         class: 'vxe-password-input--clear-icon',
@@ -42441,41 +42540,11 @@ const Pager = VxePager;
         class: suffixIcon
       })]) : renderEmptyElement($xePasswordInput)]) : null;
     };
-    passwordInputMethods = {
-      dispatchEvent(type, params, evnt) {
-        emit(type, createEvent(evnt, {
-          $passwordInput: $xePasswordInput
-        }, params));
-      },
-      focus() {
-        const inputElem = refInputTarget.value;
-        reactData.isActivated = true;
-        inputElem.focus();
-        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
-      },
-      blur() {
-        const inputElem = refInputTarget.value;
-        inputElem.blur();
-        reactData.isActivated = false;
-        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
-      },
-      select() {
-        const inputElem = refInputTarget.value;
-        inputElem.select();
-        reactData.isActivated = false;
-        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
-      }
-    };
-    Object.assign($xePasswordInput, passwordInputMethods);
-    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.modelValue, val => {
-      reactData.inputValue = val;
-    });
     const renderVN = () => {
       const {
         className,
         inputClassName,
         name,
-        disabled,
         readonly,
         autocomplete,
         autoComplete,
@@ -42485,11 +42554,19 @@ const Pager = VxePager;
         inputValue,
         isActivated
       } = reactData;
+      const isDisabled = computeIsDisabled.value;
+      const formReadonly = computeFormReadonly.value;
+      if (formReadonly) {
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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 (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
@@ -42499,9 +42576,9 @@ const Pager = VxePager;
           'is--prefix': !!prefix,
           'is--suffix': !!suffix,
           'is--readonly': readonly,
-          'is--disabled': disabled,
+          'is--disabled': isDisabled,
           'is--active': isActivated,
-          'show--clear': isClearable && !disabled && !(inputValue === '' || external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eqNull(inputValue))
+          'show--clear': isClearable && !isDisabled && !(inputValue === '' || external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eqNull(inputValue))
         }],
         spellcheck: false
       }, [prefix || renderEmptyElement($xePasswordInput), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
@@ -42509,12 +42586,11 @@ const Pager = VxePager;
       }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.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,
@@ -42524,6 +42600,25 @@ const Pager = VxePager;
         onBlur: blurEvent
       })]), suffix || renderEmptyElement($xePasswordInput)]);
     };
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.modelValue, val => {
+      reactData.inputValue = val;
+    });
+    const rDvFlag = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(0);
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeFormReadonly, () => {
+      rDvFlag.value++;
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeDomValue, () => {
+      rDvFlag.value++;
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(rDvFlag, () => {
+      updateDomValue();
+      (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
+        updateDomValue();
+      });
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onMounted)(() => {
+      updateDomValue();
+    });
     $xePasswordInput.renderVN = renderVN;
     return $xePasswordInput;
   },
@@ -49459,7 +49554,6 @@ let autoTxtElem;
       reactData,
       getRefMaps: () => refMaps
     };
-    let textareaMethods = {};
     const computeFormReadonly = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       const {
         readonly
@@ -49535,6 +49629,24 @@ let autoTxtElem;
         maxRows: 10
       }, getConfig().textarea.autoSize, autoSize);
     });
+    const computeDomValue = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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 = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eqNull(domValue) ? '' : '' + domValue;
+      }
+    };
     const updateAutoTxt = () => {
       const {
         size,
@@ -49606,7 +49718,7 @@ let autoTxtElem;
     };
     const triggerEvent = evnt => {
       const value = reactData.inputValue;
-      $xeTextarea.dispatchEvent(evnt.type, {
+      dispatchEvent(evnt.type, {
         value
       }, evnt);
     };
@@ -49641,7 +49753,7 @@ let autoTxtElem;
           $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
         }
       }
-      $xeTextarea.dispatchEvent('input', {
+      dispatchEvent('input', {
         value
       }, evnt);
       handleResize();
@@ -49655,7 +49767,7 @@ let autoTxtElem;
       } else {
         handleChange(reactData.inputValue, evnt);
       }
-      $xeTextarea.dispatchEvent('lazy-change', {
+      dispatchEvent('lazy-change', {
         value: reactData.inputValue
       }, evnt);
     };
@@ -49669,16 +49781,12 @@ let autoTxtElem;
       if (!immediate) {
         handleChange(inputValue, evnt);
       }
-      $xeTextarea.dispatchEvent('blur', {
+      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();
@@ -49737,7 +49845,6 @@ let autoTxtElem;
       }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('textarea', {
         ref: refTextarea,
         class: 'vxe-textarea--inner' + (inputClassName ? ' ' + inputClassName : ''),
-        value: inputValue,
         name: props.name,
         placeholder: inpPlaceholder,
         maxlength: inpMaxLength,
@@ -49784,6 +49891,22 @@ let autoTxtElem;
       updateAutoTxt();
       handleResize();
     });
+    const rDvFlag = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(0);
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeFormReadonly, () => {
+      rDvFlag.value++;
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeDomValue, () => {
+      rDvFlag.value++;
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(rDvFlag, () => {
+      updateDomValue();
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onMounted)(() => {
+      updateDomValue();
+      (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
+        updateDomValue();
+      });
+    });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
       const {
         autosize,