A1300399510/min-offer-forum-issue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 添加底部按钮动画效果并优化代码

Browse Source 
- 为底部按钮添加显示/隐藏的过渡动画效果
- 移除vconsole调试工具相关代码
- 优化图片上传相关代码结构
- 修复底部按钮状态控制逻辑
This commit is contained in:
DESKTOP-RQ919RC\Pc
2025-10-13 18:55:49 +08:00
parent 6f93f8cf17
commit e7e68aa42b
4 changed files with 28 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
css/index.css
View File

@@ -223,6 +223,7 @@ editor {
} }
.container .anonymity { .container .anonymity {
margin-left: 0.4rem; margin-left: 0.4rem;
width: fit-content;
} }
.container .anonymity .icon { .container .anonymity .icon {
width: 0.32rem; width: 0.32rem;
@@ -250,6 +251,10 @@ editor {
padding: 0.34rem 0.3rem 0; padding: 0.34rem 0.3rem 0;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
transition: all 0.3s ease-in-out;
}
.container .new-footer-btn.show {
bottom: -2.4rem;
} }
.container .new-footer-btn .save-draft-btn { .container .new-footer-btn .save-draft-btn {
flex-direction: column; flex-direction: column;

6
css/index.less
View File

@@ -264,6 +264,7 @@ editor {
.anonymity { .anonymity {
margin-left: 0.4rem; margin-left: 0.4rem;
width: fit-content;
.icon { .icon {
width: 0.32rem; width: 0.32rem;
@@ -295,6 +296,11 @@ editor {
padding: 0.34rem 0.3rem 0; padding: 0.34rem 0.3rem 0;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
transition: all 0.3s ease-in-out;
&.show {
bottom: -2.4rem;
}
.save-draft-btn { .save-draft-btn {
flex-direction: column; flex-direction: column;

10
index.html
View File

@@ -8,7 +8,7 @@
<link rel="stylesheet" href="./css/index.css" /> <link rel="stylesheet" href="./css/index.css" />
<script src="./js/vue.global.js"></script> <script src="./js/vue.global.js"></script>
<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script> <!-- <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script> -->
</head> </head>
<body> <body>
<div class="container" id="appIndex"> <div class="container" id="appIndex">
@@ -52,7 +52,7 @@
<div class="text">匿名发布</div> <div class="text">匿名发布</div>
</div> </div>
<div class="new-footer-btn"> <div class="new-footer-btn" :class="{'show': isBottomState}">
<div view class="flexacenter save-draft-btn" bindtap="handleLastPublish" data-state="0"> <div view class="flexacenter save-draft-btn" bindtap="handleLastPublish" data-state="0">
<div class="flexcenter save-draft-icon-box"> <div class="flexcenter save-draft-icon-box">
<img class="save-draft-icon" src="https://app.gter.net/image/miniApp/offer/draft-icon.png"></img> <img class="save-draft-icon" src="https://app.gter.net/image/miniApp/offer/draft-icon.png"></img>
@@ -71,10 +71,10 @@
</div> </div>
<script> <script>
var vConsole = new window.VConsole(); // var vConsole = new window.VConsole();
console.log("Hello world"); // console.log("Hello world");
vConsole.destroy(); // vConsole.destroy();
</script> </script>
<script src="./js/fontSize.js"></script> <script src="./js/fontSize.js"></script>

19
js/index.js
View File

@@ -282,13 +282,14 @@ createApp({
getCursorPosition("text"); getCursorPosition("text");
}; };
const fixedState = ref(false); let isBottomState = ref(false); // 底部按钮 显示
const onEditorFocus = () => { const onEditorFocus = () => {
isBottomState.value = true;
setTimeout(() => getKeyboardHeight(), 500); setTimeout(() => getKeyboardHeight(), 500);
}; };
const onEditorBlur = () => { const onEditorBlur = () => {
// fixedState.value = false; isBottomState.value = false;
}; };
// 判断是否为空 // 判断是否为空
@@ -354,7 +355,6 @@ createApp({
const insertImage = (event) => { const insertImage = (event) => {
const file = event.target.files[0]; const file = event.target.files[0];
if (!file) return; // 处理未选择文件的情况 if (!file) return; // 处理未选择文件的情况
if (file.size > maxSize) { if (file.size > maxSize) {
@@ -362,7 +362,13 @@ createApp({
return; return;
} }
const reader = new FileReader(); // 不要删除，后面会用
// const formData = new FormData();
// formData.append("file", file);
// formData.append("name", file.name);
// formData.append("type", "image");
// console.log("formData", formData);
reader.onload = (e) => { reader.onload = (e) => {
const imgSrc = e.target.result; const imgSrc = e.target.result;
console.log("imgSrc", imgSrc); console.log("imgSrc", imgSrc);
@@ -374,7 +380,6 @@ createApp({
range.insertNode(img); range.insertNode(img);
const div = document.createElement("div"); const div = document.createElement("div");
range.insertNode(div); range.insertNode(div);
judgeIsEmpty(); judgeIsEmpty();
} catch (error) { } catch (error) {
console.error("插入图片出错:", error); console.error("插入图片出错:", error);
@@ -433,8 +438,8 @@ createApp({
// 公式：元素顶部相对于视口的位置 + 滚动距离 - 目标位置（视口高度的30%） // 公式：元素顶部相对于视口的位置 + 滚动距离 - 目标位置（视口高度的30%）
// const targetPosition = window.scrollY + rect.top - viewportHeight * 0.3; // 30%位置，比正中间更靠上 // const targetPosition = window.scrollY + rect.top - viewportHeight * 0.3; // 30%位置，比正中间更靠上
const height = type == "emoji" ? 300 : keyboardHeight; const height = type == "emoji" ? 300 : keyboardHeight;
// console.log(height);
const targetPosition = window.scrollY + rect.top - (originalWindowHeight - height) + 40; const targetPosition = window.scrollY + rect.top - (originalWindowHeight - height) + 40;
console.log("originalWindowHeight", originalWindowHeight, "targetPosition", targetPosition, "window.scrollY", window.scrollY, "targetPosition");
// 平滑滚动到目标位置 // 平滑滚动到目标位置
if (Math.abs(targetPosition - window.scrollY) > 10) { if (Math.abs(targetPosition - window.scrollY) > 10) {
@@ -469,6 +474,6 @@ createApp({
if (currentHeight < originalWindowHeight) keyboardHeight = originalWindowHeight - currentHeight; if (currentHeight < originalWindowHeight) keyboardHeight = originalWindowHeight - currentHeight;
}; };
return { operateRef, fixedState, onEditorBlur, onEditorFocus, cutAnonymity, isEmpty, selectEmoji, closeEmoji, openEmoji, optionEmoji, emojiState, insertLabel, editorRef, info, title, titleLength, titleTextarea, adjustTextareaHeight, isPTitle, paragraphTitle, insertImage, onEditorInput }; return { isBottomState, operateRef, onEditorBlur, onEditorFocus, cutAnonymity, isEmpty, selectEmoji, closeEmoji, openEmoji, optionEmoji, emojiState, insertLabel, editorRef, info, title, titleLength, titleTextarea, adjustTextareaHeight, isPTitle, paragraphTitle, insertImage, onEditorInput };
}, },
}).mount("#appIndex"); }).mount("#appIndex");