diff --git a/examples/views/textarea/Textarea.vue b/examples/views/textarea/Textarea.vue index 252e3a8c0..f88c556d0 100644 --- a/examples/views/textarea/Textarea.vue +++ b/examples/views/textarea/Textarea.vue @@ -16,6 +16,11 @@ + + + + +

@@ -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({
           
           
           
+          
+          
+          
+          
+          
         

`, ` @@ -83,7 +98,12 @@ export default defineComponent({ value6: '', value7: '', value8: '', - value9: '' + value9: '', + value10: '', + value11: '', + value12: '', + value13: '', + value14: '' }) return { demo1 diff --git a/packages/textarea/src/textarea.ts b/packages/textarea/src/textarea.ts index 194dd5c14..40220e7be 100644 --- a/packages/textarea/src/textarea.ts +++ b/packages/textarea/src/textarea.ts @@ -20,6 +20,7 @@ export default defineComponent({ placeholder: String as PropType, maxlength: [String, Number] as PropType, rows: { type: [String, Number] as PropType, default: 2 }, + cols: { type: [String, Number] as PropType, default: null }, showWordCount: Boolean as PropType, countMethod: Function as PropType, autosize: [Boolean, Object] as PropType, @@ -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, diff --git a/styles/textarea.scss b/styles/textarea.scss index 232f848a5..780e519b9 100644 --- a/styles/textarea.scss +++ b/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; diff --git a/types/textarea.d.ts b/types/textarea.d.ts index e7ce93c30..0b755667b 100644 --- a/types/textarea.d.ts +++ b/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;