src/components/common/MyOwO.vue

@@ -1,68 +1,57 @@
<template>
   <div class="OwO fadeIn " style="" v-bind:class="{'OwO-open':open}">
      <div class="OwO-logo" @click="openOwO"><span>OωO</span></div>
      <div class="OwO-body" style="width: 100%">
         <div class="OwO-jio"></div>
   <div>
      <div class="OwO fadeIn " style="z-index:10" v-bind:class="{'OwO-open':open}">
         <div class="OwO-logo" @click="openOwO"><span>OωO</span></div>
         <div class="OwO-body" style="width: 100%;position: initial;">
            <div class="OwO-jio"></div>
            <ul class="OwO-items OwO-items-emoticon " style="max-height: 197px;"
               v-for="(packageKey, index ) in packages" v-bind:class="{'OwO-items-show':selectTabIndex==index}">
               <div v-if="myConfig[packageKey].type=='image'">

         <ul class="OwO-items OwO-items-emoticon " style="max-height: 197px;"
            v-for="(packageKey, index ) in packages" v-bind:class="{'OwO-items-show':selectTabIndex==index}">
         <!--    {{myConfig[packageKey].container.length}}
            {{myConfig[packageKey].container}} -->
				
            <li v-if="myConfig[packageKey].type=='image'" class="OwO-item" :data-id="item.data" :title="item.text"
               v-for="(item,index ) in myConfig[packageKey].container">
               <img loading="lazy" :class="'biaoqing '+item.data" :src="item.icon">
            </li>
                  <li class="OwO-item" :data-id="item.data" :title="item.text"
                     v-for="(item,index ) in myConfig[packageKey].container" @click="getCotent(item,false)">
                     <img loading="lazy" :class="'biaoqing '+item.css" :src="item.icon">
                  </li>
               </div>

            <li v-else class="OwO-item" :data-id="item.data" :title="item.text"
               v-for="(item,index ) in myConfig[packageKey].container">
               {{item.icon}}
            </li>

            <!-- <li class="OwO-item" data-id="${opackage[i].data}" title="${opackage[i].text}">
               <img loading="lazy" class="biaoqing ${opackage[i].css}" src="${opackage[i].icon}"></li>`
            </li> -->
         </ul>

         <div class="OwO-bar">
            <ul class="OwO-packages">
               <li v-bind:class="{'OwO-package-active':selectTabIndex==0}" @click="switchTab(0)"><span>颜文字</span>
               </li>
               <li v-bind:class="{'OwO-package-active':selectTabIndex==1}" @click="switchTab(1)"><span>Emoji</span>
               </li>
               <li v-bind:class="{'OwO-package-active':selectTabIndex==2}" @click="switchTab(2)"><span>蛆音娘</span>
               </li>
               <li v-bind:class="{'OwO-package-active':selectTabIndex==3}" @click="switchTab(3)"><span>阿鲁</span>
               </li>
               <li v-bind:class="{'OwO-package-active':selectTabIndex==4}" @click="switchTab(4)"><span>泡泡</span>
               </li>
               <li v-bind:class="{'OwO-package-active':selectTabIndex==5}" @click="switchTab(5)"><span>Heo</span>
               </li>
               <div v-else>
                  <li class="OwO-item" data-id="not-given" :title="item.text"
                     v-for="(item,index) in myConfig[packageKey].container" @click="getCotent(item,true)">
                     {{item.icon}}
                  </li>
               </div>
            </ul>

            <div class="OwO-bar" style="height: auto;">
               <ul class="OwO-packages">
                  <li v-bind:class="{'OwO-package-active':selectTabIndex==index}" @click="switchTab(index)"
                     style="border-bottom: 1px solid;" v-for="(packagesName,index) in packages">
                     <span>{{packagesName}}</span>
                  </li>
               </ul>
            </div>
         </div>
      </div>
   </div>
</template>

<script>
   import OwOjsonConfig from '../../assets/OwO.json'
   import '../../assets/css/OwO.min.css';
   import OwOjsonConfig from '../../assets/OwO.json';

   export default {
      data() {
         return {
            open: true,
            open: false,
            selectTabIndex: 0,
            tabNameList: [],
            packages: null,
            myConfig: OwOjsonConfig,
            selectContext: null
         }
      },
      mounted() {
         this.init()
      },
      methods: {
         switchTab(index) {
            // this.$message.info(index)
            this.selectTabIndex = index;
         },
         openOwO() {
@@ -74,10 +63,20 @@
               return
            }
            this.packages = Object.keys(OwOjsonConfig);
         }
         },
         getCotent(item, outputType) {
            if (outputType) {
               this.selectContext = item.icon;
            } else {
               this.selectContext = item.data;
            }
            this.$emit("insertOwO", this.selectContext)
         },
			
      }
   }
</script>

<style>
<style lang="less">

</style>