fix textarea rows cols

examples/views/textarea/Textarea.vue

@@ -16,6 +16,11 @@
       <vxe-textarea v-model="demo1.value7" placeholder="禁用的" disabled></vxe-textarea>
       <vxe-textarea v-model="demo1.value8" placeholder="显示字数统计" maxlength="100" show-word-count></vxe-textarea>
       <vxe-textarea v-model="demo1.value9" placeholder="自适应文本高度" :autosize="{ minRows: 2, maxRows: 4 }"></vxe-textarea>
+      <vxe-textarea v-model="demo1.value10" placeholder="默认3行与40列" rows="3" cols="40"></vxe-textarea>
+      <vxe-textarea v-model="demo1.value11" placeholder="关闭调节元素" resize="none"></vxe-textarea>
+      <vxe-textarea v-model="demo1.value12" placeholder="可以调节元素的高度" resize="vertical"></vxe-textarea>
+      <vxe-textarea v-model="demo1.value13" placeholder="以调节元素的宽度" resize="horizontal"></vxe-textarea>
+      <vxe-textarea v-model="demo1.value14" placeholder="可以调节元素的宽度和高度" resize="both"></vxe-textarea>
     </p>
 
     <pre>
@@ -48,7 +53,12 @@ export default defineComponent({
       value6: '',
       value7: '',
       value8: '',
-      value9: ''
+      value9: '',
+      value10: '',
+      value11: '',
+      value12: '',
+      value13: '',
+      value14: ''
     })
     return {
       demo1,
@@ -67,6 +77,11 @@ export default defineComponent({
           <vxe-textarea v-model="demo1.value7" placeholder="禁用的" disabled></vxe-textarea>
           <vxe-textarea v-model="demo1.value8" placeholder="显示字数统计" maxlength="100" show-word-count></vxe-textarea>
           <vxe-textarea v-model="demo1.value9" placeholder="自适应文本高度" :autosize="{ minRows: 2, maxRows: 4 }"></vxe-textarea>
+          <vxe-textarea v-model="demo1.value10" placeholder="默认3行与40列" rows="3" cols="40"></vxe-textarea>
+          <vxe-textarea v-model="demo1.value11" placeholder="关闭调节元素" resize="none"></vxe-textarea>
+          <vxe-textarea v-model="demo1.value12" placeholder="可以调节元素的高度" resize="vertical"></vxe-textarea>
+          <vxe-textarea v-model="demo1.value13" placeholder="以调节元素的宽度" resize="horizontal"></vxe-textarea>
+          <vxe-textarea v-model="demo1.value14" placeholder="可以调节元素的宽度和高度" resize="both"></vxe-textarea>
         </p>
         `,
         `
@@ -83,7 +98,12 @@ export default defineComponent({
               value6: '',
               value7: '',
               value8: '',
-              value9: ''
+              value9: '',
+              value10: '',
+              value11: '',
+              value12: '',
+              value13: '',
+              value14: ''
             })
             return {
               demo1

packages/textarea/src/textarea.ts

@@ -20,6 +20,7 @@ export default defineComponent({
     placeholder: String as PropType<VxeTextareaPropTypes.Placeholder>,
     maxlength: [String, Number] as PropType<VxeTextareaPropTypes.Maxlength>,
     rows: { type: [String, Number] as PropType<VxeTextareaPropTypes.Rows>, default: 2 },
+    cols: { type: [String, Number] as PropType<VxeTextareaPropTypes.Cols>, default: null },
     showWordCount: Boolean as PropType<VxeTextareaPropTypes.ShowWordCount>,
     countMethod: Function as PropType<VxeTextareaPropTypes.CountMethod>,
     autosize: [Boolean, Object] as PropType<VxeTextareaPropTypes.Autosize>,
@@ -202,7 +203,7 @@ export default defineComponent({
     })
 
     const renderVN = () => {
-      const { className, resize, placeholder, disabled, maxlength, autosize, showWordCount, countMethod } = props
+      const { className, resize, placeholder, disabled, maxlength, autosize, showWordCount, countMethod, rows, cols } = props
       const { inputValue } = reactData
       const vSize = computeSize.value
       const isCountError = computeIsCountError.value
@@ -212,7 +213,9 @@ export default defineComponent({
         class: ['vxe-textarea', className, {
           [`size--${vSize}`]: vSize,
           'is--autosize': autosize,
-          'is--disabled': disabled
+          'is--disabled': disabled,
+          'def--rows': !XEUtils.eqNull(rows),
+          'def--cols': !XEUtils.eqNull(cols)
         }]
       }, [
         h('textarea', {
@@ -224,6 +227,8 @@ export default defineComponent({
           maxlength,
           readonly: props.readonly,
           disabled,
+          rows,
+          cols,
           style: resize ? {
             resize
           } : null,

styles/textarea.scss

@@ -3,7 +3,12 @@
 .vxe-textarea {
   position: relative;
   display: inline-block;
-  width: 100%;
+  &:not(.def--cols) {
+    width: 100%;
+    .vxe-textarea--inner {
+      width: 100%;
+    }
+  }
 }
 
 .vxe-textarea--inner {
@@ -15,6 +20,11 @@
   line-height: inherit;
   border: 1px solid $vxe-input-border-color;
   background-color: $vxe-textarea-background-color;
+  display: block;
+  padding: 0.3em 0.6em;
+  &::placeholder {
+    color: $vxe-input-placeholder-color;
+  }
   &:focus {
     border: 1px solid $vxe-primary-color;
   }
@@ -24,16 +34,6 @@
   }
 }
 
-.vxe-textarea--inner {
-  width: 100%;
-  height: 100%;
-  display: block;
-  padding: 0.3em 0.6em;
-  &::placeholder {
-    color: $vxe-input-placeholder-color;
-  }
-}
-
 .vxe-textarea--inner,
 .vxe-textarea--autosize {
   line-height: $vxe-textarea-line-height;

types/textarea.d.ts

@@ -59,6 +59,10 @@ export type VxeTextareaProps = {
    * 原生 rows 属性
    */
   rows?: VxeTextareaPropTypes.Rows;
+  /**
+   * 原生 cols 属性
+   */
+  cols?: VxeTextareaPropTypes.Cols;
   /**
    * 是否显示字数统计
    */
@@ -92,6 +96,7 @@ export namespace VxeTextareaPropTypes {
   export type Placeholder = string;
   export type Maxlength = string | number;
   export type Rows = string | number;
+  export type Cols = string | number;
   export type ShowWordCount = boolean;
   export type CountMethod = (params: {
     value: string;