最新研发uniapp+vue3仿微信app聊天模板

<!-- #ifdef MP-WEIXIN -->
<script>
    export default {
        /**
         * 解决小程序class、id透传问题
         * manifest.json中配置mergeVirtualHostAttributes: true, 在微信小程序平台不生效，组件外部传入的class没有挂到组件根节点上
         * https://github.com/dcloudio/uni-ui/issues/753
         */
        options: { virtualHost: true }
    }
</script>
<!-- #endif -->

<script setup>
    const props = defineProps({
        // 是否显示自定义tabbar
        showTabBar: { type: [Boolean, String], default: false },
    })
</script>

<template>
    <view class="uv3__container flexbox flex-col flex1">
        <!-- 顶部插槽 -->
        <slot name="header" />
        
        <!-- 内容区 -->
        <view class="uv3__scrollview flex1">
            <slot />
        </view>
        
        <!-- 底部插槽 -->
        <slot name="footer" />
        
        <!-- tabbar栏 -->
        <uv3-tabbar v-if="showTabBar" hideTabBar fixed />
    </view>
</template>

<view class="uv3__chattoolbar" :style="{'padding-bottom': fixPaddingBottom}">
	<!-- 输入框 -->
	<view class="uv3__chattoolbar-editor flexbox">
		<view class="btn" @click="handleVoice"><text class="uv3-icon" :class="voiceBtnEnable ? 'uv3-icon-voice' : 'uv3-icon-keyboard'"></text></view>
		<view class="editor flex1">
			<template v-if="voiceBtnEnable">
				<uv3-input
					v-model="editorValue"
					type="textarea"
					:autosize="{maxRows: 6}"
					:autofocus="autofocus"
					:cursor="editorLastCursor"
					clearable
					style="width: 100%;"
					@input="handleEditorInput"
					@focus="handleEditorFocus"
					@blur="handleEditorBlur"
				/>
			</template>
			<template v-else>
				<view class="uv3__voice-handle flexbox" @touchstart.prevent="handleTouchStart" @touchmove="handleTouchUpdate" @touchend="handleTouchEnd">{{voiceTypeMap[voiceType]}}</view>
			</template>
		</view>
		<view class="btn" @click="handleEmojPlusView(0)" @mousedown.prevent><text class="uv3-icon uv3-icon-face"></text></view>
		<view class="btn" @click="handleEmojPlusView(1)"><text class="uv3-icon uv3-icon-plus"></text></view>
		<view class="btn" @click="handleSend" @mousedown.prevent><view class="send flexbox"><uni-icons type="arrow-up" color="#fff" size="16"></uni-icons></view></view>
	</view>
	
	<!-- 操作栏 -->
	<view v-show="showToolbar" class="uv3__chattoolbar-operate">
		<!-- 表情 -->
		<view v-show="toolbarIndex == 0" class="uv3__chattoolbar-emotion flexbox flex-col">
			<view class="uv3__emotion-tabs flexbox flex-alignc">
				<view v-for="(item, index) in emojList" :key="index" class="item" :class="{'on': item.selected}" @click="handleEmojTab(index)">
					<text v-if="item.type=='emoj'" class="emoj uv3-icon uv3-icon-face"></text>
					<image v-else :src="item.pathLabel" />
				</view>
			</view>
			<view v-for="(item, index) in emojList" :key="index" class="uv3__emotion-cells flex1" :class="{'active': item.selected}">
				<view class="flexbox" :class="item.type == 'emoj' ? 'emojwrap' : 'gifwrap'">
					<view v-for="(emoj, key) in item.nodes" :key="key" class="cells flexbox">
						<view class="item">
							<text v-if="item.type=='emoj'" class="emoj" @click="handleEmojClick(emoj)">{{emoj}}</text>
							<image v-else :src="emoj" class="gif" @click="handleGifClick(emoj)" />
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 操作栏 -->
		<view v-show="toolbarIndex == 1" class="uv3__chattoolbar-pluschoose flexbox">
			<view v-for="(item, index) in chooseList" :key="index" class="uv3__plusbtns-cells" @click="handlePlusAction(item)">
				<view class="icon flexbox"><image :src="item.icon" /></view>
				<view class="label">{{item.label}}</view>
			</view>
		</view>
	</view>
</view>