update readme

README.md

@@ -17,6 +17,8 @@ npm install @wujing/danmaku --save
 | showIcon  | String/Object | 是           | 显示ICON | None |
 | closeIcon | String/Object | 是           | 隐藏ICON | None |
 | limit     | Number        | 否           | 限制条数   | 5000 |
+| arrowIcon | String/Object | 是           | 上选iCON | None |
+
 ## 使用方法：
 ``` javascript
 // 引入组件

src/components/Danmaku.vue

@@ -17,6 +17,7 @@
       </transition-group>
     </div>
     <div class="input-container">
+      <img class="arrow-icon" :src="arrowIcon || ''" />
       <span class="send-choices" @click.stop="toggleSelectMenu"
         >请选择弹幕内发送吧~</span
       >
@@ -81,6 +82,18 @@ export default {
       type: String,
       required: true,
     },
+    arrowIcon: {
+      type: String,
+      required: true,
+    },
+    limit: {
+      type: Number,
+      required: true,
+      default: 5000,
+    },
+  },
+  watch: {
+    isNotInputAction: function() {},
   },
 
   data() {
@@ -88,6 +101,9 @@ export default {
       showDanmakuData: [],
       isShowList: true,
       isShowSelectList: false,
+      isNotInputAction: false,
+      timer: null,
+      autoIndex: 0,
     };
   },
   methods: {
@@ -102,11 +118,30 @@ export default {
     },
     sendDanmaku(index) {
       const text = this.quotes[index];
-      console.log("text", text);
-      this.showDanmakuData.push(text);
+      if (this.showDanmakuData.length <= this.limit) {
+        this.showDanmakuData.push(text);
+      }
       this.isShowSelectList = false;
+      this.isNotInputAction = true;
+    },
+    autoPopAnimation() {
+      if (!this.isNotInputAction) {
+        this.timer = setInterval(() => {
+          if (this.autoIndex <= this.quotes.length) {
+            if (this.quotes[this.autoIndex]) {
+              this.showDanmakuData.push(this.quotes[this.autoIndex]);
+              this.autoIndex++;
+            } else {
+              clearInterval(this.timer);
+            }
+          }
+        }, 2000);
+      }
     },
   },
+  mounted() {
+    this.autoPopAnimation();
+  },
 };
 </script>
 
@@ -155,7 +190,7 @@ export default {
   text-align: left;
   max-width: 290px;
 }
-.danmaku-list li.danmaku-list-item:nth-last-child(5) {
+.danmaku-list li.danmaku-list-item:nth-last-child(6) {
   /* visibility: hidden; */
   animation: fadeout 0.3s linear;
 }
@@ -182,6 +217,9 @@ export default {
 .input-container > * {
   cursor: pointer;
 }
+.arrow-icon {
+  margin-right: 8px;
+}
 
 .send-btn {
   background: rgb(184, 23, 23);
@@ -264,13 +302,14 @@ export default {
 @keyframes fadeout {
   0% {
     opacity: 1;
-    transform: translateY(8px);
+    transform: translateY(10px);
   }
-  50%{
+  50% {
+    opacity: 0.7;
     transform: translateY(3px);
   }
-  100%{
-    opacity: 0.9;
+  100% {
+    opacity: 0.2;
     transform: translateY(0px);
   }
 }