feat(design, form, form-schema, tdesign-vue-next-adapter): textarea支持rows配置

This commit is contained in:
roymondchen 2025-10-24 18:15:26 +08:00
parent b2474909cf
commit c7174726b3
5 changed files with 41 additions and 5 deletions

View File

@ -8,6 +8,7 @@
@input="inputHandler" @input="inputHandler"
@update:modelValue="updateModelValue" @update:modelValue="updateModelValue"
@blur="blurHandler" @blur="blurHandler"
@focus="focusHandler"
> >
<template #prepend v-if="$slots.prepend"> <template #prepend v-if="$slots.prepend">
<slot name="prepend"></slot> <slot name="prepend"></slot>
@ -42,7 +43,7 @@ const uiComponent = ui?.component || 'el-input';
const uiProps = computed<InputProps>(() => ui?.props(props) || props); const uiProps = computed<InputProps>(() => ui?.props(props) || props);
const emit = defineEmits(['change', 'input', 'blur', 'update:modelValue']); const emit = defineEmits(['change', 'input', 'blur', 'focus', 'update:modelValue']);
const instance = ref<any>(); const instance = ref<any>();
@ -62,6 +63,10 @@ const blurHandler = (...args: any[]) => {
emit('blur', ...args); emit('blur', ...args);
}; };
const focusHandler = (...args: any[]) => {
emit('focus', ...args);
};
defineExpose({ defineExpose({
instance, instance,
getInput() { getInput() {

View File

@ -194,7 +194,6 @@ export interface InputProps {
rows?: number; rows?: number;
type?: string; type?: string;
size?: FieldSize; size?: FieldSize;
row?: number;
} }
export interface InputNumberProps { export interface InputNumberProps {

View File

@ -373,6 +373,7 @@ export interface TextConfig extends FormItem, Input {
export interface TextareaConfig extends FormItem { export interface TextareaConfig extends FormItem {
type: 'textarea'; type: 'textarea';
placeholder?: string; placeholder?: string;
rows?: number;
} }
/** /**

View File

@ -6,6 +6,7 @@
clearable clearable
:placeholder="config.placeholder" :placeholder="config.placeholder"
:disabled="disabled" :disabled="disabled"
:rows="config.rows"
@update:model-value="changeHandler" @update:model-value="changeHandler"
@input="inputHandler" @input="inputHandler"
> >

View File

@ -1,13 +1,17 @@
<template> <template>
<TTextarea <TTextarea
v-if="type === 'textarea'" v-if="type === 'textarea'"
ref="textarea"
:modelValue="modelValue" :modelValue="modelValue"
:size="size === 'default' ? 'medium' : size" :size="size === 'default' ? 'medium' : size"
:disabled="disabled" :disabled="disabled"
:placeholder="placeholder" :placeholder="placeholder"
:row="row" :rows="rows"
@keypress="inputHandler" @keypress="inputHandler"
@change="changeHandler" @change="changeHandler"
@blur="blurHandler"
@focus="focusHandler"
@update:modelValue="updateModelValue"
></TTextarea> ></TTextarea>
<TInputAdornment v-else> <TInputAdornment v-else>
<template #prepend v-if="$slots.prepend"> <template #prepend v-if="$slots.prepend">
@ -24,6 +28,8 @@
:placeholder="placeholder" :placeholder="placeholder"
@keypress="inputHandler" @keypress="inputHandler"
@change="changeHandler" @change="changeHandler"
@blur="blurHandler"
@focus="focusHandler"
@update:modelValue="updateModelValue" @update:modelValue="updateModelValue"
> >
<template #prefix-icon v-if="$slots.prefix"> <template #prefix-icon v-if="$slots.prefix">
@ -37,6 +43,7 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { useTemplateRef, watch } from 'vue';
import { Input as TInput, InputAdornment as TInputAdornment, Textarea as TTextarea } from 'tdesign-vue-next'; import { Input as TInput, InputAdornment as TInputAdornment, Textarea as TTextarea } from 'tdesign-vue-next';
import type { InputProps } from '@tmagic/design'; import type { InputProps } from '@tmagic/design';
@ -45,13 +52,28 @@ defineOptions({
name: 'TTDesignAdapterInput', name: 'TTDesignAdapterInput',
}); });
defineProps< const props = defineProps<
InputProps & { InputProps & {
modelValue: string; modelValue: string;
} }
>(); >();
const emit = defineEmits(['change', 'input', 'update:modelValue']); const emit = defineEmits(['change', 'input', 'blur', 'focus', 'update:modelValue']);
const textareaRef = useTemplateRef('textarea');
watch(
[textareaRef, () => props.rows],
([val, rows]) => {
if (val && rows) {
const el = val.$el.querySelector('textarea');
if (el) {
el.rows = rows;
}
}
},
{ immediate: true },
);
const changeHandler = (...args: any[]) => { const changeHandler = (...args: any[]) => {
emit('change', ...args); emit('change', ...args);
@ -61,6 +83,14 @@ const inputHandler = (...args: any[]) => {
emit('input', ...args); emit('input', ...args);
}; };
const blurHandler = (...args: any[]) => {
emit('blur', ...args);
};
const focusHandler = (...args: any[]) => {
emit('focus', ...args);
};
const updateModelValue = (...args: any[]) => { const updateModelValue = (...args: any[]) => {
emit('update:modelValue', ...args); emit('update:modelValue', ...args);
}; };