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

6
css/index.less
View File

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

10
index.html
View File

@@ -8,7 +8,7 @@
<link rel="stylesheet" href="./css/index.css" />
<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>
<body>
<div class="container" id="appIndex">
@@ -52,7 +52,7 @@
<div class="text">匿名发布</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 class="flexcenter save-draft-icon-box">
<img class="save-draft-icon" src="https://app.gter.net/image/miniApp/offer/draft-icon.png"></img>
@@ -71,10 +71,10 @@
</div>
<script>
var vConsole = new window.VConsole();
console.log("Hello world");
// var vConsole = new window.VConsole();
// console.log("Hello world");
vConsole.destroy();
// vConsole.destroy();
</script>
<script src="./js/fontSize.js"></script>

19
js/index.js
View File

@@ -282,13 +282,14 @@ createApp({
getCursorPosition("text");
};
const fixedState = ref(false);
let isBottomState = ref(false); // 底部按钮 显示
const onEditorFocus = () => {
isBottomState.value = true;
setTimeout(() => getKeyboardHeight(), 500);
};
const onEditorBlur = () => {
// fixedState.value = false;
isBottomState.value = false;
};
// 判断是否为空
@@ -354,7 +355,6 @@ createApp({
const insertImage = (event) => {
const file = event.target.files[0];
if (!file) return; // 处理未选择文件的情况
if (file.size > maxSize) {
@@ -362,7 +362,13 @@ createApp({
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) => {
const imgSrc = e.target.result;
console.log("imgSrc", imgSrc);
@@ -374,7 +380,6 @@ createApp({
range.insertNode(img);
const div = document.createElement("div");
range.insertNode(div);
judgeIsEmpty();
} catch (error) {
console.error("插入图片出错:", error);
@@ -433,8 +438,8 @@ createApp({
// 公式：元素顶部相对于视口的位置 + 滚动距离 - 目标位置（视口高度的30%）
// const targetPosition = window.scrollY + rect.top - viewportHeight * 0.3; // 30%位置，比正中间更靠上
const height = type == "emoji" ? 300 : keyboardHeight;
// console.log(height);
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) {
@@ -469,6 +474,6 @@ createApp({
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");