theluyuan/layui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

🐛(component): 修复 textarea 组件 maxlength 属性不可用

Browse Source
This commit is contained in:
就眠儀式 2022-07-28 11:04:56 +08:00
parent 16f16a1a84
commit d07da1a475
3 changed files with 14 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
package/component/src/component/textarea/index.vue
View File

@ -15,15 +15,16 @@ export interface LayTextareaProps {
disabled?: boolean; disabled?: boolean;
showCount?: boolean; showCount?: boolean;
allowClear?: boolean; allowClear?: boolean;
maxlength?: number;
} }
const props = defineProps<LayTextareaProps>(); const props = defineProps<LayTextareaProps>();
interface TextareaEmits { interface TextareaEmits {
(e: "blur", event: Event): void; (e: "blur", event: Event): void;
(e: "input", event: Event): void; (e: "input", value: string ): void;
(e: "update:modelValue", 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: "focus", event: Event): void;
(e: "clear"): void; (e: "clear"): void;
} }
@ -35,7 +36,7 @@ const attrs = useAttrs();
const onInput = function (event: Event) { const onInput = function (event: Event) {
const inputElement = event.target as HTMLInputElement; const inputElement = event.target as HTMLInputElement;
emit("update:modelValue", inputElement.value); emit("update:modelValue", inputElement.value);
emit("input", event); emit("input", inputElement.value);
}; };
const onFocus = function (event: Event) { const onFocus = function (event: Event) {
@ -47,7 +48,8 @@ const onBlur = function (event: Event) {
}; };
const onChange = (event: Event) => { const onChange = (event: Event) => {
emit("change", event); const inputElement = event.target as HTMLInputElement;
emit("change", inputElement.value);
}; };
const onClear = function () { const onClear = function () {
@ -59,8 +61,8 @@ const hasContent = computed(() => (props.modelValue as string)?.length > 0);
const wordCount = computed(() => { const wordCount = computed(() => {
let count = String(props.modelValue?.length ?? 0); let count = String(props.modelValue?.length ?? 0);
if (attrs.maxlength) { if (props.maxlength) {
count += "/" + attrs.maxlength; count += "/" + props.maxlength;
} }
return count; return count;
}); });
@ -69,12 +71,12 @@ const wordCount = computed(() => {
<template> <template>
<div class="layui-textarea-wrapper"> <div class="layui-textarea-wrapper">
<textarea <textarea
class="layui-textarea"
:value="modelValue" :value="modelValue"
v-bind="$attrs"
:placeholder="placeholder" :placeholder="placeholder"
:name="name" :name="name"
:disabled="disabled" :disabled="disabled"
class="layui-textarea" :maxlength="maxlength"
:class="{ 'layui-disabled': disabled }" :class="{ 'layui-disabled': disabled }"
@input="onInput" @input="onInput"
@focus="onFocus" @focus="onFocus"

3
package/document-component/src/document/zh-CN/components/textarea.md
View File

@ -125,7 +125,7 @@ export default {
<template> <template>
<lay-textarea placeholder="显示字数" v-model="data4" show-count></lay-textarea> <lay-textarea placeholder="显示字数" v-model="data4" show-count></lay-textarea>
<br> <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> </template>
<script> <script>
@ -158,6 +158,7 @@ export default {
| show-count | 显示字数 | `true` `false` | | show-count | 显示字数 | `true` `false` |
| disabled | 禁用 | `true` `false` | | disabled | 禁用 | `true` `false` |
| v-model | 值 | -- | | v-model | 值 | -- |
| maxlength | 限制输入长度 | -- |
::: :::