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;