vxe-pc-ui 4.17.1 → 4.17.2

package/packages/number-input/src/number-input.ts

@@ -324,6 +324,11 @@ export default defineVxeComponent({
       return false
     })
 
+    const computeInpClassNamevalue = computed(() => {
+      const { inputClassName } = props
+      return 'vxe-number-input--input' + (inputClassName ? (' ' + inputClassName) : '')
+    })
+
     const refMaps: InputPrivateRef = {
       refElem,
       refInput: refInputTarget
@@ -343,7 +348,9 @@ export default defineVxeComponent({
       getComputeMaps: () => computeMaps
     } as unknown as VxeNumberInputConstructor
 
-    let numberInputMethods = {} as NumberInputMethods
+    const dispatchEvent = (type: ValueOf<VxeNumberInputEmits>, params: Record<string, any>, evnt: Event | null) => {
+      emit(type, createEvent(evnt, { $numberInput: $xeNumberInput }, params))
+    }
 
     const handleNumberString = (val: any) => {
       if (XEUtils.eqNull(val)) {
@@ -374,7 +381,7 @@ export default defineVxeComponent({
 
     const triggerEvent = (evnt: Event & { type: 'input' | 'change' | 'keydown' | 'keyup' | 'wheel' | 'click' | 'focus' | 'blur' }) => {
       const { inputValue } = reactData
-      numberInputMethods.dispatchEvent(evnt.type, { value: inputValue }, evnt)
+      dispatchEvent(evnt.type, { value: inputValue }, evnt)
     }
 
     const handleChange = (val: number | null, inputValue: string, evnt: Event | { type: string }) => {
@@ -389,9 +396,9 @@ export default defineVxeComponent({
           reactData.inputValue = inputValue || ''
         })
       }
-      numberInputMethods.dispatchEvent('input', { value }, evnt as Event)
+      dispatchEvent('input', { value }, evnt as Event)
       if (isChange) {
-        numberInputMethods.dispatchEvent('change', { value }, evnt as Event)
+        dispatchEvent('change', { value }, evnt as Event)
         // 自动更新校验状态
         if ($xeForm && formItemInfo) {
           $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value)
@@ -406,7 +413,7 @@ export default defineVxeComponent({
       if (inpImmediate) {
         handleChange(value, inputValue, evnt)
       } else {
-        numberInputMethods.dispatchEvent('input', { value }, evnt)
+        dispatchEvent('input', { value }, evnt)
         // 自动更新校验状态
         if ($xeForm && formItemInfo) {
           $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value)
@@ -425,7 +432,7 @@ export default defineVxeComponent({
       if (!inpImmediate) {
         triggerEvent(evnt)
       }
-      $xeNumberInput.dispatchEvent('lazy-change', { value: reactData.inputValue }, evnt)
+      dispatchEvent('lazy-change', { value: reactData.inputValue }, evnt)
     }
 
     const focusEvent = (evnt: Event & { type: 'focus' }) => {
@@ -443,22 +450,22 @@ export default 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: Event, value: VxeNumberInputPropTypes.ModelValue) => {
       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: Event) => {
       const isDisabled = computeIsDisabled.value
       if (!isDisabled) {
         const { inputValue } = reactData
-        numberInputMethods.dispatchEvent('suffix-click', { value: inputValue }, evnt)
+        dispatchEvent('suffix-click', { value: inputValue }, evnt)
       }
     }
 
@@ -563,7 +570,7 @@ export default 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)
@@ -596,10 +603,10 @@ export default 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: Event) => {
@@ -610,10 +617,10 @@ export default 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: KeyboardEvent) => {
@@ -809,13 +816,8 @@ export default defineVxeComponent({
       }
     }
 
-    const dispatchEvent = (type: ValueOf<VxeNumberInputEmits>, params: Record<string, any>, evnt: Event | null) => {
-      emit(type, createEvent(evnt, { $numberInput: $xeNumberInput }, params))
-    }
-
-    numberInputMethods = {
+    const numberInputMethods: NumberInputMethods = {
       dispatchEvent,
-
       focus () {
         const inputReadonly = computeInputReadonly.value
         if (!inputReadonly) {
@@ -919,13 +921,14 @@ export default 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'
@@ -936,10 +939,10 @@ export default 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,

package/packages/password-input/src/password-input.ts

@@ -1,11 +1,11 @@
-import { h, ref, Ref, computed, reactive, inject, nextTick, watch, PropType } from 'vue'
+import { h, ref, Ref, computed, reactive, inject, nextTick, watch, PropType, onMounted } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
 import { getConfig, getIcon, getI18n, createEvent, useSize, renderEmptyElement } from '../../ui'
-import { getFuncText } from '../../ui/src/utils'
+import { getFuncText, getText } from '../../ui/src/utils'
 import { getSlotVNs } from '../../ui/src/vn'
 
-import type { VxePasswordInputConstructor, VxePasswordInputEmits, PasswordInputReactData, PasswordInputMethods, VxePasswordInputPropTypes, InputPrivateRef, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines } from '../../../types'
+import type { VxePasswordInputConstructor, VxePasswordInputEmits, PasswordInputReactData, PasswordInputMethods, VxePasswordInputPropTypes, InputPrivateRef, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines, ValueOf } from '../../../types'
 
 export default defineVxeComponent({
   name: 'VxePasswordInput',
@@ -43,6 +43,10 @@ export default defineVxeComponent({
       type: Boolean as PropType<VxePasswordInputPropTypes.Controls>,
       default: () => getConfig().passwordInput.controls
     },
+    editable: {
+      type: Boolean as PropType<VxePasswordInputPropTypes.Editable>,
+      default: true
+    },
 
     // 已废弃
     autocomplete: String as PropType<VxePasswordInputPropTypes.Autocomplete>
@@ -91,17 +95,10 @@ export default defineVxeComponent({
       getRefMaps: () => refMaps
     } as unknown as VxePasswordInputConstructor
 
-    let passwordInputMethods = {} as PasswordInputMethods
-
     const computeIsClearable = computed(() => {
       return props.clearable
     })
 
-    const computeInpReadonly = computed(() => {
-      const { readonly } = props
-      return readonly
-    })
-
     const computeInpPlaceholder = computed(() => {
       const { placeholder } = props
       if (placeholder) {
@@ -114,6 +111,34 @@ export default defineVxeComponent({
       return getI18n('vxe.base.pleaseInput')
     })
 
+    const computeFormReadonly = 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 = 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) {
@@ -127,9 +152,32 @@ export default defineVxeComponent({
       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: ValueOf<VxePasswordInputEmits>, params: Record<string, any>, evnt: Event | null) => {
+      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: Event & { type: 'input' | 'change' | 'click' | 'focus' | 'blur' }) => {
       const { inputValue } = reactData
-      passwordInputMethods.dispatchEvent(evnt.type, { value: inputValue }, evnt)
+      dispatchEvent(evnt.type, { value: inputValue }, evnt)
     }
 
     const emitInputEvent = (value: any, evnt: Event) => {
@@ -138,7 +186,7 @@ export default defineVxeComponent({
       if (inpImmediate) {
         handleChange(value, evnt)
       } else {
-        passwordInputMethods.dispatchEvent('input', { value }, evnt)
+        dispatchEvent('input', { value }, evnt)
       }
     }
 
@@ -151,9 +199,9 @@ export default defineVxeComponent({
     const handleChange = (value: string, evnt: Event | { type: string }) => {
       reactData.inputValue = value
       emit('update:modelValue', value)
-      passwordInputMethods.dispatchEvent('input', { value }, evnt as any)
+      dispatchEvent('input', { value }, evnt as any)
       if (XEUtils.toValueString(props.modelValue) !== value) {
-        passwordInputMethods.dispatchEvent('change', { value }, evnt as any)
+        dispatchEvent('change', { value }, evnt as any)
         // 自动更新校验状态
         if ($xeForm && formItemInfo) {
           $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value)
@@ -163,7 +211,7 @@ export default defineVxeComponent({
 
     const changeEvent = (evnt: Event & { type: 'change' }) => {
       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)
@@ -179,7 +227,7 @@ export default 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)
@@ -187,12 +235,13 @@ export default defineVxeComponent({
     }
 
     const passwordToggleEvent = (evnt: Event) => {
-      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: Event & { type: 'click' }) => {
@@ -202,26 +251,50 @@ export default defineVxeComponent({
     const clearValueEvent = (evnt: Event, value: VxePasswordInputPropTypes.ModelValue) => {
       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: Event) => {
-      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: Event) => {
-      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: 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', {
@@ -256,14 +329,15 @@ export default defineVxeComponent({
     }
 
     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
@@ -293,45 +367,22 @@ export default 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', {
@@ -341,9 +392,9 @@ export default 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
       }, [
@@ -354,12 +405,11 @@ export default 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,
@@ -373,6 +423,28 @@ export default defineVxeComponent({
       ])
     }
 
+    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

package/packages/textarea/src/textarea.ts

@@ -1,11 +1,11 @@
-import { h, ref, Ref, computed, nextTick, watch, PropType, reactive, inject } from 'vue'
+import { h, ref, Ref, computed, nextTick, watch, PropType, reactive, inject, onMounted } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
 import { getConfig, getI18n, createEvent, useSize } from '../../ui'
 import { getFuncText } from '../../ui/src/utils'
 import { createComponentLog } from '../../ui/src/log'
 
-import type { VxeTextareaPropTypes, TextareaReactData, TextareaMethods, VxeTextareaConstructor, VxeTextareaEmits, TextareaPrivateRef, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines } from '../../../types'
+import type { VxeTextareaPropTypes, TextareaReactData, TextareaMethods, VxeTextareaConstructor, VxeTextareaEmits, TextareaPrivateRef, VxeFormConstructor, VxeFormPrivateMethods, VxeFormDefines, ValueOf } from '../../../types'
 
 const { warnLog } = createComponentLog('textarea')
 
@@ -118,8 +118,6 @@ export default defineVxeComponent({
       getRefMaps: () => refMaps
     } as unknown as VxeTextareaConstructor
 
-    let textareaMethods = {} as TextareaMethods
-
     const computeFormReadonly = computed(() => {
       const { readonly } = props
       if (readonly === null) {
@@ -182,6 +180,23 @@ export default defineVxeComponent({
       return Object.assign({ minRows: 1, maxRows: 10 }, getConfig().textarea.autoSize, autoSize)
     })
 
+    const computeDomValue = computed(() => {
+      const { inputValue } = reactData
+      return inputValue
+    })
+
+    const dispatchEvent = (type: ValueOf<VxeTextareaEmits>, params: Record<string, any>, evnt: Event | null) => {
+      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
@@ -243,7 +258,7 @@ export default defineVxeComponent({
 
     const triggerEvent = (evnt: Event & { type: 'focus' | 'blur' | 'change' }) => {
       const value = reactData.inputValue
-      $xeTextarea.dispatchEvent(evnt.type, { value }, evnt)
+      dispatchEvent(evnt.type, { value }, evnt)
     }
 
     const handleChange = (value: string, evnt: Event) => {
@@ -274,7 +289,7 @@ export default defineVxeComponent({
           $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value)
         }
       }
-      $xeTextarea.dispatchEvent('input', { value }, evnt)
+      dispatchEvent('input', { value }, evnt)
       handleResize()
     }
 
@@ -285,7 +300,7 @@ export default defineVxeComponent({
       } else {
         handleChange(reactData.inputValue, evnt)
       }
-      $xeTextarea.dispatchEvent('lazy-change', { value: reactData.inputValue }, evnt)
+      dispatchEvent('lazy-change', { value: reactData.inputValue }, evnt)
     }
 
     const blurEvent = (evnt: Event & { type: 'blur' }) => {
@@ -294,20 +309,16 @@ export default 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: TextareaMethods = {
+      dispatchEvent,
       focus () {
         const textElem = refTextarea.value
         textElem.focus()
         return nextTick()
       },
-
       blur () {
         const textElem = refTextarea.value
         textElem.blur()
@@ -354,7 +365,6 @@ export default defineVxeComponent({
         h('textarea', {
           ref: refTextarea,
           class: 'vxe-textarea--inner' + (inputClassName ? (' ' + inputClassName) : ''),
-          value: inputValue,
           name: props.name,
           placeholder: inpPlaceholder,
           maxlength: inpMaxLength,
@@ -408,6 +418,24 @@ export default defineVxeComponent({
       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) {

package/styles/components/password-input.scss

@@ -26,6 +26,10 @@
   }
 }
 
+.vxe-password-input--readonly {
+  color: var(--vxe-ui-font-color);
+  display: inline-flex;
+}
 .vxe-password-input--wrapper {
   flex-grow: 1;
   overflow: hidden;

package/types/components/password-input.d.ts

@@ -38,6 +38,7 @@ export namespace VxePasswordInputPropTypes {
   export type PrefixIcon = string
   export type SuffixIcon = string
   export type Controls = boolean
+  export type Editable = boolean
   /**
    * 请使用 AutoComplete
    * @deprecated
@@ -61,6 +62,7 @@ export interface VxePasswordInputProps {
   prefixIcon?: VxePasswordInputPropTypes.PrefixIcon
   suffixIcon?: VxePasswordInputPropTypes.SuffixIcon
   controls?: VxePasswordInputPropTypes.Controls
+  editable?: VxePasswordInputPropTypes.Editable
   /**
    * 请使用 AutoComplete
    * @deprecated