Эх сурвалжийг харах

feat:分组弹框组件内输入框最大限制数增加高亮样式

yangfeng 6 сар өмнө
parent
commit
7c095beb79

+ 27 - 4
apps/bigmember_pc/src/composables/quick-monitor/component/MonitorGroup.vue

@@ -198,9 +198,19 @@ function setGroupSelected(data) {
           placeholder="请输入分组名称"
           placeholder="请输入分组名称"
           class="add-input"
           class="add-input"
           maxlength="15"
           maxlength="15"
-          show-word-limit
           @keyup.enter.native="onAddConfirm"
           @keyup.enter.native="onAddConfirm"
-        />
+        >
+          <template #suffix>
+            <span class="el-input__count">
+              <span class="el-input__count-inner">
+                <em :class="{ 'already-count': newGroupName.length > 0 }">{{
+                  newGroupName.length
+                }}</em
+                >/15
+              </span>
+            </span>
+          </template>
+        </el-input>
         <div class="flex flex-items-center add-action">
         <div class="flex flex-items-center add-action">
           <span class="add-confirm" @click="onAddConfirm">确定</span>
           <span class="add-confirm" @click="onAddConfirm">确定</span>
           <span class="add-cancel" @click="onAddCancel">取消</span>
           <span class="add-cancel" @click="onAddCancel">取消</span>
@@ -253,10 +263,20 @@ function setGroupSelected(data) {
             placeholder="请输入分组名称"
             placeholder="请输入分组名称"
             class="add-input input-bg"
             class="add-input input-bg"
             maxlength="15"
             maxlength="15"
-            show-word-limit
             @input="onItemInput($event, item)"
             @input="onItemInput($event, item)"
             @keyup.enter.native="onItemConfirm(item)"
             @keyup.enter.native="onItemConfirm(item)"
-          />
+          >
+            <template #suffix>
+              <span class="el-input__count">
+                <span class="el-input__count-inner">
+                  <em :class="{ 'already-count': item.input.length > 0 }">{{
+                    item.input.length
+                  }}</em
+                  >/15
+                </span>
+              </span>
+            </template>
+          </el-input>
           <div class="flex items-center add-action">
           <div class="flex items-center add-action">
             <span class="add-confirm" @click="onItemConfirm(item)">确定</span>
             <span class="add-confirm" @click="onItemConfirm(item)">确定</span>
             <span class="add-cancel" @click="onItemCancel(item)">取消</span>
             <span class="add-cancel" @click="onItemCancel(item)">取消</span>
@@ -388,6 +408,9 @@ function setGroupSelected(data) {
     .el-input__count-inner {
     .el-input__count-inner {
       background: transparent;
       background: transparent;
     }
     }
+    .already-count {
+      color: $color_main;
+    }
   }
   }
   &.disabled {
   &.disabled {
     .group-list-container {
     .group-list-container {