xwl2023/Yi.Framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 表情包功能

Browse Source
This commit is contained in:
陈淳
2024-01-18 17:56:13 +08:00
parent 7475a683cc
commit a81873c148
5 changed files with 96 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
Yi.Bbs.Vue3/package-lock.json generated
View File

@@ -26,6 +26,7 @@
"vue": "^3.2.47",
"vue-cropper": "1.0.3",
"vue-router": "^4.1.6",
"vue3-emoji-picker": "^1.1.8",
"yarm": "^0.4.0",
"yarn": "^1.22.21"
},
@@ -2410,6 +2411,11 @@
"node": ">=0.4"
}
},
"node_modules/idb": {
"version": "7.1.1",
"resolved": "https://registry.npmmirror.com/idb/-/idb-7.1.1.tgz",
"integrity": "sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ=="
},
"node_modules/ignore": {
"version": "5.2.4",
"resolved": "https://registry.npmmirror.com/ignore/-/ignore-5.2.4.tgz",
@@ -3842,6 +3848,19 @@
"vue": "^3.2.0"
}
},
"node_modules/vue3-emoji-picker": {
"version": "1.1.8",
"resolved": "https://registry.npmmirror.com/vue3-emoji-picker/-/vue3-emoji-picker-1.1.8.tgz",
"integrity": "sha512-k9tVHeQEBVLzVCLYAkFaI1nib3FJFQwdPhWD5khJkhks3ktg3g12z5wPGOSDpIuSLNtelRGvq1qdmZuJu5khfA==",
"dependencies": {
"@popperjs/core": "^2.11.0",
"idb": "^7.1.0",
"vue": "^3.2.23"
},
"engines": {
"node": ">=16.0.0"
}
},
"node_modules/watchpack": {
"version": "2.4.0",
"resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.0.tgz",
@@ -5898,6 +5917,11 @@
"resolved": "https://registry.npmmirror.com/i/-/i-0.3.7.tgz",
"integrity": "sha512-FYz4wlXgkQwIPqhzC5TdNMLSE5+GS1IIDJZY/1ZiEPCT2S3COUVZeT5OW4BmW4r5LHLQuOosSwsvnroG9GR59Q=="
},
"idb": {
"version": "7.1.1",
"resolved": "https://registry.npmmirror.com/idb/-/idb-7.1.1.tgz",
"integrity": "sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ=="
},
"ignore": {
"version": "5.2.4",
"resolved": "https://registry.npmmirror.com/ignore/-/ignore-5.2.4.tgz",
@@ -7008,6 +7032,16 @@
"@vue/devtools-api": "^6.4.5"
}
},
"vue3-emoji-picker": {
"version": "1.1.8",
"resolved": "https://registry.npmmirror.com/vue3-emoji-picker/-/vue3-emoji-picker-1.1.8.tgz",
"integrity": "sha512-k9tVHeQEBVLzVCLYAkFaI1nib3FJFQwdPhWD5khJkhks3ktg3g12z5wPGOSDpIuSLNtelRGvq1qdmZuJu5khfA==",
"requires": {
"@popperjs/core": "^2.11.0",
"idb": "^7.1.0",
"vue": "^3.2.23"
}
},
"watchpack": {
"version": "2.4.0",
"resolved": "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.0.tgz",

1
Yi.Bbs.Vue3/package.json
View File

@@ -27,6 +27,7 @@
"vue": "^3.2.47",
"vue-cropper": "1.0.3",
"vue-router": "^4.1.6",
"vue3-emoji-picker": "^1.1.8",
"yarm": "^0.4.0",
"yarn": "^1.22.21"
},

23
Yi.Bbs.Vue3/src/components/EmojiPanel.vue Normal file
View File

@@ -0,0 +1,23 @@
<template>
<EmojiPicker :native="true" @select="onSelectEmoji" />
</template>
<script setup>
import EmojiPicker from "vue3-emoji-picker";
import "vue3-emoji-picker/css";
const emits=defineEmits(['onSelect'])
const onSelectEmoji = (emoji) => {
emits('onSelect',emoji)
/*
// result
{
i: "😚",
n: ["kissing face"],
r: "1f61a", // with skin tone
t: "neutral", // skin tone
u: "1f61a" // without tone
}
*/
};
</script>

43
Yi.Bbs.Vue3/src/components/MavonEdit.vue
View File

