|
@@ -1,5 +1,5 @@
|
|
|
<template>
|
|
|
- <div class="danmaku-area">
|
|
|
+ <div class="danmaku-area" @keydown.stop>
|
|
|
<div
|
|
|
class="danmaku-container"
|
|
|
v-chat-scroll
|
|
@@ -17,9 +17,7 @@
|
|
|
</transition-group>
|
|
|
</div>
|
|
|
<div class="input-container" v-if="!isMobile">
|
|
|
- <span class="send-choices" @click.stop="toggleSelectMenu"
|
|
|
- >请选择弹幕内发送吧~</span
|
|
|
- >
|
|
|
+ <input @click.stop="toggleSelectMenu" v-model="danmu" type="text" placeholder="请选择弹幕内发送吧~" class="send-choices">
|
|
|
<div class="send-btn-container">
|
|
|
<img
|
|
|
@click="hideList"
|
|
@@ -33,7 +31,7 @@
|
|
|
:src="closeIcon || ''"
|
|
|
v-if="!isShowList"
|
|
|
/>
|
|
|
- <button class="send-btn primary">发送</button>
|
|
|
+ <button class="send-btn primary" @click="sendDanmakuSelf(danmu)">发送</button>
|
|
|
</div>
|
|
|
<ul class="show-list" v-show="isShowSelectList">
|
|
|
<li
|
|
@@ -112,6 +110,7 @@ export default {
|
|
|
|
|
|
data() {
|
|
|
return {
|
|
|
+ danmu:'',
|
|
|
showDanmakuData: [],
|
|
|
isShowList: true,
|
|
|
isShowSelectList: false,
|
|
@@ -139,6 +138,14 @@ export default {
|
|
|
this.isShowSelectList = false;
|
|
|
this.isNotInputAction = true;
|
|
|
},
|
|
|
+ sendDanmakuSelf(text){
|
|
|
+ if (this.showDanmakuData.length <= this.limit) {
|
|
|
+ this.showDanmakuData.push(text);
|
|
|
+ }
|
|
|
+ this.isShowSelectList = false;
|
|
|
+ this.isNotInputAction = true;
|
|
|
+ this.danmu=''
|
|
|
+ },
|
|
|
autoPopAnimation() {
|
|
|
if (!this.isNotInputAction) {
|
|
|
this.timer = setInterval(() => {
|
|
@@ -160,8 +167,9 @@ export default {
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
-<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
|
-<style scoped>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+
|
|
|
|
|
|
.danmaku-area {
|
|
|
margin: 0;
|
|
@@ -228,13 +236,23 @@ export default {
|
|
|
position: relative;
|
|
|
padding: 10px;
|
|
|
}
|
|
|
-.input-container span {
|
|
|
- color: rgb(140, 140, 140);
|
|
|
- cursor: pointer;
|
|
|
- font-size: 14px;
|
|
|
- height: 48px;
|
|
|
- text-align: left;
|
|
|
- line-height: 48px;
|
|
|
+.input-container {
|
|
|
+ >span,>input{
|
|
|
+ cursor: pointer;
|
|
|
+ font-size: 14px;
|
|
|
+ height: 48px;
|
|
|
+ text-align: left;
|
|
|
+ line-height: 48px;
|
|
|
+ padding-left: 10px;
|
|
|
+ background:none;
|
|
|
+ outline:none;
|
|
|
+ border:none;
|
|
|
+ color: #fff;
|
|
|
+ &::placeholder{
|
|
|
+ color: rgb(140, 140, 140);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
.input-container > * {
|
|
|
cursor: pointer;
|