diff --git a/css/index.css b/css/index.css index e929e07..341f1f0 100644 --- a/css/index.css +++ b/css/index.css @@ -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; diff --git a/css/index.less b/css/index.less index 0e02045..0ddb4b9 100644 --- a/css/index.less +++ b/css/index.less @@ -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; diff --git a/index.html b/index.html index 95f9ea4..20ff421 100644 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@ - +
@@ -52,7 +52,7 @@
匿名发布
-
+
@@ -71,10 +71,10 @@
diff --git a/js/index.js b/js/index.js index d011fc8..bf97312 100644 --- a/js/index.js +++ b/js/index.js @@ -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");