done with doc and release command

README.md

@@ -11,12 +11,12 @@ npm install @wujing/danmaku --save
 
 ## 参数：
 
-| 参数 | Type类型 | 必选 required | 描述 |
-| :-: | :-: | :-: | :-: |
-| quotes |  Array | 是 | 预选选择列表 |
-| showIcon | String/Object | 是 |  显示ICON |
-| closeIcon | String/Object | 是 | 隐藏ICON |
-
+| 参数 | Type类型 | 必选 required | 描述 | 默认值|
+| :-: | :-: | :-: | :-: | :-: | :-: | 
+| quotes |  Array | 是 | 预选选择列表 | [] |
+| showIcon | String/Object | 是 |  显示ICON | None |
+| closeIcon | String/Object | 是 | 隐藏ICON | None |
+| limit | Number | 否 | 预选限制条数 | 5000 |
 ## 使用方法：
 ``` javascript
 // 引入组件

package.json

@@ -10,7 +10,8 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build-bundle": "vue-cli-service build --target lib --name danmaku ./src/components/Danmaku.vue",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "realase-for-npm": "npm run lint && npm run build-bundle && npm version patch && npm publish"
   },
   "dependencies": {
     "core-js": "^3.6.5",

src/components/Danmaku.vue

@@ -6,7 +6,7 @@
       :style="{ visibility: isShowList ? 'visible' : 'hidden' }"
     >
       <!-- <ul class=""> -->
-      <transition-group appear tag="ul" class="danmaku-list">
+      <transition-group appear tag="ul" class="danmaku-list" name="dm">
         <li
           class="danmaku-list-item"
           v-for="(item, key) in showDanmakuData"
@@ -33,7 +33,7 @@
           :src="closeIcon || ''"
           v-if="!isShowList"
         />
-        <button class="send-btn">发送</button>
+        <!-- <button class="send-btn">发送</button> -->
       </div>
       <ul class="show-list" v-show="isShowSelectList">
         <li
@@ -155,6 +155,11 @@ export default {
   text-align: left;
   max-width: 290px;
 }
+.danmaku-list li.danmaku-list-item:nth-last-child(5) {
+  /* visibility: hidden; */
+  animation: fadeout 0.3s linear;
+}
+
 .input-container {
   background: rgba(0, 0, 0, 0.6);
   border-radius: 20px;
@@ -233,4 +238,40 @@ export default {
 .input-container .show-list .list-item:hover {
   background: rgb(184, 23, 23);
 }
+
+.dm-enter {
+  opacity: 0;
+  transform: translateY(20px);
+}
+
+.dm-leave-to {
+  opacity: 0;
+  transform: translateY(-50px);
+}
+
+.dm-enter-active,
+.dm-leave-active {
+  transition: all 0.6s ease;
+}
+
+.dm-move {
+  transition: all 0.6s ease;
+}
+
+.dm-leave-active {
+  position: absolute;
+}
+@keyframes fadeout {
+  0% {
+    opacity: 1;
+    transform: translateY(8px);
+  }
+  50%{
+    transform: translateY(3px);
+  }
+  100%{
+    opacity: 0.9;
+    transform: translateY(0px);
+  }
+}
 </style>