test/HuLa
1
0
Fork 0
mirror of https://gitee.com/HuLaSpark/HuLa.git synced 2024-12-01 19:28:07 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(view): 🐛 修复消息输入框部分bug

Browse Source 
1. 消息输入框内容清空时发送按钮未禁用。
2. 消息输入框 tips 和输入内容有短暂共存问题
This commit is contained in:
monotone 2024-10-28 22:53:36 +08:00 committed by shentao
parent bd7f6fbe7f
commit 24b8a517d8
2 changed files with 18 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/hooks/useMsgInput.ts
View File

@ -1,17 +1,17 @@
import { LimitEnum, MittEnum, MsgEnum } from '@/enums'
import { Ref } from 'vue'
import { CacheUserItem } from '@/services/types.ts'
import { useSettingStore } from '@/stores/setting.ts'
import { useDebounceFn } from '@vueuse/core'
import Mitt from '@/utils/Bus.ts'
import { useCommon } from './useCommon.ts'
import { RegExp } from '@/utils/RegExp.ts'
import apis from '@/services/apis.ts'
import { useGlobalStore } from '@/stores/global.ts'
import { useChatStore } from '@/stores/chat.ts'
import { useUserInfo } from '@/hooks/useCached.ts'
import apis from '@/services/apis.ts'
import { CacheUserItem } from '@/services/types.ts'
import { useCachedStore } from '@/stores/cached.ts'
import { useChatStore } from '@/stores/chat.ts'
import { useGlobalStore } from '@/stores/global.ts'
import { useSettingStore } from '@/stores/setting.ts'
import Mitt from '@/utils/Bus.ts'
import { RegExp } from '@/utils/RegExp.ts'
import { type } from '@tauri-apps/plugin-os'
import { useDebounceFn } from '@vueuse/core'
import { Ref } from 'vue'
import { useCommon } from './useCommon.ts'
export const useMsgInput = (messageInputDom: Ref) => {
const chatStore = useChatStore()
@ -215,7 +215,7 @@ export const useMsgInput = (messageInputDom: Ref) => {
/** 当输入框手动输入值的时候触发input事件(使用vueUse的防抖) */
const handleInput = useDebounceFn(async (e: Event) => {
const inputElement = e.target as HTMLInputElement
msgInput.value = inputElement.innerHTML
msgInput.value = inputElement.textContent || ''
const { range, selection } = getEditorRange()!
/** 获取当前光标所在的节点和文本内容 */
if (!range || !selection) {
@ -256,7 +256,7 @@ export const useMsgInput = (messageInputDom: Ref) => {
} else {
ait.value = false
}
}, 100)
}, 10) // 防抖时间过长会导致输入内容已经显示但是实际还没有进入到这里进行处理
/** input的keydown事件 */
const inputKeyDown = (e: KeyboardEvent) => {

7
src/typings/auto-imports.d.ts vendored
View File

@ -3,6 +3,7 @@
// @ts-nocheck
// noinspection JSUnusedGlobalSymbols
// Generated by unplugin-auto-import
// biome-ignore lint: disable
export {}
declare global {
const EffectScope: typeof import('vue')['EffectScope']
@ -46,6 +47,7 @@ declare global {
const onServerPrefetch: typeof import('vue')['onServerPrefetch']
const onUnmounted: typeof import('vue')['onUnmounted']
const onUpdated: typeof import('vue')['onUpdated']
const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
const provide: typeof import('vue')['provide']
const reactive: typeof import('vue')['reactive']
const readonly: typeof import('vue')['readonly']
@ -67,14 +69,17 @@ declare global {
const useCssModule: typeof import('vue')['useCssModule']
const useCssVars: typeof import('vue')['useCssVars']
const useDialog: typeof import('naive-ui')['useDialog']
const useId: typeof import('vue')['useId']
const useLink: typeof import('vue-router')['useLink']
const useLoadingBar: typeof import('naive-ui')['useLoadingBar']
const useMessage: typeof import('naive-ui')['useMessage']
const useModal: typeof import('naive-ui')['useModal']
const useModel: typeof import('vue')['useModel']
const useNotification: typeof import('naive-ui')['useNotification']
const useRoute: typeof import('vue-router')['useRoute']
const useRouter: typeof import('vue-router')['useRouter']
const useSlots: typeof import('vue')['useSlots']
const useTemplateRef: typeof import('vue')['useTemplateRef']
const watch: typeof import('vue')['watch']
const watchEffect: typeof import('vue')['watchEffect']
const watchPostEffect: typeof import('vue')['watchPostEffect']
@ -83,6 +88,6 @@ declare global {
// for type re-export
declare global {
// @ts-ignore
export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
import('vue')
}