118 lines
3.4 KiB
Markdown
118 lines
3.4 KiB
Markdown
# 表情功能故障排查指南
|
||
|
||
## 问题描述
|
||
表情按钮显示但点击无反应
|
||
|
||
## 可能的原因
|
||
|
||
### 1. 表情包资源未加载
|
||
腾讯云 Chat UIKit 的表情包需要从 CDN 加载资源。
|
||
|
||
**检查方法**：
|
||
1. 打开浏览器开发者工具（F12）
|
||
2. 切换到 Console 标签
|
||
3. 查看是否有表情相关的错误信息
|
||
4. 切换到 Network 标签
|
||
5. 点击表情按钮，查看是否有请求失败
|
||
|
||
### 2. 表情包版权限制
|
||
根据腾讯云文档说明：
|
||
> 为尊重表情设计版权，chat-uikit-vue3 工程中不包含大表情元素切图，正式上线商用前请您替换为自己设计或拥有版权的其他表情包。默认的小黄脸表情包版权归腾讯云所有，仅供授权使用。
|
||
|
||
**解决方案**：
|
||
- 使用腾讯云提供的默认表情包（需要授权）
|
||
- 或者配置自己的表情包
|
||
|
||
### 3. 样式文件加载问题
|
||
表情选择器的样式可能没有正确加载。
|
||
|
||
**检查方法**：
|
||
1. 打开开发者工具
|
||
2. 点击表情按钮
|
||
3. 检查 Elements 标签，看是否有表情选择器的 DOM 元素生成
|
||
4. 检查该元素的样式是否正确应用
|
||
|
||
## 解决方案
|
||
|
||
### 方案 1：检查网络请求
|
||
```javascript
|
||
// 在浏览器控制台执行
|
||
console.log('检查表情资源加载情况')
|
||
```
|
||
|
||
### 方案 2：使用自定义表情包
|
||
如果默认表情包无法使用，可以配置自定义表情包。
|
||
|
||
需要修改 `MessageInput` 组件的配置：
|
||
|
||
```vue
|
||
<MessageInput :emojiConfig="customEmojiConfig" />
|
||
```
|
||
|
||
```typescript
|
||
const customEmojiConfig = {
|
||
emojiList: [
|
||
{ name: '微笑', url: '/emoji/smile.png', code: '[微笑]' },
|
||
{ name: '大笑', url: '/emoji/laugh.png', code: '[大笑]' },
|
||
// ... 更多表情
|
||
]
|
||
}
|
||
```
|
||
|
||
### 方案 3：暂时禁用表情功能
|
||
如果表情功能不是必需的，可以暂时禁用：
|
||
|
||
```vue
|
||
<MessageInput :showEmoji="false" />
|
||
```
|
||
|
||
### 方案 4：联系腾讯云获取授权
|
||
如果需要使用腾讯云的默认表情包，需要：
|
||
1. 访问 [腾讯云工单系统](https://console.cloud.tencent.com/workorder/category)
|
||
2. 提交工单申请表情包使用授权
|
||
|
||
## 临时解决方案
|
||
|
||
目前其他功能（文本、图片、文件、视频）都可以正常使用。表情功能可以：
|
||
1. 先跳过，使用文本消息
|
||
2. 或者使用 Unicode 表情符号（😊😂❤️等）直接在文本中输入
|
||
|
||
## 调试步骤
|
||
|
||
### 步骤 1：检查控制台错误
|
||
打开浏览器控制台，点击表情按钮，查看是否有错误信息：
|
||
- 404 错误：表情资源文件未找到
|
||
- CORS 错误：跨域问题
|
||
- 其他 JavaScript 错误
|
||
|
||
### 步骤 2：检查 DOM 元素
|
||
点击表情按钮后，检查是否生成了表情选择器的 DOM：
|
||
```
|
||
<div class="emoji-picker">
|
||
<!-- 应该有表情列表 -->
|
||
</div>
|
||
```
|
||
|
||
### 步骤 3：检查样式
|
||
如果 DOM 存在但不可见，可能是样式问题：
|
||
```css
|
||
/* 检查这些样式是否正确加载 */
|
||
.emoji-picker {
|
||
display: block;
|
||
position: absolute;
|
||
/* ... */
|
||
}
|
||
```
|
||
|
||
## 建议
|
||
|
||
1. **短期方案**：使用文本消息和其他功能（图片、文件等）
|
||
2. **中期方案**：配置自定义表情包
|
||
3. **长期方案**：申请腾讯云表情包授权或购买商业表情包
|
||
|
||
## 参考文档
|
||
|
||
- [Chat UIKit Vue3 官方文档](https://cloud.tencent.com/document/product/269/123108)
|
||
- [表情包配置说明](https://cloud.tencent.com/document/product/269/37411)
|
||
- [工单提交](https://console.cloud.tencent.com/workorder/category)
|