表情包更换

dist/index.html

@@ -6,7 +6,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <title>广告系统</title>
       <script src="//open.thunderurl.com/thunder-link.js"></script>
-    <script type="module" crossorigin src="./assets/index.22aacf9f.js"></script>
+    <script type="module" crossorigin src="./assets/index.70f55177.js"></script>
     <link rel="modulepreload" href="./js/@vue/@vue.a4e5ba32.js">
     <link rel="modulepreload" href="./js/vue-router/vue-router.3516c392.js">
     <link rel="modulepreload" href="./js/axios/axios.8506093b.js">
@@ -22,7 +22,7 @@
     <link rel="modulepreload" href="./js/@popperjs/@popperjs.f1fb8f77.js">
     <link rel="modulepreload" href="./js/escape-html/escape-html.d572c0fd.js">
     <link rel="modulepreload" href="./js/normalize-wheel-es/normalize-wheel-es.94de1731.js">
-    <link rel="modulepreload" href="./js/element-plus/element-plus.d346164c.js">
+    <link rel="modulepreload" href="./js/element-plus/element-plus.e23d1172.js">
     <link rel="modulepreload" href="./js/tslib/tslib.e35f93b8.js">
     <link rel="modulepreload" href="./js/zrender/zrender.fe59a237.js">
     <link rel="modulepreload" href="./js/echarts/echarts.5b4b2848.js">

src/common/emoji.js

@@ -0,0 +1,107 @@
+export const emojiList = [
+    "[微笑]",
+    "[撇嘴]",
+    "[色]",
+    "[发呆]",
+    "[得意]",
+    "[流泪]",
+    "[害羞]",
+    "[闭嘴]",
+    "[睡]",
+    "[大哭]",
+    "[尴尬]",
+    "[发怒]",
+    "[调皮]",
+    "[呲牙]",
+    "[惊讶]",
+    "[难过]",
+    "[酷]",
+    "[冷汗]",
+    "[抓狂]",
+    "[吐]",
+    "[偷笑]",
+    "[可爱]",
+    "[白眼]",
+    "[傲慢]",
+    "[饥饿]",
+    "[困]",
+    "[惊恐]",
+    "[流汗]",
+    "[憨笑]",
+    "[大兵]",
+    "[奋斗]",
+    "[咒骂]",
+    "[疑问]",
+    "[嘘]",
+    "[晕]",
+    "[折磨]",
+    "[衰]",
+    "[骷髅]",
+    "[敲打]",
+    "[再见]",
+    "[擦汗]",
+    "[抠鼻]",
+    "[鼓掌]",
+    "[糗大了]",
+    "[坏笑]",
+    "[左哼哼]",
+    "[右哼哼]",
+    "[哈欠]",
+    "[鄙视]",
+    "[委屈]",
+    "[快哭了]",
+    "[阴险]",
+    "[亲亲]",
+    "[吓]",
+    "[可怜]",
+    "[菜刀]",
+    "[西瓜]",
+    "[啤酒]",
+    "[篮球]",
+    "[乒乓]",
+    "[咖啡]",
+    "[饭]",
+    "[猪头]",
+    "[玫瑰]",
+    "[凋谢]",
+    "[示爱]",
+    "[爱心]",
+    "[心碎]",
+    "[蛋糕]",
+    "[闪电]",
+    "[炸弹]",
+    "[刀]",
+    "[足球]",
+    "[瓢虫]",
+    "[便便]",
+    "[月亮]",
+    "[太阳]",
+    "[礼物]",
+    "[拥抱]",
+    "[强]",
+    "[弱]",
+    "[握手]",
+    "[胜利]",
+    "[抱拳]",
+    "[勾引]",
+    "[拳头]",
+    "[差劲]",
+    "[爱你]",
+    "[NO]",
+    "[OK]",
+    "[爱情]",
+    "[飞吻]",
+    "[跳跳]",
+    "[发抖]",
+    "[怄火]",
+    "[转圈]",
+    "[磕头]",
+    "[回头]",
+    "[跳绳]",
+    "[挥手]",
+    "[激动]",
+    "[街舞]",
+    "[献吻]",
+    "[左太极]",
+    "[右太极]"
+]

src/components/businessMoudle/textLibrary/dialog/addEditText.vue

@@ -14,7 +14,16 @@
           <div class="flex  titleBox">
             <div>文案 <span v-if="getRows()>0" class="c-theme">{{getRows()}}</span></div>
             <div class="lMarauto">
