Leaf/amber-ui
5
0
Fork 1
Code Issues 8 Pull Requests Actions Packages Projects Releases Wiki Activity

改进 动画

Browse Source
This commit is contained in:
Twilight 2024-09-11 16:09:06 +08:00
parent 4b2242942e
commit 6acad289f5
1 changed files with 24 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/chat/chat.vue
View File

@ -1,7 +1,5 @@
<template>
<div
class="relative flex flex-col h-[calc(100vh-var(--header-height)*1.9)]"
>
<div class="relative flex flex-col h-[calc(100vh-var(--header-height)*1.9)]">
<div class="flex-grow mt-3 mb-1 text-5xl">
<n-gradient-text type="info" class="pr-3 pb-2 pt-2">
你好，{{ userStore.user.name }}
@ -15,7 +13,9 @@
<div class="absolute bottom-0 left-0 right-0 pb-5">
<div
ref="inputContainer"
class="mx-auto w-2xl max-w-2xl outline-none input-color input-bg rounded-full flex pl-5 pr-5 bg-white shadow-lg items-center p-4 pb-4"
class="mx-auto w-2xl max-w-2xl outline-none input-color input-bg rounded-full flex pl-5 pr-5 bg-white shadow-lg items-center p-4 pb-4 transition-all"
@focusin="onFocused"
@focusout="onBlurred"
>
<div class="overflow-x-hidden h-full w-full flex items-center">
<n-scrollbar class="max-h-96">
@ -137,6 +137,26 @@ function updateInputHeight() {
}
}
function onFocused() {
if (!inputContainer.value) {
return;
}
const container = inputContainer.value;
container.classList.remove("max-w-2xl");
container.classList.add("max-w-full");
}
function onBlurred() {
if (!inputContainer.value) {
return;
}
const container = inputContainer.value;
container.classList.remove("max-w-full");
container.classList.add("max-w-2xl");
}
onMounted(() => {
updateInputHeight();
});