| commit | author | age | ||
| afab3a | 1 | <template> |
| I | 2 | <div class="OwO fadeIn " style="" v-bind:class="{'OwO-open':open}"> |
| 3 | <div class="OwO-logo" @click="openOwO"><span>OωO</span></div> | |
| 4 | <div class="OwO-body" style="width: 100%"> | |
| 5 | <div class="OwO-jio"></div> | |
| 6 | ||
| 7 | <ul class="OwO-items OwO-items-emoticon " style="max-height: 197px;" | |
| 8 | v-for="(packageKey, index ) in packages" v-bind:class="{'OwO-items-show':selectTabIndex==index}"> | |
| 9 | <!-- {{myConfig[packageKey].container.length}} | |
| 10 | {{myConfig[packageKey].container}} --> | |
| 11 | ||
| 12 | <li v-if="myConfig[packageKey].type=='image'" class="OwO-item" :data-id="item.data" :title="item.text" | |
| 13 | v-for="(item,index ) in myConfig[packageKey].container"> | |
| 14 | <img loading="lazy" :class="'biaoqing '+item.data" :src="item.icon"> | |
| 15 | </li> | |
| 16 | ||
| 17 | <li v-else class="OwO-item" :data-id="item.data" :title="item.text" | |
| 18 | v-for="(item,index ) in myConfig[packageKey].container"> | |
| 19 | {{item.icon}} | |
| 20 | </li> | |
| 21 | ||
| 22 | <!-- <li class="OwO-item" data-id="${opackage[i].data}" title="${opackage[i].text}"> | |
| 23 | <img loading="lazy" class="biaoqing ${opackage[i].css}" src="${opackage[i].icon}"></li>` | |
| 24 | </li> --> | |
| 25 | </ul> | |
| 26 | ||
| 27 | <div class="OwO-bar"> | |
| 28 | <ul class="OwO-packages"> | |
| 29 | <li v-bind:class="{'OwO-package-active':selectTabIndex==0}" @click="switchTab(0)"><span>颜文字</span> | |
| 30 | </li> | |
| 31 | <li v-bind:class="{'OwO-package-active':selectTabIndex==1}" @click="switchTab(1)"><span>Emoji</span> | |
| 32 | </li> | |
| 33 | <li v-bind:class="{'OwO-package-active':selectTabIndex==2}" @click="switchTab(2)"><span>蛆音娘</span> | |
| 34 | </li> | |
| 35 | <li v-bind:class="{'OwO-package-active':selectTabIndex==3}" @click="switchTab(3)"><span>阿鲁</span> | |
| 36 | </li> | |
| 37 | <li v-bind:class="{'OwO-package-active':selectTabIndex==4}" @click="switchTab(4)"><span>泡泡</span> | |
| 38 | </li> | |
| 39 | <li v-bind:class="{'OwO-package-active':selectTabIndex==5}" @click="switchTab(5)"><span>Heo</span> | |
| 40 | </li> | |
| 41 | </ul> | |
| 42 | </div> | |
| 43 | </div> | |
| 44 | </div> | |
| 45 | </template> | |
| 46 | ||
| 47 | <script> | |
| 48 | import OwOjsonConfig from '../../assets/OwO.json' | |
| 49 | ||
| 50 | export default { | |
| 51 | data() { | |
| 52 | return { | |
| 53 | open: true, | |
| 54 | selectTabIndex: 0, | |
| 55 | tabNameList: [], | |
| 56 | packages: null, | |
| 57 | myConfig: OwOjsonConfig, | |
| 58 | } | |
| 59 | }, | |
| 60 | mounted() { | |
| 61 | this.init() | |
| 62 | }, | |
| 63 | methods: { | |
| 64 | switchTab(index) { | |
| 65 | // this.$message.info(index) | |
| 66 | this.selectTabIndex = index; | |
| 67 | }, | |
| 68 | openOwO() { | |
| 69 | this.open = !this.open | |
| 70 | this.init() | |
| 71 | }, | |
| 72 | init() { | |
| 73 | if (this.packages != null) { | |
| 74 | return | |
| 75 | } | |
| 76 | this.packages = Object.keys(OwOjsonConfig); | |
| 77 | } | |
| 78 | } | |
| 79 | } | |
| 80 | </script> | |
| 81 | ||
| 82 | <style> | |
| 83 | </style> | |
