🐛(component): 修复 textarea 组件 maxlength 属性不可用
This commit is contained in:
parent
16f16a1a84
commit
d07da1a475
@ -15,15 +15,16 @@ export interface LayTextareaProps {
|
||||
disabled?: boolean;
|
||||
showCount?: boolean;
|
||||
allowClear?: boolean;
|
||||
maxlength?: number;
|
||||
}
|
||||
|
||||
const props = defineProps<LayTextareaProps>();
|
||||
|
||||
interface TextareaEmits {
|
||||
(e: "blur", event: Event): void;
|
||||
(e: "input", event: Event): void;
|
||||
(e: "input", value: string ): void;
|
||||
(e: "update:modelValue", value: string): void;
|
||||
(e: "change", event: Event): void;
|
||||
(e: "change", value: string): void;
|
||||
(e: "focus", event: Event): void;
|
||||
(e: "clear"): void;
|
||||
}
|
||||
@ -35,7 +36,7 @@ const attrs = useAttrs();
|
||||
const onInput = function (event: Event) {
|
||||
const inputElement = event.target as HTMLInputElement;
|
||||
emit("update:modelValue", inputElement.value);
|
||||
emit("input", event);
|
||||
emit("input", inputElement.value);
|
||||
};
|
||||
|
||||
const onFocus = function (event: Event) {
|
||||
@ -47,7 +48,8 @@ const onBlur = function (event: Event) {
|
||||
};
|
||||
|
||||
const onChange = (event: Event) => {
|
||||
emit("change", event);
|
||||
const inputElement = event.target as HTMLInputElement;
|
||||
emit("change", inputElement.value);
|
||||
};
|
||||
|
||||
const onClear = function () {
|
||||
@ -59,8 +61,8 @@ const hasContent = computed(() => (props.modelValue as string)?.length > 0);
|
||||
|
||||
const wordCount = computed(() => {
|
||||
let count = String(props.modelValue?.length ?? 0);
|
||||
if (attrs.maxlength) {
|
||||
count += "/" + attrs.maxlength;
|
||||
if (props.maxlength) {
|
||||
count += "/" + props.maxlength;
|
||||
}
|
||||
return count;
|
||||
});
|
||||
@ -69,12 +71,12 @@ const wordCount = computed(() => {
|
||||
<template>
|
||||
<div class="layui-textarea-wrapper">
|
||||
<textarea
|
||||
class="layui-textarea"
|
||||
:value="modelValue"
|
||||
v-bind="$attrs"
|
||||
:placeholder="placeholder"
|
||||
:name="name"
|
||||
:disabled="disabled"
|
||||
class="layui-textarea"
|
||||
:maxlength="maxlength"
|
||||
:class="{ 'layui-disabled': disabled }"
|
||||
@input="onInput"
|
||||
@focus="onFocus"
|
||||
|
@ -125,7 +125,7 @@ export default {
|
||||
<template>
|
||||
<lay-textarea placeholder="显示字数" v-model="data4" show-count></lay-textarea>
|
||||
<br>
|
||||
<lay-textarea placeholder="最大输入长度" v-model="data5" show-count :max-length="10"></lay-textarea>
|
||||
<lay-textarea placeholder="最大输入长度" v-model="data5" show-count :maxlength="10"></lay-textarea>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -158,6 +158,7 @@ export default {
|
||||
| show-count | 显示字数 | `true` `false` |
|
||||
| disabled | 禁用 | `true` `false` |
|
||||
| v-model | 值 | -- |
|
||||
| maxlength | 限制输入长度 | -- |
|
||||
|
||||
:::
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user