feat: 评论字数

src/components/files/content/Comment.vue

@@ -55,7 +55,13 @@
         </div>
 
         <div class="input-content">
-            <div class="input-box"><input ref="input$" @input="handlerInput" v-model="inputText" :placeholder="placeholderText" type="text" /></div>
+            <div class="input-box">
+                <input ref="input$" @input="handlerInput" v-model="inputText" :placeholder="placeholderText" type="text" :maxlength="commentMaxLength" />
+                <div class="maxlength">
+                    <span>{{ inputText.length }}</span
+                    >&nbsp;/&nbsp;{{ commentMaxLength }}
+                </div>
+            </div>
             <div class="send-btn" @click="hanlderSubmit">{{ $t('common.publish') }}</div>
         </div>
     </div>
@@ -75,10 +81,12 @@ import { http } from '@/utils/request'
 import avatar from '@/assets/img/avatar@2x.png'
 import UiConfirm from '@/components/dialog/Confirm.vue'
 import i18n from '@/i18n'
+import UiInput from '../../form/Input.vue'
 const { t } = i18n.global
 const props = defineProps({
     slideHeigt: Number,
 })
+const commentMaxLength = ref(200)
 let canPut = true
 const delComfirm = ref(null)
 const emptyAvatar = ref(avatar)
@@ -265,11 +273,26 @@ onBeforeUnmount(() => {})
                 border-radius: 4px;
                 opacity: 1;
                 border: 1px solid rgba(255, 255, 255, 0.2);
+                position: relative;
                 input {
+                    width: 75%;
                     line-height: 34px;
-                    padding: 0 10px;
+                    padding: 0 5px;
                     color: #fff;
                 }
+                .maxlength {
+                    position: absolute;
+                    right: 0;
+                    top: 50%;
+                    transform: translateY(-50%);
+                    white-space: nowrap;
+                    margin-top: 2px;
+                    margin-right: 0px;
+                    color: #999;
+                    span {
+                        color: #0076f6;
+                    }
+                }
             }
             .send-btn {
                 width: 60px;