|
|
@@ -0,0 +1,231 @@
|
|
|
+<template>
|
|
|
+ <div class="danmaku-area">
|
|
|
+ <div
|
|
|
+ class="danmaku-container"
|
|
|
+ v-chat-scroll
|
|
|
+ :style="{ visibility: isShowList ? 'visible' : 'hidden' }"
|
|
|
+ >
|
|
|
+ <!-- <ul class=""> -->
|
|
|
+ <transition-group appear tag="ul" class="danmaku-list">
|
|
|
+ <li
|
|
|
+ class="danmaku-list-item"
|
|
|
+ v-for="(item, key) in showDanmakuData"
|
|
|
+ :key="key"
|
|
|
+ >
|
|
|
+ <span> {{ item }}</span>
|
|
|
+ </li>
|
|
|
+ </transition-group>
|
|
|
+ </div>
|
|
|
+ <div class="input-container">
|
|
|
+ <span class="send-choices" @click.stop="toggleSelectMenu"
|
|
|
+ >请选择弹幕内发送吧~</span
|
|
|
+ >
|
|
|
+ <div class="send-btn-container">
|
|
|
+ <img
|
|
|
+ @click="hideList"
|
|
|
+ class="send-icon"
|
|
|
+ :src="sendIcon || ''"
|
|
|
+ v-if="isShowList"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ @click="showList"
|
|
|
+ class="close-icon"
|
|
|
+ :src="closeIcon || ''"
|
|
|
+ v-if="!isShowList"
|
|
|
+ />
|
|
|
+ <button class="send-btn">发送</button>
|
|
|
+ </div>
|
|
|
+ <ul class="show-list" v-show="isShowSelectList">
|
|
|
+ <li
|
|
|
+ class="list-item"
|
|
|
+ v-for="(item, key) in quotes"
|
|
|
+ :key="key"
|
|
|
+ @click="sendDanmaku(key)"
|
|
|
+ >
|
|
|
+ {{ item }}
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import Vue from "vue";
|
|
|
+import VueChatScroll from "vue-chat-scroll";
|
|
|
+Vue.use(VueChatScroll);
|
|
|
+export default {
|
|
|
+ name: "danmaku",
|
|
|
+ props: {
|
|
|
+ quotes: {
|
|
|
+ type: Array,
|
|
|
+ default: function() {
|
|
|
+ return [
|
|
|
+ "向英雄致敬！铁骨铮铮，保家卫国。",
|
|
|
+ "向英雄致敬！",
|
|
|
+ "向英雄致敬！铁骨铮铮",
|
|
|
+ "向英雄致敬！铁骨铮铮，保家卫国。",
|
|
|
+ "向英雄致敬！铁骨铮铮，保家卫国。抗美援朝战争的伟大胜利，宣告着中华民族巍巍屹立与东方。",
|
|
|
+ "向英雄致敬！铁骨铮铮，保家卫国。抗美援朝战争的伟大胜利，宣告着中华民族巍巍屹立与东方。牢记历史，珍惜现在！牢记志愿军英烈的伟大贡献，珍惜现在的幸福生活",
|
|
|
+ "向英雄致敬！铁骨铮铮，保家卫国。抗美援朝战争的伟大胜利，宣告着中华民族巍巍屹立与东方。牢记历史，珍惜现在！牢记志愿军英烈的伟大贡献，珍惜现在的幸福生活",
|
|
|
+ "向英雄致敬！铁骨铮铮，保家卫国。抗美援朝战争的伟大胜利，宣告着中华民族巍巍屹立与东方。牢记历史，珍惜现在！牢记志愿军英烈的伟大贡献，珍惜现在的幸福生活",
|
|
|
+ "向英雄致敬！铁骨铮铮，保家卫国。抗美援朝战争的伟大胜利，宣告着中华民族巍巍屹立与东方。牢记历史，珍惜现在！牢记志愿军英烈的伟大贡献，珍惜现在的幸福生活",
|
|
|
+ "向英雄致敬！",
|
|
|
+ ];
|
|
|
+ },
|
|
|
+ },
|
|
|
+ sendIcon: {
|
|
|
+ type: String,
|
|
|
+ required: true,
|
|
|
+ },
|
|
|
+ closeIcon: {
|
|
|
+ type: String,
|
|
|
+ required: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ showDanmakuData: [],
|
|
|
+ isShowList: true,
|
|
|
+ isShowSelectList: false,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ toggleSelectMenu() {
|
|
|
+ this.isShowSelectList = !this.isShowSelectList;
|
|
|
+ },
|
|
|
+ showList() {
|
|
|
+ this.isShowList = true;
|
|
|
+ },
|
|
|
+ hideList() {
|
|
|
+ this.isShowList = false;
|
|
|
+ },
|
|
|
+ sendDanmaku(index) {
|
|
|
+ const text = this.quotes[index];
|
|
|
+ console.log("text", text);
|
|
|
+ this.showDanmakuData.push(text);
|
|
|
+ this.isShowSelectList = false;
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
|
+<style scoped>
|
|
|
+.danmaku-area {
|
|
|
+ min-height: 350px;
|
|
|
+}
|
|
|
+.danmaku-container {
|
|
|
+ max-width: 340px;
|
|
|
+ height: 288px;
|
|
|
+ overflow-x: hidden;
|
|
|
+ overflow-y: scroll;
|
|
|
+}
|
|
|
+.danmaku-list {
|
|
|
+ text-decoration: none;
|
|
|
+ max-width: 342px;
|
|
|
+ overflow: hidden;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+.danmaku-list li.danmaku-list-item {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ padding: 0;
|
|
|
+ display: block;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ text-align: left;
|
|
|
+}
|
|
|
+.danmaku-list li.danmaku-list-item > span {
|
|
|
+ padding: 0 20px;
|
|
|
+ line-height: 36px;
|
|
|
+ font-size: 14px;
|
|
|
+ display: inline-block;
|
|
|
+ margin: 0;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 20px;
|
|
|
+ background: rgba(0, 0, 0, 0.6);
|
|
|
+ border: 1px solid hsla(0, 0%, 100%, 0.53);
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ text-align: left;
|
|
|
+ max-width: 290px;
|
|
|
+}
|
|
|
+.input-container {
|
|
|
+ background: rgba(0, 0, 0, 0.6);
|
|
|
+ border-radius: 20px;
|
|
|
+ max-width: 320px;
|
|
|
+ display: flex;
|
|
|
+ flex-flow: row nowrap;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+ padding: 10px;
|
|
|
+}
|
|
|
+.input-container span {
|
|
|
+ color: rgb(140, 140, 140);
|
|
|
+ cursor: pointer;
|
|
|
+ flex: 1;
|
|
|
+ height: 100%;
|
|
|
+ text-align: left;
|
|
|
+ line-height: 34px;
|
|
|
+}
|
|
|
+.input-container > * {
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.send-btn {
|
|
|
+ background: rgb(184, 23, 23);
|
|
|
+ color: #fff;
|
|
|
+ padding: 5px 15px;
|
|
|
+ border: 10px;
|
|
|
+ outline: 0;
|
|
|
+ font-size: 16px;
|
|
|
+ cursor: pointer;
|
|
|
+ border-radius: 15px;
|
|
|
+ margin-left: 5px;
|
|
|
+}
|
|
|
+.send-btn:hover,
|
|
|
+.send-btn:focus {
|
|
|
+ background: rgb(153, 17, 17);
|
|
|
+}
|
|
|
+
|
|
|
+.send-btn-container {
|
|
|
+ display: flex;
|
|
|
+ flex-flow: row nowrap;
|
|
|
+}
|
|
|
+.input-container .show-list {
|
|
|
+ text-decoration: none;
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ bottom: 64px;
|
|
|
+ background: rgba(0, 0, 0, 0.7);
|
|
|
+ width: 340px;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 15px;
|
|
|
+ max-height: 200px;
|
|
|
+ overflow-x: hidden;
|
|
|
+ overflow-y: scroll;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+.input-container .show-list .list-item {
|
|
|
+ text-align: left;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 36px;
|
|
|
+ text-decoration: none;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ color: #fff;
|
|
|
+ max-width: 100%;
|
|
|
+ padding: 0 10px;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+.input-container .show-list .list-item:hover {
|
|
|
+ background: rgb(184, 23, 23);
|
|
|
+}
|
|
|
+</style>
|
gemer
