6f93f8cf17
- 修复键盘弹出时底部操作栏遮挡问题，添加固定定位效果 - 改进光标定位逻辑，适配不同输入场景 - 增加内容预填充功能，便于测试和演示 - 调整底部间距和动画高度，适配不同设备 - 添加vConsole调试工具便于移动端调试
84 lines
4.4 KiB
HTML
84 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
|
<title>发布帖子</title>
|
|
<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>
|
|
</head>
|
|
<body>
|
|
<div class="container" id="appIndex">
|
|
<div class="title-box">
|
|
<textarea class="input" id="title" placeholder="输入标题（非必填）" :maxlength="titleLength" v-model="title" ref="titleTextarea" @input="adjustTextareaHeight"></textarea>
|
|
</div>
|
|
<div class="editor-box">
|
|
<div class="editor" :class="{ 'empty': isEmpty }" ref="editorRef" id="editor" placeholder="输入正文" contenteditable="true" @input="onEditorInput" @focus="onEditorFocus" @blur="onEditorBlur" v-html="info.content"></div>
|
|
|
|
<div class="operate-box" :class="{'fixed': fixedState}" ref="operateRef" contenteditable="false" @click="fixedState = false">
|
|
<div class="label flexflex" scroll-x>
|
|
<div class="item" v-for="index in 8" :key="index" @click.stop="insertLabel(`推荐标签${index}`)">#推荐标签{{ index }}</div>
|
|
</div>
|
|
|
|
<div class="btn-list flexacenter">
|
|
<div class="item flexacenter" :class="{ 'pitch': isPTitle }" @click="paragraphTitle">
|
|
<img class="icon" src="https://app.gter.net/image/miniApp/offer/T-icon.png" />
|
|
<div class="text">段落标题</div>
|
|
</div>
|
|
<div class="item flexacenter">
|
|
<img class="icon" src="https://app.gter.net/image/miniApp/offer/img-icon.png" />
|
|
<div class="text">图片</div>
|
|
<input class="file" type="file" @change="insertImage" accept=".png, .jpg, .jpeg" />
|
|
</div>
|
|
<div class="item flexacenter" @click="openEmoji">
|
|
<img class="icon" src="https://app.gter.net/image/miniApp/offer/smiling-face-round-black.png" />
|
|
<div class="text">表情</div>
|
|
</div>
|
|
<div class="flex1"></div>
|
|
<!-- <div class="unfold flexcenter">
|
|
https://app.gter.net/image/miniApp/offer/fold-icon.png
|
|
<img class="icon" src="https://app.gter.net/image/miniApp/offer/unfold-icon.png" />
|
|
</div> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="anonymity flexacenter" @click.stop="cutAnonymity">
|
|
<img v-if="info.anonymity == 1" class="icon-pitch" src="https://app.gter.net/image/miniApp/offer/tick-box.svg" />
|
|
<div v-else class="icon"></div>
|
|
<div class="text">匿名发布</div>
|
|
</div>
|
|
|
|
<div class="new-footer-btn">
|
|
<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>
|
|
</div>
|
|
<div>存草稿</div>
|
|
</div>
|
|
<div class="new-footer-submit flex1 flexcenter" bindtap="authenticationSubmit">发布</div>
|
|
</div>
|
|
|
|
<div class="pop flexflex" v-if="emojiState" @click="closeEmoji">
|
|
<div class="emoji-system-list" scroll-y="true" show-scrollbar="false" enhanced="true">
|
|
<div class="item" v-for="item in optionEmoji" :key="item" @click.stop="selectEmoji(item)">{{ item }}</div>
|
|
<div class="fill"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
var vConsole = new window.VConsole();
|
|
console.log("Hello world");
|
|
|
|
vConsole.destroy();
|
|
</script>
|
|
|
|
<script src="./js/fontSize.js"></script>
|
|
<script src="./js/index.js"></script>
|
|
</body>
|
|
</html>
|