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

🐛(textarea): 修复拼字阶段触发 update:modelValue 的问题

Browse Source
This commit is contained in:
就眠儀式 2022-11-03 22:33:53 +08:00
parent e8078f76b1
commit 4a42c6c162
3 changed files with 20 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package/component/src/component/tab/index.vue
View File

@ -25,7 +25,7 @@ import {
reactive, reactive,
h, h,
createTextVNode, createTextVNode,
Fragment Fragment,
} from "vue"; } from "vue";
import { useResizeObserver } from "@vueuse/core"; import { useResizeObserver } from "@vueuse/core";
import { TabData, TabInjectKey, TabPosition } from "./interface"; import { TabData, TabInjectKey, TabPosition } from "./interface";

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

@ -6,7 +6,7 @@ export default {
<script setup lang="ts"> <script setup lang="ts">
import { LayIcon } from "@layui/icons-vue"; import { LayIcon } from "@layui/icons-vue";
import { computed } from "vue"; import { computed, ref } from "vue";
import "./index.less"; import "./index.less";
export interface TextareaProps { export interface TextareaProps {
@ -31,11 +31,15 @@ interface TextareaEmits {
} }
const emit = defineEmits<TextareaEmits>(); const emit = defineEmits<TextareaEmits>();
const composing = ref(false);
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("input", inputElement.value); emit("input", inputElement.value);
if (composing.value) {
return;
}
emit("update:modelValue", inputElement.value);
}; };
const onFocus = function (event: Event) { const onFocus = function (event: Event) {
@ -56,6 +60,15 @@ const onClear = function () {
emit("clear"); emit("clear");
}; };
const onCompositionstart = () => {
composing.value = true;
};
const onCompositionend = (event: Event) => {
composing.value = false;
onInput(event);
};
const hasContent = computed(() => (props.modelValue as string)?.length > 0); const hasContent = computed(() => (props.modelValue as string)?.length > 0);
const wordCount = computed(() => { const wordCount = computed(() => {
@ -77,6 +90,8 @@ const wordCount = computed(() => {
:disabled="disabled" :disabled="disabled"
:maxlength="maxlength" :maxlength="maxlength"
:class="{ 'layui-textarea-disabled': disabled }" :class="{ 'layui-textarea-disabled': disabled }"
@compositionstart="onCompositionstart"
@compositionend="onCompositionend"
@input="onInput" @input="onInput"
@focus="onFocus" @focus="onFocus"
@change="onChange" @change="onChange"