@@ -1,6 +1,6 @@
<template>
<mavon-editor ref='md' v-model="text" :subfield="true" :codeStyle="props.codeStyle" :ishljs="true"
:style="{ minHeight: props.height, maxHeight: '100%' }" class="edit" @imgAdd="imgAdd">
:style="{ minHeight: props.height, maxHeight: '100%' }" class="edit" @imgAdd="imgAdd" @change="change">
<!-- 引用视频链接的自定义按钮 -->
<template v-slot:left-toolbar-after>
@@ -13,33 +13,16 @@
<el-dropdown :hide-on-click='false'>
<el-button aria-hidden="true" class="op-icon fa" title="表情包">
<el-button aria-hidden="true" class="op-icon fa" title="表情包">
😊
</el-button>
<template #dropdown>
<el-dropdown-menu >
<el-dropdown-item>
<table border="1">
<tr>
<td @click="text+='😊'">😊</td>
<td>😊</td>
<td>😊</td>
</tr>
<tr>
<td>😊</td>
<td>😊</td>
<td>😊</td>
</tr>
<tr>
<td>😊</td>
<td>😊</td>
<td>😊</td>
</tr>
</table>
</el-dropdown-item>
</el-dropdown-menu>
<EmojiPanel @onSelect="onSelectEmoji"/>
</template>
</el-dropdown>
@@ -94,6 +77,7 @@ import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
import { ref, computed, watch, onMounted } from 'vue';
import { upload } from '@/apis/fileApi'
import EmojiPanel from '@/components/EmojiPanel.vue'
const md = ref(null);
const props = defineProps(['height', 'modelValue', "codeStyle"])
@@ -138,6 +122,19 @@ const imgAdd = async (pos, $file) => {
md.value.$img2Url(pos, url);
}
//选择表情包
const onSelectEmoji=(emoji)=>{
console.log(emoji.i,"emoji");
text.value+=emoji.i
}
const change=(value,render)=>{
}
</script>

18
Yi.Bbs.Vue3/yarn.lock
View File

@@ -361,7 +361,7 @@
"unimport" "^2.2.4"
"untyped" "^1.2.2"
"@popperjs/core@npm:@sxzz/popperjs-es@^2.11.7":
"@popperjs/core@^2.11.0", "@popperjs/core@npm:@sxzz/popperjs-es@^2.11.7":
"integrity" "sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ=="
"resolved" "https://registry.npmmirror.com/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz"
"version" "2.11.7"
@@ -1330,6 +1330,11 @@
"resolved" "https://registry.npmmirror.com/i/-/i-0.3.7.tgz"
"version" "0.3.7"
"idb@^7.1.0":
"integrity" "sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ=="
"resolved" "https://registry.npmmirror.com/idb/-/idb-7.1.1.tgz"
"version" "7.1.1"
"ignore@^5.2.0", "ignore@^5.2.4":
"integrity" "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ=="
"resolved" "https://registry.npmmirror.com/ignore/-/ignore-5.2.4.tgz"
@@ -2241,7 +2246,7 @@
dependencies:
"@vue/devtools-api" "^6.4.5"
"vue@^2.6.14 || ^3.2.0", "vue@^3.0.0-0 || ^2.6.0", "vue@^3.2.0", "vue@^3.2.25", "vue@^3.2.47", "vue@2 || 3", "vue@3.2.47":
"vue@^2.6.14 || ^3.2.0", "vue@^3.0.0-0 || ^2.6.0", "vue@^3.2.0", "vue@^3.2.23", "vue@^3.2.25", "vue@^3.2.47", "vue@2 || 3", "vue@3.2.47":
"integrity" "sha512-60188y/9Dc9WVrAZeUVSDxRQOZ+z+y5nO2ts9jWXSTkMvayiWxCWOWtBQoYjLeccfXkiiPZWAHcV+WTPhkqJHQ=="
"resolved" "https://registry.npmmirror.com/vue/-/vue-3.2.47.tgz"
"version" "3.2.47"
@@ -2252,6 +2257,15 @@
"@vue/server-renderer" "3.2.47"
"@vue/shared" "3.2.47"
"vue3-emoji-picker@^1.1.8":
"integrity" "sha512-k9tVHeQEBVLzVCLYAkFaI1nib3FJFQwdPhWD5khJkhks3ktg3g12z5wPGOSDpIuSLNtelRGvq1qdmZuJu5khfA=="
"resolved" "https://registry.npmmirror.com/vue3-emoji-picker/-/vue3-emoji-picker-1.1.8.tgz"
"version" "1.1.8"
dependencies:
"@popperjs/core" "^2.11.0"
"idb" "^7.1.0"
"vue" "^3.2.23"
"watchpack@^2.4.0":
"integrity" "sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg=="
"resolved" "https://registry.npmmirror.com/watchpack/-/watchpack-2.4.0.tgz"