---
title: 聊天
date: 2023-05-28 16:17:38
permalink: /pages/component/chat
article: false
---

`cu-chat` 聊天必选值

## 基本样式

1. 聊天的外部大框架是 `cu-chat`

2. `cu-item` 包裹某人的聊天信息

3. `self` 表示右侧自己的聊天样式

4. `main` 包含聊天内容

5. `date` 表示消息时间

6. `cu-info` 表示提示词

```html
<view class="cu-chat">
	<view class="cu-item self">
		<view class="main">
			<view class="content bg-green shadow">
				<text>喵喵喵！喵喵喵！喵喵喵！喵喵！喵喵！！喵！喵喵喵！</text>
			</view>
		</view>
		<view class="cu-avatar radius" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big107000.jpg);"></view>
		<view class="date">2018年3月23日 13:23</view>
	</view>
	<view class="cu-info round">对方撤回一条消息!</view>
	<view class="cu-item">
		<view class="cu-avatar radius" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big143004.jpg);"></view>
		<view class="main">
			<view class="content shadow">
				<text>喵喵喵！喵喵喵！</text>
			</view>
		</view>
		<view class="date "> 13:23</view>
	</view>
	<view class="cu-info">
		<text class="cuIcon-roundclosefill text-red "></text> 对方拒绝了你的消息
	</view>
	<view class="cu-info">
		对方开启了好友验证，你还不是他(她)的好友。请先发送好友验证请求，对方验证通过后，才能聊天。
		<text class="text-blue">发送好友验证</text>
	</view>
</view>
```

## 其他聊天内容

1. 聊天内容除了语句，还有图片，语音消息，地理位置消息等

2. `main` 包含的聊天内容不止是消息框里的，还有消息框旁边的提示图标文字等

3. 消息框里的内容由 `content` 包裹

```html
<view class="cu-chat">
    <!-- 图片 -->
	<view class="cu-item self">
		<view class="main">
			<image src="https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg" class="radius" mode="widthFix"></image>
		</view>
		<view class="cu-avatar radius" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big107000.jpg);"></view>
		<view class="date"> 13:23</view>
	</view>
    <!-- 语音 -->
	<view class="cu-item self">
		<view class="main">
			<view class="action text-bold text-grey">
				3"
			</view>
			<view class="content shadow">
				<text class="cuIcon-sound text-xxl padding-right-xl"> </text>
			</view>
		</view>
		<view class="cu-avatar radius" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big107000.jpg);"></view>
		<view class="date">13:23</view>
	</view>
    <!-- 消息带图标 -->
	<view class="cu-item self">
		<view class="main">
			<view class="action">
				<text class="cuIcon-locationfill text-orange text-xxl"></text>
			</view>
			<view class="content shadow">
				喵星球，喵喵市
			</view>
		</view>
		<view class="cu-avatar radius" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big107000.jpg);"></view>
		<view class="date">13:23</view>
	</view>
    <!-- 翻译错误 -->
	<view class="cu-item">
		<view class="cu-avatar radius" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big143004.jpg);"></view>
		<view class="main">
			<view class="content shadow">
				@#$^&**
			</view>
			<view class="action text-grey">
				<text class="cuIcon-warnfill text-red text-xxl"></text> <text class="text-sm margin-left-sm">翻译错误</text>
			</view>
		</view>
		<view class="date">13:23</view>
	</view>
</view>
```

## 发送框

参考操作条

```html
<view class="cu-bar foot input" :style="[{bottom:InputBottom+'px'}]">
	<view class="action">
		<text class="cuIcon-sound text-grey"></text>
	</view>
	<input class="solid-bottom" :adjust-position="false" :focus="false" maxlength="300" cursor-spacing="10"
	 @focus="InputFocus" @blur="InputBlur"></input>
	<view class="action">
		<text class="cuIcon-emojifill text-grey"></text>
	</view>
	<button class="cu-btn bg-green shadow">发送</button>
</view>

<script>
	export default {
		data() {
			return {
				InputBottom: 0
			};
		},
		methods: {
			InputFocus(e) {
				this.InputBottom = e.detail.height
			},
			InputBlur(e) {
				this.InputBottom = 0
			}
		}
	}
</script>
```

## 聊天相关class

|class	|说明|	可选值|
|--	|--|	--|
|cu-chat|	聊天必选值|	——|
|cu-item|	子元素|	——|
|self	|右侧本人的聊天样式|	——|
|main	|聊天内容|	——|
|content|	消息框内容|	——|
|date	|消息日期	|——|
|cu-info|	提示词	|——|