msb-mca
/
shop-admin
mirror of http://internel-git.mashibing.cn/yanxuan-frontend/shop-admin.git
2.1k
3
Code Issues Projects Releases Wiki Activity

feat: emoji

Browse Source
feature/task1.0.0__0514__ch
向文可 3 years ago
parent e3c281c73c
commit 76eb6645e0
2 changed files with 399 additions and 5 deletions
Show Stats Download Patch File Download Diff File

357
src/utils/emoji.js
Unescape View File

@ -0,0 +1,357 @@
export const emojiData = [
//笑脸
{
type: 'smiley',
name: '笑脸',
list: [
'😀',
'😁',
'😂',
'🤣',
'😃',
'😄',
'😅',
'😆',
'😉',
'😊',
'😋',
'😎',
'😍',
'😘',
'😗',
'😙',
'😚',
'🙂',
'🤗',
'🤩',
'🤔',
'🤨',
'😐',
'😑',
'😶',
'🙄',
'😏',
'😣',
'😥',
'😮',
'🤐',
'😯',
'😪',
'😫',
'😴',
'😌',
'😛',
'😜',
'😝',
'🤤',
'😒',
'😓',
'😔',
'😕',
'🙃',
'🤑',
'😲',
'🙁',
'😖',
'😞',
'😟',
'😤',
'😢',
'😭',
'😦',
'😧',
'😨',
'😩',
'🤯',
'😬',
'😰',
'😱',
'😳',
'🤪',
'😵',
'😡',
'😠',
'🤬',
'😷',
'🤒',
'🤕',
'🤢',
'🤮',
'🤧',
'😇',
'🤠',
'🤡',
'🤥',
'🤫',
'🤭',
'🧐',
'🤓',
'😈',
'👿',
'👹',
'👺',
'💀',
'👻',
'👽',
'🤖',
'💩',
],
},
//手势
{
type: 'gesture',
name: '手势',
list: [
'🤲',
'👐',
'🙌',
'👏',
'🤝',
'👍',
'👎',
'👊',
'🤛',
'🤜',
'🤞',
'🤟',
'🤘',
'👌',
'👈',
'👉',
'👆',
'👇',
'🤚',
'🖐',
'🖖',
'👋',
'🤙',
'💪',
// "🖕",
'🙏',
],
},
//人物
{
type: 'people',
name: '人物',
list: [
'👦',
'👧',
'👨',
'👩',
'👴',
'👵',
'👶',
'👱',
'👮',
'👲',
'👳',
'👷',
'👸',
'💂',
'🎅',
'👰',
'👼',
'💆',
'💇',
'🙍',
'🙎',
'🙅',
'🙆',
'💁',
'🙋',
'🙇',
'🙌',
'🙏',
'👤',
'👥',
'🚶',
'🏃',
'👯',
'💃',
'👫',
'👬',
'👭',
'💏',
'💑',
'👪',
],
},
//动物
{
type: 'animal',
name: '动物',
list: [
'🙈',
'🙉',
'🙊',
'🐵',
'🐒',
'🐶',
'🐕',
'🐩',
'🐺',
'🐱',
'😺',
'😸',
'😹',
'😻',
'😼',
'😽',
'🙀',
'😿',
'😾',
'🐈',
'🐯',
'🐅',
'🐆',
'🐴',
'🐎',
'🐮',
'🐂',
'🐃',
'🐄',
'🐷',
'🐖',
'🐗',
'🐽',
'🐏',
'🐑',
'🐐',
'🐪',
'🐫',
'🐘',
'🐭',
'🐁',
'🐀',
'🐹',
'🐰',
'🐇',
'🐻',
'🐨',
'🐼',
'🐾',
'🐔',
'🐓',
'🐣',
'🐤',
'🐥',
'🐦',
'🐧',
'🐸',
'🐊',
'🐢',
'🐍',
'🐲',
'🐉',
'🐳',
'🐋',
'🐬',
'🐟',
'🐠',
'🐡',
'🐙',
'🐚',
'🐌',
'🐛',
'🐜',
'🐝',
'🐞',
'🦋',
'🐁',
'🐂',
'🐅',
'🐇',
'🐉',
'🐍',
'🐎',
'🐐',
'🐒',
'🐓',
'🐕',
'🐖',
],
},
//其他
{
type: 'other',
name: '其他',
list: [
'🌹',
'🍀',
'🍎',
'💰',
'📱',
'🌙',
'🍁',
'🍂',
'🍃',
'🌷',
'💎',
'🔪',
'🔫',
'🏀',
'👄',
'👍',
'🔥',
'💘',
'💓',
'💔',
'💕',
'💖',
'💗',
'💙',
'💚',
'💛',
'💜',
'💝',
'💞',
'💟',
],
},
];
//emoji表情编码
export function utf16toEntities(str) {
const patt = /[\ud800-\udbff][\udc00-\udfff]/g; // 检测utf16字符正则
str = str.replace(patt, (char) => {
let H;
let L;
let code;
let s;
if (char.length === 2) {
H = char.charCodeAt(0); // 取出高位
L = char.charCodeAt(1); // 取出低位
code = (H - 0xd800) * 0x400 + 0x10000 + L - 0xdc00; // 转换算法
s = `&#${code};`;
} else {
s = char;
}
return s;
});
return str;
}
// 表情解码
export function entitiestoUtf16(strObj) {
const patt = /&#\d+;/g;
const arr = strObj.match(patt) || [];
let H;
let L;
let code;
for (let i = 0; i < arr.length; i += 1) {
code = arr[i];
code = code.replace('&#', '').replace(';', '');
// 高位
H = Math.floor((code - 0x10000) / 0x400) + 0xd800;
// 低位
L = ((code - 0x10000) % 0x400) + 0xdc00;
code = `&#${code};`;
const s = String.fromCharCode(H, L);
strObj = strObj.replace(code, s);
}
return strObj;
}

