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] 自定义表情组件
---
/dev/null | 66 -------------
src/components/mini/box13-reply.vue | 11 +-
src/components/common/MyTextarea.vue | 67 +++++++++++++
package.json | 1
src/components/swichLabel/edit.vue | 3
src/components/iframe/videoMiniBox.vue | 6
src/assets/css/OwO.min.css | 1
src/components/common/MyOwO.vue | 89 ++++++++---------
8 files changed, 123 insertions(+), 121 deletions(-)
diff --git a/package.json b/package.json
index 5936516..933c021 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,6 @@
"location": "0.0.1",
"mockjs2": "^1.0.8",
"navigator": "^1.0.1",
- "owo": "^1.0.2",
"text-loader": "^0.0.1",
"v-viewer": "^1.6.4",
"vue": "^2.6.14",
diff --git a/src/assets/css/OwO.min.css b/src/assets/css/OwO.min.css
new file mode 100644
index 0000000..10f1c14
--- /dev/null
+++ b/src/assets/css/OwO.min.css
@@ -0,0 +1 @@
+.OwO{position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.OwO:hover .OwO-logo{color:#444}.OwO.OwO-open .OwO-logo{border-radius:4px 4px 0 0;border-bottom:none;color:#444}.OwO.OwO-open .OwO-body{display:block}.OwO.OwO-up .OwO-body{top:inherit;bottom:21px;border-radius:4px 4px 4px 0}.OwO.OwO-up .OwO-body .OwO-bar .OwO-packages li:nth-child(1){border-radius:0}.OwO.OwO-up.OwO-open .OwO-logo{border:1px solid #ddd;border-radius:0 0 4px 4px;border-top:none}.OwO .OwO-logo{position:relative;display:inline-block;color:#888;background:#fff;border:1px solid #ddd;border-radius:4px;font-size:13px;padding:2px 5px;cursor:pointer;height:22px;box-sizing:border-box;z-index:2;line-height:16px}.OwO .OwO-logo:hover span{display:inline-block;-webkit-animation:a 5s infinite ease-in-out;animation:a 5s infinite ease-in-out}.OwO .OwO-body{display:none;position:absolute;width:400px;background:#fff;border:1px solid #ddd;z-index:1;top:21px;border-radius:0 4px 4px 4px}.OwO .OwO-body .OwO-items{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:none;padding:10px;margin:0;overflow:scroll;font-size:0}.OwO .OwO-body .OwO-items .OwO-item{list-style-type:none;background:#f7f7f7;padding:5px 10px;border-radius:5px;display:inline-block;font-size:12px;line-height:14px;margin:0 10px 12px 0;cursor:pointer;-webkit-transition:.3s;transition:.3s}.OwO .OwO-body .OwO-items .OwO-item:hover{background:#eee;box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);-webkit-animation:a 5s infinite ease-in-out;animation:a 5s infinite ease-in-out}.OwO .OwO-body .OwO-items-emoji .OwO-item{font-size:20px;line-height:19px}.OwO .OwO-body .OwO-items-image .OwO-item{max-width:calc(25% - 10px);box-sizing:border-box}.OwO .OwO-body .OwO-items-image .OwO-item img{max-width:100%}.OwO .OwO-body .OwO-items-show{display:block}.OwO .OwO-body .OwO-bar{width:100%;height:30px;border-top:1px solid #ddd;background:#fff;border-radius:0 0 4px 4px;color:#444}.OwO .OwO-body .OwO-bar .OwO-packages{margin:0;padding:0;font-size:0}.OwO .OwO-body .OwO-bar .OwO-packages li{list-style-type:none;display:inline-block;line-height:30px;font-size:14px;padding:0 10px;cursor:pointer;margin-right:3px}.OwO .OwO-body .OwO-bar .OwO-packages li:nth-child(1){border-radius:0 0 0 3px}.OwO .OwO-body .OwO-bar .OwO-packages li:hover{background:#eee}.OwO .OwO-body .OwO-bar .OwO-packages .OwO-package-active{background:#eee;-webkit-transition:.3s;transition:.3s}@-webkit-keyframes a{2%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}4%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg)}6%{-webkit-transform:translateY(1.5px) rotate(-1.5deg);transform:translateY(1.5px) rotate(-1.5deg)}8%{-webkit-transform:translateY(-1.5px) rotate(-1.5deg);transform:translateY(-1.5px) rotate(-1.5deg)}10%{-webkit-transform:translateY(2.5px) rotate(1.5deg);transform:translateY(2.5px) rotate(1.5deg)}12%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}14%{-webkit-transform:translateY(-1.5px) rotate(1.5deg);transform:translateY(-1.5px) rotate(1.5deg)}16%{-webkit-transform:translateY(-.5px) rotate(-1.5deg);transform:translateY(-.5px) rotate(-1.5deg)}18%{-webkit-transform:translateY(.5px) rotate(-1.5deg);transform:translateY(.5px) rotate(-1.5deg)}20%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}22%{-webkit-transform:translateY(.5px) rotate(-1.5deg);transform:translateY(.5px) rotate(-1.5deg)}24%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}26%{-webkit-transform:translateY(.5px) rotate(.5deg);transform:translateY(.5px) rotate(.5deg)}28%{-webkit-transform:translateY(.5px) rotate(1.5deg);transform:translateY(.5px) rotate(1.5deg)}30%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}32%,34%{-webkit-transform:translateY(1.5px) rotate(-.5deg);transform:translateY(1.5px) rotate(-.5deg)}36%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}38%{-webkit-transform:translateY(1.5px) rotate(-1.5deg);transform:translateY(1.5px) rotate(-1.5deg)}40%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}42%{-webkit-transform:translateY(2.5px) rotate(-1.5deg);transform:translateY(2.5px) rotate(-1.5deg)}44%{-webkit-transform:translateY(1.5px) rotate(.5deg);transform:translateY(1.5px) rotate(.5deg)}46%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}48%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg)}50%{-webkit-transform:translateY(.5px) rotate(.5deg);transform:translateY(.5px) rotate(.5deg)}52%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}54%{-webkit-transform:translateY(-1.5px) rotate(1.5deg);transform:translateY(-1.5px) rotate(1.5deg)}56%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}58%{-webkit-transform:translateY(.5px) rotate(2.5deg);transform:translateY(.5px) rotate(2.5deg)}60%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}62%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}64%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}66%{-webkit-transform:translateY(1.5px) rotate(-.5deg);transform:translateY(1.5px) rotate(-.5deg)}68%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg)}70%{-webkit-transform:translateY(1.5px) rotate(.5deg);transform:translateY(1.5px) rotate(.5deg)}72%{-webkit-transform:translateY(2.5px) rotate(1.5deg);transform:translateY(2.5px) rotate(1.5deg)}74%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg)}76%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}78%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}80%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}82%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg)}84%{-webkit-transform:translateY(1.5px) rotate(2.5deg);transform:translateY(1.5px) rotate(2.5deg)}86%{-webkit-transform:translateY(-1.5px) rotate(-1.5deg);transform:translateY(-1.5px) rotate(-1.5deg)}88%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}90%{-webkit-transform:translateY(2.5px) rotate(-.5deg);transform:translateY(2.5px) rotate(-.5deg)}92%{-webkit-transform:translateY(.5px) rotate(-.5deg);transform:translateY(.5px) rotate(-.5deg)}94%{-webkit-transform:translateY(2.5px) rotate(.5deg);transform:translateY(2.5px) rotate(.5deg)}96%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}98%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg)}0%,to{-webkit-transform:translate(0) rotate(0deg);transform:translate(0) rotate(0deg)}}@keyframes a{2%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}4%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg)}6%{-webkit-transform:translateY(1.5px) rotate(-1.5deg);transform:translateY(1.5px) rotate(-1.5deg)}8%{-webkit-transform:translateY(-1.5px) rotate(-1.5deg);transform:translateY(-1.5px) rotate(-1.5deg)}10%{-webkit-transform:translateY(2.5px) rotate(1.5deg);transform:translateY(2.5px) rotate(1.5deg)}12%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}14%{-webkit-transform:translateY(-1.5px) rotate(1.5deg);transform:translateY(-1.5px) rotate(1.5deg)}16%{-webkit-transform:translateY(-.5px) rotate(-1.5deg);transform:translateY(-.5px) rotate(-1.5deg)}18%{-webkit-transform:translateY(.5px) rotate(-1.5deg);transform:translateY(.5px) rotate(-1.5deg)}20%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}22%{-webkit-transform:translateY(.5px) rotate(-1.5deg);transform:translateY(.5px) rotate(-1.5deg)}24%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}26%{-webkit-transform:translateY(.5px) rotate(.5deg);transform:translateY(.5px) rotate(.5deg)}28%{-webkit-transform:translateY(.5px) rotate(1.5deg);transform:translateY(.5px) rotate(1.5deg)}30%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}32%,34%{-webkit-transform:translateY(1.5px) rotate(-.5deg);transform:translateY(1.5px) rotate(-.5deg)}36%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}38%{-webkit-transform:translateY(1.5px) rotate(-1.5deg);transform:translateY(1.5px) rotate(-1.5deg)}40%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}42%{-webkit-transform:translateY(2.5px) rotate(-1.5deg);transform:translateY(2.5px) rotate(-1.5deg)}44%{-webkit-transform:translateY(1.5px) rotate(.5deg);transform:translateY(1.5px) rotate(.5deg)}46%{-webkit-transform:translateY(-1.5px) rotate(2.5deg);transform:translateY(-1.5px) rotate(2.5deg)}48%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg)}50%{-webkit-transform:translateY(.5px) rotate(.5deg);transform:translateY(.5px) rotate(.5deg)}52%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}54%{-webkit-transform:translateY(-1.5px) rotate(1.5deg);transform:translateY(-1.5px) rotate(1.5deg)}56%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}58%{-webkit-transform:translateY(.5px) rotate(2.5deg);transform:translateY(.5px) rotate(2.5deg)}60%{-webkit-transform:translateY(2.5px) rotate(2.5deg);transform:translateY(2.5px) rotate(2.5deg)}62%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}64%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}66%{-webkit-transform:translateY(1.5px) rotate(-.5deg);transform:translateY(1.5px) rotate(-.5deg)}68%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg)}70%{-webkit-transform:translateY(1.5px) rotate(.5deg);transform:translateY(1.5px) rotate(.5deg)}72%{-webkit-transform:translateY(2.5px) rotate(1.5deg);transform:translateY(2.5px) rotate(1.5deg)}74%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg)}76%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}78%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}80%{-webkit-transform:translateY(1.5px) rotate(1.5deg);transform:translateY(1.5px) rotate(1.5deg)}82%{-webkit-transform:translateY(-.5px) rotate(.5deg);transform:translateY(-.5px) rotate(.5deg)}84%{-webkit-transform:translateY(1.5px) rotate(2.5deg);transform:translateY(1.5px) rotate(2.5deg)}86%{-webkit-transform:translateY(-1.5px) rotate(-1.5deg);transform:translateY(-1.5px) rotate(-1.5deg)}88%{-webkit-transform:translateY(-.5px) rotate(2.5deg);transform:translateY(-.5px) rotate(2.5deg)}90%{-webkit-transform:translateY(2.5px) rotate(-.5deg);transform:translateY(2.5px) rotate(-.5deg)}92%{-webkit-transform:translateY(.5px) rotate(-.5deg);transform:translateY(.5px) rotate(-.5deg)}94%{-webkit-transform:translateY(2.5px) rotate(.5deg);transform:translateY(2.5px) rotate(.5deg)}96%{-webkit-transform:translateY(-.5px) rotate(1.5deg);transform:translateY(-.5px) rotate(1.5deg)}98%{-webkit-transform:translateY(-1.5px) rotate(-.5deg);transform:translateY(-1.5px) rotate(-.5deg)}0%,to{-webkit-transform:translate(0) rotate(0deg);transform:translate(0) rotate(0deg)}}
\ No newline at end of file
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>
diff --git a/src/components/common/MyTextarea.vue b/src/components/common/MyTextarea.vue
new file mode 100644
index 0000000..fbc432a
--- /dev/null
+++ b/src/components/common/MyTextarea.vue
@@ -0,0 +1,67 @@
+<template>
+ <div id="area">
+ <a-form-item>
+ <a-textarea ref="targetArea" :rows="4" v-model="visitorContent" :placeholder="this.$attrs.replyHolder"
+ class="OwO-textarea" />
+ </a-form-item>
+ <MyOwO @insertOwO="insertOwO"></MyOwO>
+ </div>
+</template>
+
+<script>
+ import MyOwO from './MyOwO.vue'
+
+ export default {
+ components: {
+ MyOwO
+ },
+ props: {
+ content: String
+ },
+ data() {
+ return {
+ visitorContent: '',
+ }
+ },
+ watch: {
+ visitorContent: function(newValue, oldValue) {
+ // if (newValue.length > 0) {
+ // if (!this.init) {
+ // this.showTip = true;
+ // setTimeout(() => {
+ // this.showTip = false;
+ // }, 5000);
+ // }
+ // this.init = true;
+ // this.initOwO();
+ // }
+ this.$emit("update:content", newValue)
+ },
+ },
+ methods: {
+ insertOwO(text) {
+ console.log(text);
+ this.insertInputTxt(text)
+ },
+ insertInputTxt(insertTxt) {
+ var elInput = this.$refs.targetArea.$el
+ var startPos = elInput.selectionStart
+ var endPos = elInput.selectionEnd
+ if (startPos === undefined || endPos === undefined) return
+ var txt = elInput.value
+ var result = txt.substring(0, startPos) + insertTxt + txt.substring(endPos)
+ elInput.value = result
+ this.visitorContent = result
+ elInput.focus()
+ elInput.selectionStart = startPos + insertTxt.length
+ elInput.selectionEnd = startPos + insertTxt.length
+
+ this.$emit("update:content", this.visitorContent)
+ }
+ }
+ }
+</script>
+
+<style>
+
+</style>
diff --git a/src/components/common/OwO.vue b/src/components/common/OwO.vue
deleted file mode 100644
index 08e7f24..0000000
--- a/src/components/common/OwO.vue
+++ /dev/null
@@ -1,66 +0,0 @@
-<template>
- <div id="area">
- <a-form-item>
- <a-textarea ref="targetArea" :rows="4" v-model="visitorContent" :placeholder="this.$attrs.replyHolder"
- class="OwO-textarea" />
- </a-form-item>
- <span class="myTip fadeIn" v-if="showTip">现在你可以发送表情啦</span>
- <div ref="container" class="OwO fadeIn" v-show="init"></div>
- </div>
-</template>
-
-<script>
- import 'owo/dist/OwO.min.css';
- import OWO from '../../js/myOwO.js'
- import OwOjsonConfig from '../../assets/OwO.json'
-
- export default {
- props: {
- content: String
- },
- data() {
- return {
- init: false,
- showTip: false,
- visitorContent: '',
- }
- },
- watch: {
- visitorContent: function(newValue, oldValue) {
- if (newValue.length > 0) {
- if (!this.init) {
- this.showTip = true;
- setTimeout(() => {
- this.showTip = false;
- }, 5000);
- }
- this.init = true;
- this.initOwO();
- }
- this.$emit("update:content", newValue)
- },
- },
- methods: {
-
- initOwO() {
- var OwO_demo = new OwO({
- logo: 'OωO表情',
- // container: document.getElementsByClassName('OwO')[0],
- // target: document.getElementsByClassName('OwO-textarea')[0],
- container: this.$refs.container,
- target: this.$refs.targetArea.$el,
- // api: './OwO.json',
- // api: 'http://diygod.github.io/OwO/demo/OwO.json',
- jsonText: OwOjsonConfig,
- position: 'down',
- width: '100%',
- maxHeight: '250px'
- });
- }
- }
- }
-</script>
-
-<style>
-
-</style>
diff --git a/src/components/iframe/videoMiniBox.vue b/src/components/iframe/videoMiniBox.vue
index a73e200..bf4cc20 100644
--- a/src/components/iframe/videoMiniBox.vue
+++ b/src/components/iframe/videoMiniBox.vue
@@ -26,7 +26,7 @@
//弹窗初始化后先不加载视频,等待手动播放
this.init();
- this.dp.volume(0, true, false);
+ this.dp.volume(0.1, true, false);
this.dp.on('pause', function() {
_this.$message.info("停止播放")
@@ -38,6 +38,7 @@
this.dp.on('error', function() {
_this.disabledPointer = true
+ this.closePlayer = true;
});
_this.$nextTick(function() {
@@ -49,7 +50,8 @@
dp: null,
hls: null,
videoData: {},
- closePlayer: false
+ closePlayer: false,
+ disabledPointer:false,
}
},
methods: {
diff --git a/src/components/mini/box13-reply.vue b/src/components/mini/box13-reply.vue
index 237e20d..4f08471 100644
--- a/src/components/mini/box13-reply.vue
+++ b/src/components/mini/box13-reply.vue
@@ -31,9 +31,10 @@
<span v-html="parseContent(msgInfo.userComment).replace(/\n/g, '<br>')"></span>
</div>
</div>
- <a-comment style="min-height: 320px;">
+ <a-comment style="min-height: 320px;">
<div slot="content">
- <MyOwO :content.sync="form.visitorContent" :replyHolder="replyHolder"></MyOwO>
+ <MyTextarea :content.sync="form.visitorContent" :replyHolder="replyHolder"></MyTextarea>
+
<div>
<a-button html-type="submit" type="primary" @click="send()" v-if="!showReplyMsgInfo"
:disabled="isSending || $attrs.isAllowedComment==0">
@@ -66,12 +67,12 @@
} from '../../api/blogArticleComment.js'
import md5 from 'js-md5';
- import MyOwO from '../common/OwO.vue'
+ import MyTextarea from '../common/MyTextarea.vue'
import myConstant from "../../config/myConstant.js"
export default {
components: {
- MyOwO
+ MyTextarea
},
props: {
parseContent: {
@@ -118,7 +119,7 @@
return
}
}
-
+
if (this.form.eMail == 'inleft@qq.com') {
if (this.form.authCode == null || this.form.authCode == "") {
this.$message.info("此邮箱在这里使用需要正确的授权码..")
diff --git a/src/components/swichLabel/edit.vue b/src/components/swichLabel/edit.vue
index fe13332..b1068a7 100644
--- a/src/components/swichLabel/edit.vue
+++ b/src/components/swichLabel/edit.vue
@@ -1,7 +1,6 @@
<template>
<div class="blog-main">
- <MyOwO v-if="1==1"></MyOwO>
- <div v-else class="edit-main fade">
+ <div class="edit-main fade">
<div class="edit-info">
<div class="edit-info-body blog-container ">
配置项
--
Gitblit v1.9.1