-              <V3Emoji size="mid" :custom-size="customSize" :fulldata="true" @click-emoji="appendText" :disableGroup="disableGroupArr"/>
+              <el-popover trigger="hover" width="400">
+                <div class="emojiBox">
+                  <img class="pointer" v-for="(i,idx) in emojiList" @click="appendText(i)" :alt="i" :title="i"
+                       style="width: 28px;height: 28px;margin-right: 6px;margin-bottom: 6px;display: inline-block"
+                       :src="'https://wxa.wxs.qq.com/wxad-design/emojis/smiley_'+idx+'.png'" />
+                </div>
+                <template #reference>
+                  <img class="pointer"  src="@/assets/img/icon.png" alt="" width="20">
+                </template>
+              </el-popover>
             </div>
           </div>
           <div class="tips">系统会根据您填写的文案长度,自动设配不同要求的创意形式,添加多个文案请换行</div>
@@ -31,17 +40,8 @@ import TypeSelect from './type.vue'
 import {getCurrentInstance, nextTick, onMounted, reactive, ref} from "vue";
 import {textParam} from "@/api/ApiModel";
 import {Api} from "@/api/api";
+import {emojiList} from "@/common/emoji";
 import {ElMessage} from "element-plus";
-import V3Emoji from 'vue3-emoji'
-import 'vue3-emoji/dist/style.css'
-
-const customSize= {
-  'V3Emoji-width': '500px',
-  'V3Emoji-height': '250px',
-  'V3Emoji-fontSize': '1rem',
-  'V3Emoji-itemSize': '20px'
-};
-const disableGroupArr= ['People & Body','Animals & Nature','Food & Drink','Travel & Places','Activities','Objects','Symbols','Flags']
 
 const emit = defineEmits<{
   (event: "init"): void;
@@ -70,12 +70,12 @@ const appendText = (val:any) => {
   if (startPos === undefined || endPos === undefined) return
   var txt = elInput.value;
   // 将表情添加到选中的光标位置
-  var result = txt.substring(0, startPos) + val.emoji + txt.substring(endPos)
+  var result = txt.substring(0, startPos) + val + txt.substring(endPos)
   elInput.value = result;// 赋值给input的value
   // 重新定义光标位置
   elInput.focus();
-  elInput.selectionStart = startPos + val.name.length;
-  // elInput.selectionEnd = endPos + val.name.length;
+  elInput.selectionStart = startPos + val.length;
+  elInput.selectionEnd = endPos + val.length;
   text_textarea.value  = result// 赋值给表单中的的字段
 }
 
@@ -84,31 +84,23 @@ const appendText = (val:any) => {
 const loading = ref<boolean>(false)
 const text_textarea = ref<string>('')
 // 提交前判断是否为空
-const checkValEvent = () => {
-  nextTick(()=>{
-    return new Promise(async (resolve:any, reject:any) => {
-      if (!typeRef.value!.textVal) {
-        ElMessage.error('请选择分类')
-        reject()
-      } else if(text_textarea.value == ''){
-        ElMessage.error('请输入文案')
-        reject()
-      } else {
-        if(typeof typeRef.value!.textVal == 'number'){}else{
-          await typeRef.value!.add_type()
-        }
-        resolve()
-      }
-    })
-  })
-}
 //关闭
 const closeEvent = () => {
   dialogShow.value = false
   emit('initType')
 }
 const confirmEvent = async ()=>{
-  await checkValEvent()
+  if (!typeRef.value!.textVal) {
+    ElMessage.error('请选择分类')
+    return
+  } else if(text_textarea.value == ''){
+    ElMessage.error('请输入文案')
+    return
+  } else {
+    if(typeof typeRef.value!.textVal == 'number'){}else{
+      await typeRef.value!.add_type()
+    }
+  }
   loading.value = true
   const paramsModel = reactive<textParam>({
     classify_id:Number(typeRef.value!.textVal),
@@ -180,16 +172,6 @@ onMounted(()=>{
 })
 </script>
 <style lang="scss" scoped>
-:deep(.pollup .tab-name){
-  display: none;
-}
-:deep(.pollup .emoji-container){
-  max-height: calc(var(--V3Emoji-height) * 2 - 50px);
-}
-:deep(.pollup){
-  z-index: 999;
-  top: 30px;
-}
 .addTextSelect{
   :deep(.el-select-dropdown__item){
     padding: 0 10px;