47
src/views/chat/index.vue
Unescape View File

@ -4,8 +4,8 @@
<div class="body"> <div class="body">
<div class="aside"> <div class="aside">
<div class="aside-header">近期会话</div> <div class="aside-header">近期会话</div>
<el-scrollbar class="session-list"> <el-scrollbar class="session-list" tag="ul">
<div v-for="(item, index) in sessionList" :key="index" class="session-item"> <li v-for="(item, index) in sessionList" :key="index" class="session-item">
<el-badge class="session-count" :hidden="item.count === 0" :max="99" :value="item.count"> <el-badge class="session-count" :hidden="item.count === 0" :max="99" :value="item.count">
<el-avatar circle :src="item.avatar" /> <el-avatar circle :src="item.avatar" />
</el-badge> </el-badge>
@ -18,7 +18,7 @@
<div class="session-content">{{ item.content }}</div> <div class="session-content">{{ item.content }}</div>
</div> </div>
</div> </div>
</div> </li>
</el-scrollbar> </el-scrollbar>
</div> </div>
<div class="content"> <div class="content">
@ -34,10 +34,15 @@
</div> </div>
</div> </div>
<el-scrollbar class="message-list"> <el-scrollbar class="message-list">
<MessageItem v-for="(item, index) in sessionMessageList" :key="index" :message="item" /> <message-item v-for="(item, index) in sessionMessageList" :key="index" :message="item" />
</el-scrollbar> </el-scrollbar>
<div class="operation-bar"> <div class="operation-bar">
<el-button type="text"> <el-scrollbar v-show="emojiVisible" class="emoji-panel" tag="ul">
<li v-for="(item, index) in emojiList" :key="index" @click="handleAddEmoji(item)">
{{ entitiestoUtf16(item) }}
</li>
</el-scrollbar>
<el-button type="text" @click="emojiVisible = !emojiVisible">
<el-icon name="chat-smile-3-fill" size="24" /> <el-icon name="chat-smile-3-fill" size="24" />
</el-button> </el-button>
<el-button type="text"> <el-button type="text">
@ -59,6 +64,7 @@
</template> </template>
<script setup> <script setup>
import { emojiData, entitiestoUtf16 } from '@/utils/emoji.js';
import MessageItem from './message.vue'; import MessageItem from './message.vue';
const sessionList = reactive([ const sessionList = reactive([
{ {
@ -166,6 +172,14 @@
name: '小可爱', name: '小可爱',
}, },
]); ]);
const emojiVisible = ref(false);
const emojiList = computed(() => emojiData.map((item) => item.list).flat());
const handleAddEmoji = (data) => {
let str = ' ' + entitiestoUtf16(data) + ' ';
state.message += str;
emojiVisible.value = false;
};
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@ -280,6 +294,29 @@
padding: @layout-space; padding: @layout-space;
border-top: 1px solid #eee; border-top: 1px solid #eee;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
position: relative;
.emoji-panel {
position: absolute;
z-index: 9999;
border-radius: 8px;
overflow: auto;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
bottom: 52px;
width: 300px;
height: 200px;
padding: 10px 6px 10px 10px;
background: #eee;
font-size: 20px;
text-align: center;
:deep(ul) {
display: grid;
grid-template-columns: repeat(auto-fill, 30px);
column-gap: auto;
li {
cursor: pointer;
}
}
}
} }
.input { .input {
height: 100px; height: 100px;

Write Preview
Loading…
Cancel
Save