From 271ca6cb0ee2ff0a789bf74d1821e7891a7043bb Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Tue, 30 Aug 2022 21:57:42 +0800
Subject: [PATCH] 自定义表情组件
---
src/components/common/MyOwO.vue | 89 ++++++++++++++++++++++----------------------
1 files changed, 44 insertions(+), 45 deletions(-)
diff --git a/src/components/common/MyOwO.vue b/src/components/common/MyOwO.vue
index 67c3742..f071363 100644
--- a/src/components/common/MyOwO.vue
+++ b/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>
--
Gitblit v1.9.1