101 lines
2.7 KiB
Vue
101 lines
2.7 KiB
Vue
<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> |