mirror of
https://github.com/Tencent/tmagic-editor.git
synced 2025-11-29 22:12:11 +08:00
feat(design, form, form-schema, tdesign-vue-next-adapter): textarea支持rows配置
This commit is contained in:
parent
b2474909cf
commit
c7174726b3
@ -8,6 +8,7 @@
|
||||
@input="inputHandler"
|
||||
@update:modelValue="updateModelValue"
|
||||
@blur="blurHandler"
|
||||
@focus="focusHandler"
|
||||
>
|
||||
<template #prepend v-if="$slots.prepend">
|
||||
<slot name="prepend"></slot>
|
||||
@ -42,7 +43,7 @@ const uiComponent = ui?.component || 'el-input';
|
||||
|
||||
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>();
|
||||
|
||||
@ -62,6 +63,10 @@ const blurHandler = (...args: any[]) => {
|
||||
emit('blur', ...args);
|
||||
};
|
||||
|
||||
const focusHandler = (...args: any[]) => {
|
||||
emit('focus', ...args);
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
instance,
|
||||
getInput() {
|
||||
|
||||
@ -194,7 +194,6 @@ export interface InputProps {
|
||||
rows?: number;
|
||||
type?: string;
|
||||
size?: FieldSize;
|
||||
row?: number;
|
||||
}
|
||||
|
||||
export interface InputNumberProps {
|
||||
|
||||
@ -373,6 +373,7 @@ export interface TextConfig extends FormItem, Input {
|
||||
export interface TextareaConfig extends FormItem {
|
||||
type: 'textarea';
|
||||
placeholder?: string;
|
||||
rows?: number;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
clearable
|
||||
:placeholder="config.placeholder"
|
||||
:disabled="disabled"
|
||||
:rows="config.rows"
|
||||
@update:model-value="changeHandler"
|
||||
@input="inputHandler"
|
||||
>
|
||||
|
||||
@ -1,13 +1,17 @@
|
||||
<template>
|
||||
<TTextarea
|
||||
v-if="type === 'textarea'"
|
||||
ref="textarea"
|
||||
:modelValue="modelValue"
|
||||
:size="size === 'default' ? 'medium' : size"
|
||||
:disabled="disabled"
|
||||
:placeholder="placeholder"
|
||||
:row="row"
|
||||
:rows="rows"
|
||||
@keypress="inputHandler"
|
||||
@change="changeHandler"
|
||||
@blur="blurHandler"
|
||||
@focus="focusHandler"
|
||||
@update:modelValue="updateModelValue"
|
||||
></TTextarea>
|
||||
<TInputAdornment v-else>
|
||||
<template #prepend v-if="$slots.prepend">
|
||||
@ -24,6 +28,8 @@
|
||||
:placeholder="placeholder"
|
||||
@keypress="inputHandler"
|
||||
@change="changeHandler"
|
||||
@blur="blurHandler"
|
||||
@focus="focusHandler"
|
||||
@update:modelValue="updateModelValue"
|
||||
>
|
||||
<template #prefix-icon v-if="$slots.prefix">
|
||||
@ -37,6 +43,7 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useTemplateRef, watch } from 'vue';
|
||||
import { Input as TInput, InputAdornment as TInputAdornment, Textarea as TTextarea } from 'tdesign-vue-next';
|
||||
|
||||
import type { InputProps } from '@tmagic/design';
|
||||
@ -45,13 +52,28 @@ defineOptions({
|
||||
name: 'TTDesignAdapterInput',
|
||||
});
|
||||
|
||||
defineProps<
|
||||
const props = defineProps<
|
||||
InputProps & {
|
||||
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[]) => {
|
||||
emit('change', ...args);
|
||||
@ -61,6 +83,14 @@ const inputHandler = (...args: any[]) => {
|
||||
emit('input', ...args);
|
||||
};
|
||||
|
||||
const blurHandler = (...args: any[]) => {
|
||||
emit('blur', ...args);
|
||||
};
|
||||
|
||||
const focusHandler = (...args: any[]) => {
|
||||
emit('focus', ...args);
|
||||
};
|
||||
|
||||
const updateModelValue = (...args: any[]) => {
|
||||
emit('update:modelValue', ...args);
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user