first commit

src/subPages/messageChild/msgChat/msgChat.vue

@@ -0,0 +1,101 @@
+<template>
+  <!-- 聊天内容 -->
+  <scroll-view
+    @tap="closeEmoji"
+    scroll-y
+    :style="{height: isShowEmoji ? 'calc(100vh - 510rpx)' : 'calc(100vh - 110rpx)'}" 
+    scroll-with-animation
+    :scroll-into-view="scrollToView"
+  >
+    <chat-item
+      v-if="isItem"
+      :id="'msg' + index"
+      v-for="(item, index) in chatData"
+      :item="item"
+      :key="index"
+    />
+  </scroll-view>
+
+  <!-- 输入框 -->
+  <view class="chat-input-bar">
+    <!-- 相册 -->
+    <view class="xc-icon" @tap="selectImg">
+      <jx-icon icon="xiangce" :size="55" color="#888888" />
+    </view>
+
+    <!-- 输入框 style="width:410rpx"  可读-->
+    <view class="chat-input-root" @tap="closeReadOnly">
+      <editor id="editor"
+        class="ql-container" 
+        :read-only="readOnly"
+        :placeholder="'请输入内容...'" 
+        @ready="onEditorReady"
+        @input="onInput"
+        @blur="onBlur"
+        @focus="onFocus">
+      </editor>
+    </view>
+
+    <!-- emoji -->
+    <view class="chat-emoji-border" @touchend.prevent="openEmoji">
+      <image class="chat-emoji" src="https://image.jxc4.com/image/0465edd3e027eab221c3d37ee7a063f9.png" alt=""></image>
+    </view>
+
+    <!-- 发送 -->
+    <view class="chat-input-send" @tap="sendMessage">
+      <text class="chat-input-send-text">发送</text>
+    </view>
+  </view>
+   
+  <!-- emoji表情 -->
+  <view class="emoji-select" :style="{
+    height: isShowEmoji ? '400rpx' : '0rpx'
+  }">
+    <view v-for="(item, index) in emojiArr" :key="index" class="emoji-border" @touchend.prevent="selectEmoji(item)">
+      <view :class="'emoji-' + item.symbol" class="emoji-display"> </view>
+    </view>
+  </view>
+  
+</template>
+
+<script lang="ts" setup >
+import msgChatFn from './msgChat'
+import chatItem from './msgChatChild/chat-item.vue'
+import { emojiArr } from '@/utils/emoji'
+const {
+  scrollToView,     // 滚动到底部
+  chatData,         // 聊天信息
+  isItem,           // 聊天界面的数据是否请求完毕
+  isShowEmoji,      // emoji是否发生偏移
+  onEditorReady,    // 编辑器初始化
+  onInput,          // 编辑器的内容(实时)
+  onBlur,           // 编辑器失去焦点
+  onFocus,          // 编辑器聚焦时
+  selectImg,        // 选择图片
+  openEmoji,        // 打开emoji
+  closeEmoji,       // 关闭emoji
+  selectEmoji,      // 选择emoji,
+  sendMessage,      // 发送消息
+  readOnly,         // 是否为只读
+  closeReadOnly     // 关闭editor的只读属性
+} = msgChatFn()
+</script>
+
+<style lang="scss" scoped>
+@import './msgChatChild/index.scss';
+.ql-container{
+  // width:416rpx;
+  width:calc(100vw - 340rpx);
+  height: 50rpx;
+  min-height: 50rpx;
+  caret-color:#05c160;
+  display:flex;
+  align-items: center;
+}
+</style>
+
+<style>
+page {
+  background-color: #f0f0f0;
+}
+</style>