mjz update

2023-06-17 23:53:47 +08:00
parent a2653e6d5a
commit 0533aa0ebf
73 changed files with 1916 additions and 158 deletions
@@ -5,10 +5,150 @@ permalink: /pages/component/chat
 article: false
 ---

-## 操作条
+`cu-chat` 聊天必选值

-::: details 点此查看页面源代码
-页面位置：`/pages/component/chat`
-```vue
+## 基本样式
+
+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|	提示词	|——|