vxe-pc-ui 4.14.24 → 4.14.26

package/es/textarea/src/textarea.js

@@ -3,6 +3,7 @@ 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 { warnLog } from '../../ui/src/log';
 let autoTxtElem;
 export default defineVxeComponent({
     name: 'VxeTextarea',
@@ -42,7 +43,18 @@ export default defineVxeComponent({
         },
         showWordCount: Boolean,
         countMethod: Function,
-        autosize: [Boolean, Object],
+        /**
+         * 已废弃，被 auto-size 替换
+         * @deprecated
+         */
+        autosize: {
+            type: [Boolean, Object],
+            default: null
+        },
+        autoSize: {
+            type: [Boolean, Object],
+            default: null
+        },
         form: String,
         resize: {
             type: String,
@@ -77,6 +89,7 @@ export default defineVxeComponent({
         });
         const refElem = ref();
         const refTextarea = ref();
+        const refContent = ref();
         const refMaps = {
             refElem,
             refTextarea
@@ -137,19 +150,26 @@ export default defineVxeComponent({
             return inpMaxLength && inputCount > XEUtils.toNumber(inpMaxLength);
         });
         const computeSizeOpts = computed(() => {
-            return Object.assign({ minRows: 1, maxRows: 10 }, getConfig().textarea.autosize, props.autosize);
+            const { autosize, autoSize } = props;
+            if (autosize || getConfig().textarea.autosize) {
+                return Object.assign({ minRows: 1, maxRows: 10 }, getConfig().textarea.autosize, autosize);
+            }
+            return Object.assign({ minRows: 1, maxRows: 10 }, getConfig().textarea.autoSize, autoSize);
         });
         const updateAutoTxt = () => {
-            const { size, autosize } = props;
+            const { size, autosize, autoSize } = props;
             const { inputValue } = reactData;
-            if (autosize) {
+            if (autosize || autoSize) {
+                const formReadonly = computeFormReadonly.value;
                 if (!autoTxtElem) {
                     autoTxtElem = document.createElement('div');
                 }
                 if (!autoTxtElem.parentNode) {
                     document.body.appendChild(autoTxtElem);
                 }
-                const textElem = refTextarea.value;
+                const taElem = refTextarea.value;
+                const ctElem = refContent.value;
+                const textElem = formReadonly ? ctElem : taElem;
                 if (!textElem) {
                     return;
                 }
@@ -161,11 +181,15 @@ export default defineVxeComponent({
             }
         };
         const handleResize = () => {
-            if (props.autosize) {
+            const { autosize, autoSize } = props;
+            if (autosize || autoSize) {
                 nextTick(() => {
                     const sizeOpts = computeSizeOpts.value;
+                    const formReadonly = computeFormReadonly.value;
                     const { minRows, maxRows } = sizeOpts;
-                    const textElem = refTextarea.value;
+                    const taElem = refTextarea.value;
+                    const ctElem = refContent.value;
+                    const textElem = formReadonly ? ctElem : taElem;
                     if (!textElem) {
                         return;
                     }
@@ -253,23 +277,8 @@ export default defineVxeComponent({
             }
         };
         Object.assign($xeTextarea, textareaMethods);
-        watch(() => props.modelValue, (val) => {
-            reactData.inputValue = val;
-            updateAutoTxt();
-        });
-        watch(computeSizeOpts, () => {
-            updateAutoTxt();
-            handleResize();
-        });
-        nextTick(() => {
-            const { autosize } = props;
-            if (autosize) {
-                updateAutoTxt();
-                handleResize();
-            }
-        });
         const renderVN = () => {
-            const { className, resize, autosize, showWordCount, countMethod, rows, cols } = props;
+            const { className, resize, autosize, autoSize, showWordCount, countMethod, rows, cols } = props;
             const { inputValue } = reactData;
             const vSize = computeSize.value;
             const isDisabled = computeIsDisabled.value;
@@ -283,13 +292,18 @@ export default defineVxeComponent({
                 return h('div', {
                     ref: refElem,
                     class: ['vxe-textarea--readonly', className]
-                }, inputValue);
+                }, [
+                    h('div', {
+                        ref: refContent,
+                        class: 'vxe-textarea--content'
+                    }, inputValue)
+                ]);
             }
             return h('div', {
                 ref: refElem,
                 class: ['vxe-textarea', className, {
                         [`size--${vSize}`]: vSize,
-                        'is--autosize': autosize,
+                        'is--autosize': autosize || autoSize,
                         'is--count': showWordCount,
                         'is--disabled': isDisabled,
                         'is--rows': !XEUtils.eqNull(rows),
@@ -330,6 +344,37 @@ export default defineVxeComponent({
                     : null
             ]);
         };
+        watch(() => props.modelValue, (val) => {
+            reactData.inputValue = val;
+            updateAutoTxt();
+        });
+        const reFlag = ref(0);
+        watch(computeFormReadonly, () => {
+            reFlag.value++;
+        });
+        watch(computeSizeOpts, () => {
+            reFlag.value++;
+        });
+        watch(() => props.autoSize, () => {
+            reFlag.value++;
+        });
+        watch(() => props.autosize, () => {
+            reFlag.value++;
+        });
+        watch(reFlag, () => {
+            updateAutoTxt();
+            handleResize();
+        });
+        nextTick(() => {
+            const { autosize, autoSize } = props;
+            if (autosize) {
+                warnLog('vxe.error.delProp', ['autosize', 'auto-size']);
+            }
+            if (autosize || autoSize) {
+                updateAutoTxt();
+                handleResize();
+            }
+        });
         $xeTextarea.renderVN = renderVN;
         return $xeTextarea;
     },

package/es/textarea/style.css

@@ -11,15 +11,21 @@
 }
 
 .vxe-textarea--readonly {
-  color: var(--vxe-ui-font-color);
-  display: inline-flex;
+  display: flex;
+}
+
+.vxe-textarea--content {
+  width: 100%;
+  padding: 0.3em 0.6em;
+  overflow: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
 }
 
 .vxe-textarea--inner {
   border-radius: var(--vxe-ui-base-border-radius);
   outline: 0;
   font-size: inherit;
-  padding: 0 0.6em;
   color: var(--vxe-ui-font-color);
   line-height: inherit;
   border: 1px solid var(--vxe-ui-input-border-color);
@@ -43,7 +49,8 @@
 }
 
 .vxe-textarea--inner,
-.vxe-textarea--autosize {
+.vxe-textarea--autosize,
+.vxe-textarea--content {
   line-height: 1.5715;
   color: var(--vxe-ui-font-color);
   font-family: var(--vxe-ui-font-family);

package/es/textarea/style.min.css

@@ -1 +1 @@
-.vxe-textarea{position:relative;display:inline-flex;flex-direction:row}.vxe-textarea:not(.is--cols){width:100%}.vxe-textarea:not(.is--cols) .vxe-textarea--inner{width:100%}.vxe-textarea--readonly{color:var(--vxe-ui-font-color);display:inline-flex}.vxe-textarea--inner{border-radius:var(--vxe-ui-base-border-radius);outline:0;font-size:inherit;padding:0 .6em;color:var(--vxe-ui-font-color);line-height:inherit;border:1px solid var(--vxe-ui-input-border-color);background-color:var(--vxe-ui-layout-background-color);display:block;padding:.3em .6em}.vxe-textarea--inner::-moz-placeholder{color:var(--vxe-ui-input-placeholder-color)}.vxe-textarea--inner::placeholder{color:var(--vxe-ui-input-placeholder-color)}.vxe-textarea--inner:focus{border:1px solid var(--vxe-ui-font-primary-color)}.vxe-textarea--inner[disabled]{cursor:not-allowed;color:var(--vxe-ui-font-disabled-color);background-color:var(--vxe-ui-input-disabled-background-color)}.vxe-textarea--autosize,.vxe-textarea--inner{line-height:1.5715;color:var(--vxe-ui-font-color);font-family:var(--vxe-ui-font-family)}.vxe-textarea--autosize{display:block;position:fixed;top:0;left:0;width:100%;margin:0;padding:.3em .6em;word-wrap:break-word;white-space:pre-wrap;z-index:-1;visibility:hidden}.vxe-textarea--count{position:absolute;bottom:.2em;right:1.4em;padding-left:.2em;color:var(--vxe-ui-input-count-color);background-color:var(--vxe-ui-layout-background-color)}.vxe-textarea--count.is--error{color:var(--vxe-ui-input-count-error-color)}.vxe-textarea,.vxe-textarea--autosize{font-size:var(--vxe-ui-font-size-default)}.vxe-textarea--autosize.size--medium,.vxe-textarea.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-textarea--autosize.size--small,.vxe-textarea.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-textarea--autosize.size--mini,.vxe-textarea.size--mini{font-size:var(--vxe-ui-font-size-mini)}.vxe-textarea:not(.is--autosize){min-height:var(--vxe-ui-input-height-default)}.vxe-textarea.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-textarea.size--medium:not(.is--autosize){min-height:var(--vxe-ui-input-height-medium)}.vxe-textarea.size--small:not(.is--autosize){min-height:var(--vxe-ui-input-height-small)}.vxe-textarea.size--mini:not(.is--autosize){min-height:var(--vxe-ui-input-height-mini)}
+.vxe-textarea{position:relative;display:inline-flex;flex-direction:row}.vxe-textarea:not(.is--cols){width:100%}.vxe-textarea:not(.is--cols) .vxe-textarea--inner{width:100%}.vxe-textarea--readonly{display:flex}.vxe-textarea--content{width:100%;padding:.3em .6em;overflow:auto;white-space:pre-wrap;word-break:break-word}.vxe-textarea--inner{border-radius:var(--vxe-ui-base-border-radius);outline:0;font-size:inherit;color:var(--vxe-ui-font-color);line-height:inherit;border:1px solid var(--vxe-ui-input-border-color);background-color:var(--vxe-ui-layout-background-color);display:block;padding:.3em .6em}.vxe-textarea--inner::-moz-placeholder{color:var(--vxe-ui-input-placeholder-color)}.vxe-textarea--inner::placeholder{color:var(--vxe-ui-input-placeholder-color)}.vxe-textarea--inner:focus{border:1px solid var(--vxe-ui-font-primary-color)}.vxe-textarea--inner[disabled]{cursor:not-allowed;color:var(--vxe-ui-font-disabled-color);background-color:var(--vxe-ui-input-disabled-background-color)}.vxe-textarea--autosize,.vxe-textarea--content,.vxe-textarea--inner{line-height:1.5715;color:var(--vxe-ui-font-color);font-family:var(--vxe-ui-font-family)}.vxe-textarea--autosize{display:block;position:fixed;top:0;left:0;width:100%;margin:0;padding:.3em .6em;word-wrap:break-word;white-space:pre-wrap;z-index:-1;visibility:hidden}.vxe-textarea--count{position:absolute;bottom:.2em;right:1.4em;padding-left:.2em;color:var(--vxe-ui-input-count-color);background-color:var(--vxe-ui-layout-background-color)}.vxe-textarea--count.is--error{color:var(--vxe-ui-input-count-error-color)}.vxe-textarea,.vxe-textarea--autosize{font-size:var(--vxe-ui-font-size-default)}.vxe-textarea--autosize.size--medium,.vxe-textarea.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-textarea--autosize.size--small,.vxe-textarea.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-textarea--autosize.size--mini,.vxe-textarea.size--mini{font-size:var(--vxe-ui-font-size-mini)}.vxe-textarea:not(.is--autosize){min-height:var(--vxe-ui-input-height-default)}.vxe-textarea.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-textarea.size--medium:not(.is--autosize){min-height:var(--vxe-ui-input-height-medium)}.vxe-textarea.size--small:not(.is--autosize){min-height:var(--vxe-ui-input-height-small)}.vxe-textarea.size--mini:not(.is--autosize){min-height:var(--vxe-ui-input-height-mini)}

package/es/ui/index.js

@@ -1,7 +1,7 @@
 import { VxeUI, setConfig, setIcon } from '@vxe-ui/core';
 import { dynamicApp } from '../dynamics';
 import { warnLog } from './src/log';
-export const version = "4.14.24";
+export const version = "4.14.26";
 VxeUI.uiVersion = version;
 VxeUI.dynamicApp = dynamicApp;
 export function config(options) {

package/es/ui/src/log.js

@@ -1,4 +1,4 @@
 import { log } from '@vxe-ui/core';
-const version = `ui v${"4.14.24"}`;
+const version = `ui v${"4.14.26"}`;
 export const warnLog = log.create('warn', version);
 export const errLog = log.create('error', version);

package/es/vxe-textarea/style.css

@@ -11,15 +11,21 @@
 }
 
 .vxe-textarea--readonly {
-  color: var(--vxe-ui-font-color);
-  display: inline-flex;
+  display: flex;
+}
+
+.vxe-textarea--content {
+  width: 100%;
+  padding: 0.3em 0.6em;
+  overflow: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
 }
 
 .vxe-textarea--inner {
   border-radius: var(--vxe-ui-base-border-radius);
   outline: 0;
   font-size: inherit;
-  padding: 0 0.6em;
   color: var(--vxe-ui-font-color);
   line-height: inherit;
   border: 1px solid var(--vxe-ui-input-border-color);
@@ -43,7 +49,8 @@
 }
 
 .vxe-textarea--inner,
-.vxe-textarea--autosize {
+.vxe-textarea--autosize,
+.vxe-textarea--content {
   line-height: 1.5715;
   color: var(--vxe-ui-font-color);
   font-family: var(--vxe-ui-font-family);

package/es/vxe-textarea/style.min.css

@@ -1 +1 @@
-.vxe-textarea{position:relative;display:inline-flex;flex-direction:row}.vxe-textarea:not(.is--cols){width:100%}.vxe-textarea:not(.is--cols) .vxe-textarea--inner{width:100%}.vxe-textarea--readonly{color:var(--vxe-ui-font-color);display:inline-flex}.vxe-textarea--inner{border-radius:var(--vxe-ui-base-border-radius);outline:0;font-size:inherit;padding:0 .6em;color:var(--vxe-ui-font-color);line-height:inherit;border:1px solid var(--vxe-ui-input-border-color);background-color:var(--vxe-ui-layout-background-color);display:block;padding:.3em .6em}.vxe-textarea--inner::-moz-placeholder{color:var(--vxe-ui-input-placeholder-color)}.vxe-textarea--inner::placeholder{color:var(--vxe-ui-input-placeholder-color)}.vxe-textarea--inner:focus{border:1px solid var(--vxe-ui-font-primary-color)}.vxe-textarea--inner[disabled]{cursor:not-allowed;color:var(--vxe-ui-font-disabled-color);background-color:var(--vxe-ui-input-disabled-background-color)}.vxe-textarea--autosize,.vxe-textarea--inner{line-height:1.5715;color:var(--vxe-ui-font-color);font-family:var(--vxe-ui-font-family)}.vxe-textarea--autosize{display:block;position:fixed;top:0;left:0;width:100%;margin:0;padding:.3em .6em;word-wrap:break-word;white-space:pre-wrap;z-index:-1;visibility:hidden}.vxe-textarea--count{position:absolute;bottom:.2em;right:1.4em;padding-left:.2em;color:var(--vxe-ui-input-count-color);background-color:var(--vxe-ui-layout-background-color)}.vxe-textarea--count.is--error{color:var(--vxe-ui-input-count-error-color)}.vxe-textarea,.vxe-textarea--autosize{font-size:var(--vxe-ui-font-size-default)}.vxe-textarea--autosize.size--medium,.vxe-textarea.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-textarea--autosize.size--small,.vxe-textarea.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-textarea--autosize.size--mini,.vxe-textarea.size--mini{font-size:var(--vxe-ui-font-size-mini)}.vxe-textarea:not(.is--autosize){min-height:var(--vxe-ui-input-height-default)}.vxe-textarea.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-textarea.size--medium:not(.is--autosize){min-height:var(--vxe-ui-input-height-medium)}.vxe-textarea.size--small:not(.is--autosize){min-height:var(--vxe-ui-input-height-small)}.vxe-textarea.size--mini:not(.is--autosize){min-height:var(--vxe-ui-input-height-mini)}
+.vxe-textarea{position:relative;display:inline-flex;flex-direction:row}.vxe-textarea:not(.is--cols){width:100%}.vxe-textarea:not(.is--cols) .vxe-textarea--inner{width:100%}.vxe-textarea--readonly{display:flex}.vxe-textarea--content{width:100%;padding:.3em .6em;overflow:auto;white-space:pre-wrap;word-break:break-word}.vxe-textarea--inner{border-radius:var(--vxe-ui-base-border-radius);outline:0;font-size:inherit;color:var(--vxe-ui-font-color);line-height:inherit;border:1px solid var(--vxe-ui-input-border-color);background-color:var(--vxe-ui-layout-background-color);display:block;padding:.3em .6em}.vxe-textarea--inner::-moz-placeholder{color:var(--vxe-ui-input-placeholder-color)}.vxe-textarea--inner::placeholder{color:var(--vxe-ui-input-placeholder-color)}.vxe-textarea--inner:focus{border:1px solid var(--vxe-ui-font-primary-color)}.vxe-textarea--inner[disabled]{cursor:not-allowed;color:var(--vxe-ui-font-disabled-color);background-color:var(--vxe-ui-input-disabled-background-color)}.vxe-textarea--autosize,.vxe-textarea--content,.vxe-textarea--inner{line-height:1.5715;color:var(--vxe-ui-font-color);font-family:var(--vxe-ui-font-family)}.vxe-textarea--autosize{display:block;position:fixed;top:0;left:0;width:100%;margin:0;padding:.3em .6em;word-wrap:break-word;white-space:pre-wrap;z-index:-1;visibility:hidden}.vxe-textarea--count{position:absolute;bottom:.2em;right:1.4em;padding-left:.2em;color:var(--vxe-ui-input-count-color);background-color:var(--vxe-ui-layout-background-color)}.vxe-textarea--count.is--error{color:var(--vxe-ui-input-count-error-color)}.vxe-textarea,.vxe-textarea--autosize{font-size:var(--vxe-ui-font-size-default)}.vxe-textarea--autosize.size--medium,.vxe-textarea.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-textarea--autosize.size--small,.vxe-textarea.size--small{font-size:var(--vxe-ui-font-size-small)}.vxe-textarea--autosize.size--mini,.vxe-textarea.size--mini{font-size:var(--vxe-ui-font-size-mini)}.vxe-textarea:not(.is--autosize){min-height:var(--vxe-ui-input-height-default)}.vxe-textarea.size--medium{font-size:var(--vxe-ui-font-size-medium)}.vxe-textarea.size--medium:not(.is--autosize){min-height:var(--vxe-ui-input-height-medium)}.vxe-textarea.size--small:not(.is--autosize){min-height:var(--vxe-ui-input-height-small)}.vxe-textarea.size--mini:not(.is--autosize){min-height:var(--vxe-ui-input-height-mini)}

package/lib/index.umd.js

@@ -4646,7 +4646,7 @@ function checkDynamic() {
 }
 ;// ./packages/ui/src/log.ts
 
-const log_version = `ui v${"4.14.24"}`;
+const log_version = `ui v${"4.14.26"}`;
 const warnLog = log.create('warn', log_version);
 const errLog = log.create('error', log_version);
 ;// ./packages/ui/index.ts
@@ -4654,7 +4654,7 @@ const errLog = log.create('error', log_version);
 
 
 
-const ui_version = "4.14.24";
+const ui_version = "4.14.26";
 VxeUI.uiVersion = ui_version;
 VxeUI.dynamicApp = dynamicApp;
 function config(options) {
@@ -43429,6 +43429,7 @@ const Text = VxeText;
 
 
 
+
 let autoTxtElem;
 /* harmony default export */ var src_textarea = (defineVxeComponent({
   name: 'VxeTextarea',
@@ -43468,7 +43469,18 @@ let autoTxtElem;
     },
     showWordCount: Boolean,
     countMethod: Function,
-    autosize: [Boolean, Object],
+    /**
+     * 已废弃，被 auto-size 替换
+     * @deprecated
+     */
+    autosize: {
+      type: [Boolean, Object],
+      default: null
+    },
+    autoSize: {
+      type: [Boolean, Object],
+      default: null
+    },
     form: String,
     resize: {
       type: String,
@@ -43497,6 +43509,7 @@ let autoTxtElem;
     });
     const refElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refTextarea = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const refContent = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refMaps = {
       refElem,
       refTextarea
@@ -43569,27 +43582,41 @@ let autoTxtElem;
       return inpMaxLength && inputCount > external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(inpMaxLength);
     });
     const computeSizeOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        autosize,
+        autoSize
+      } = props;
+      if (autosize || getConfig().textarea.autosize) {
+        return Object.assign({
+          minRows: 1,
+          maxRows: 10
+        }, getConfig().textarea.autosize, autosize);
+      }
       return Object.assign({
         minRows: 1,
         maxRows: 10
-      }, getConfig().textarea.autosize, props.autosize);
+      }, getConfig().textarea.autoSize, autoSize);
     });
     const updateAutoTxt = () => {
       const {
         size,
-        autosize
+        autosize,
+        autoSize
       } = props;
       const {
         inputValue
       } = reactData;
-      if (autosize) {
+      if (autosize || autoSize) {
+        const formReadonly = computeFormReadonly.value;
         if (!autoTxtElem) {
           autoTxtElem = document.createElement('div');
         }
         if (!autoTxtElem.parentNode) {
           document.body.appendChild(autoTxtElem);
         }
-        const textElem = refTextarea.value;
+        const taElem = refTextarea.value;
+        const ctElem = refContent.value;
+        const textElem = formReadonly ? ctElem : taElem;
         if (!textElem) {
           return;
         }
@@ -43601,14 +43628,21 @@ let autoTxtElem;
       }
     };
     const handleResize = () => {
-      if (props.autosize) {
+      const {
+        autosize,
+        autoSize
+      } = props;
+      if (autosize || autoSize) {
         (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
           const sizeOpts = computeSizeOpts.value;
+          const formReadonly = computeFormReadonly.value;
           const {
             minRows,
             maxRows
           } = sizeOpts;
-          const textElem = refTextarea.value;
+          const taElem = refTextarea.value;
+          const ctElem = refContent.value;
+          const textElem = formReadonly ? ctElem : taElem;
           if (!textElem) {
             return;
           }
@@ -43714,28 +43748,12 @@ let autoTxtElem;
       }
     };
     Object.assign($xeTextarea, textareaMethods);
-    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.modelValue, val => {
-      reactData.inputValue = val;
-      updateAutoTxt();
-    });
-    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeSizeOpts, () => {
-      updateAutoTxt();
-      handleResize();
-    });
-    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
-      const {
-        autosize
-      } = props;
-      if (autosize) {
-        updateAutoTxt();
-        handleResize();
-      }
-    });
     const renderVN = () => {
       const {
         className,
         resize,
         autosize,
+        autoSize,
         showWordCount,
         countMethod,
         rows,
@@ -43756,13 +43774,16 @@ let autoTxtElem;
         return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
           ref: refElem,
           class: ['vxe-textarea--readonly', className]
-        }, inputValue);
+        }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+          ref: refContent,
+          class: 'vxe-textarea--content'
+        }, inputValue)]);
       }
       return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         ref: refElem,
         class: ['vxe-textarea', className, {
           [`size--${vSize}`]: vSize,
-          'is--autosize': autosize,
+          'is--autosize': autosize || autoSize,
           'is--count': showWordCount,
           'is--disabled': isDisabled,
           'is--rows': !external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eqNull(rows),
@@ -43798,6 +43819,40 @@ let autoTxtElem;
         value: inputValue
       })}` : `${inputCount}${inpMaxLength ? `/${inpMaxLength}` : ''}`) : null]);
     };
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.modelValue, val => {
+      reactData.inputValue = val;
+      updateAutoTxt();
+    });
+    const reFlag = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(0);
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeFormReadonly, () => {
+      reFlag.value++;
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeSizeOpts, () => {
+      reFlag.value++;
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.autoSize, () => {
+      reFlag.value++;
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.autosize, () => {
+      reFlag.value++;
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(reFlag, () => {
+      updateAutoTxt();
+      handleResize();
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
+      const {
+        autosize,
+        autoSize
+      } = props;
+      if (autosize) {
+        warnLog('vxe.error.delProp', ['autosize', 'auto-size']);
+      }
+      if (autosize || autoSize) {
+        updateAutoTxt();
+        handleResize();
+      }
+    });
     $xeTextarea.renderVN = renderVN;
     return $xeTextarea;
   },