适配移动端

src/App.vue

@@ -3,6 +3,7 @@
     <div class="demo-container">
       <Danmaku
         class="demo-danmaku"
+        :quotes="danmu"
         :arrowIcon="require('./assets/list-enable-btn.png')"
         :showIcon="require('./assets/list-enable-btn.png')"
         :closeIcon="require('./assets/list-disable-btn.png')"
@@ -19,6 +20,19 @@ export default {
   components: {
     Danmaku,
   },
+  data(){
+    return {
+      danmu:[
+          "很漂亮的线上展馆，支持！",
+          "足不出户就能浏览参观，太棒了！",
+          "期待能有机会到实体馆参观。",
+          "请问英模在第几展区？",
+          "向革命先烈们致敬。",
+          "展馆的信息介绍很详细，干货满满！",
+          "向人民解放军致敬"
+      ]
+    }
+  }
 };
 </script>
 

src/components/Danmaku.vue

@@ -16,7 +16,7 @@
         </li>
       </transition-group>
     </div>
-    <div class="input-container">
+    <div class="input-container" v-if="!isMobile">
       <img class="arrow-icon" :src="arrowIcon || ''" />
       <span class="send-choices" @click.stop="toggleSelectMenu"
         >请选择弹幕内发送吧~</span
@@ -47,6 +47,34 @@
         </li>
       </ul>
     </div>
+    <div class="input-mobile">
+      <span class="send-choices" @click.stop="toggleSelectMenu">请选择弹幕内发送吧~</span>
+      <div class="send-btn-container">
+        <img
+          @click="hideList"
+          class="show-icon"
+          :src="showIcon || ''"
+          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>
 
@@ -94,6 +122,7 @@ export default {
       isNotInputAction: false,
       timer: null,
       autoIndex: 0,
+      isMobile: /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)
     };
   },
   methods: {
@@ -137,8 +166,10 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
+
 .danmaku-area {
   min-height: 350px;
+  margin: 0;
 }
 .danmaku-container {
   max-width: 340px;
@@ -236,6 +267,7 @@ export default {
 .send-btn-container .show-icon,
 .send-btn-container .close-icon {
   width: 24px;
+  height: 24px;
 }
 .input-container .show-list {
   text-decoration: none;
@@ -290,6 +322,61 @@ export default {
 .dm-leave-active {
   position: absolute;
 }
+
+
+.input-mobile{
+  min-width: 213px;
+  height: 40px;
+  background: rgba(0, 0, 0, 0.5);
+  border-radius: 3px;
+  display: flex;
+  padding: 10px;
+  box-sizing: border-box;
+  position: relative;
+  justify-content: space-between;
+}
+
+.input-mobile .send-choices{
+  color: #fff;
+  font-size: 14px;
+}
+
+.input-mobile .show-list {
+  text-decoration: none;
+  position: absolute;
+  left: 0;
+  bottom: 50px;
+  background: rgba(0, 0, 0, 0.9);
+  width: 90%;
+  color: #fff;
+  border-radius: 3px;
+  max-height: 200px;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  margin: 0;
+  padding: 0;
+}
+.input-mobile .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-mobile .show-list .list-item:hover {
+  background: rgb(184, 23, 23);
+}
+
+.input-mobile .send-btn-container{
+  margin-left: 10px;
+}
+
+
 @keyframes fadeout {
   0% {
     opacity: 1;
@@ -304,4 +391,14 @@ export default {
     transform: translateY(0px);
   }
 }
+
+@media only screen and (max-width: 500px), (max-height: 487px) {
+  .danmaku-list li.danmaku-list-item{
+    margin-bottom: 5px;
+  }
+  .danmaku-list li.danmaku-list-item > span{
+    border-radius: 3px;
+    border: 0;
+  }
+}
 </style>