feat(select): add show-proportion props of select component

examples/sites/demos/apis/select.js

@@ -571,6 +571,19 @@ export default {
           mode: ['pc', 'mobile-first'],
           pcDemo: 'binding-obj',
           mfDemo: 'binding-obj'
+        },
+        {
+          name: 'show-proportion',
+          type: 'boolean',
+          defaultValue: 'false',
+          desc: {
+            'zh-CN': '是否展示多选框选中条数和总条数的占比',
+            'en-US':
+              'Display the proportion of the number of selected items and the total number of items in the multiple-choice box'
+          },
+          mode: ['pc', 'mobile-first'],
+          pcDemo: 'collapse-tags',
+          mfDemo: 'collapse-tags'
         }
       ],
       events: [

examples/sites/demos/mobile-first/app/select/collapse-tags.vue

@@ -1,5 +1,5 @@
 <template>
-  <tiny-select v-model="value" placeholder="请选择" multiple collapse-tags title="标题">
+  <tiny-select v-model="value" placeholder="请选择" multiple :show-proportion="true" collapse-tags title="标题">
     <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
   </tiny-select>
 </template>

examples/sites/demos/mobile-first/app/select/webdoc/select.js

@@ -36,9 +36,10 @@ export default {
         'en-US': 'Collapse tags'
       },
       desc: {
-        'zh-CN': '<p>通过 <code>collapse-tags</code> 属性设置选中多个选项时，多个标签缩略展示。</p>\n',
+        'zh-CN':
+          '<p>通过 <code>collapse-tags</code> 属性设置选中多个选项时，多个标签缩略展示。设置 <code>show-proportion</code> 可展示当前选中条数和总条数占比，默认值为 <code>false</code> 。</p>\n',
         'en-US':
-          '<p>When multiple options are selected through the <code>collapse-tags</code> attribute settings, multiple tags will be abbreviated and displayed.</p>\n'
+          '<p>When multiple options are selected through the <code>collapse-tags</code> attribute settings, multiple tags will be abbreviated and displayed. Set <code>show promotion</code> to display the current number of selected items and the proportion of total items. The default value is <code>false</code> .</p>\n'
       },
       codeFiles: ['collapse-tags.vue']
     },

examples/sites/demos/pc/app/select/collapse-tags-composition-api.vue

@@ -3,7 +3,7 @@
     <br />
     <div>场景1： collapse-tags折叠</div>
     <br />
-    <tiny-select v-model="value1" multiple collapse-tags>
+    <tiny-select v-model="value1" :show-proportion="true" multiple collapse-tags>
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
     <br />

examples/sites/demos/pc/app/select/collapse-tags.vue

@@ -3,7 +3,7 @@
     <br />
     <div>场景1： collapse-tags折叠</div>
     <br />
-    <tiny-select v-model="value1" multiple collapse-tags>
+    <tiny-select v-model="value1" :show-proportion="true" multiple collapse-tags>
       <tiny-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </tiny-option>
     </tiny-select>
     <br />

examples/sites/demos/pc/app/select/webdoc/select.js

@@ -38,9 +38,9 @@ export default {
       },
       desc: {
         'zh-CN':
-          '<p>通过 <code>collapse-tags</code> 属性设置选中多个选项时，多个标签缩略展示。多选时通过设置 <code>hover-expand</code> 为 <code>true</code> ，默认折叠标签, hover 时展示所有标签。标签内容超长时超出省略，hover 标签时展示 tooltip。</p>\n',
+          '<p>通过 <code>collapse-tags</code> 属性设置选中多个选项时，多个标签缩略展示。设置 <code>show-proportion</code> 可展示当前选中条数和总条数占比，默认值为 <code>false</code> 。设置 <code>hover-expand</code> 为 <code>true</code> ，默认折叠标签, <code>hover</code> 时展示所有标签。标签内容超长时超出省略，<code>hover</code> 标签时展示 <code>tooltip</code> 。</p>\n',
         'en-US':
-          '<p>When multiple options are selected through the <code>collapse-tags</code> attribute settings, multiple tags will be abbreviated and displayed.</p>\n'
+          '<p>When multiple options are selected through the <code>collapse-tags</code> attribute settings, multiple tags are displayed in a thumbnail. Set <code>show-proportion</code> to display the current number of selected items and the proportion of total items, with a default value of <code>false</code> . By setting <code>hover-expand</code> to <code>true</code> , the tags are collapsed by default, and all tags are displayed when hovering. If the content of the tag is too long, it should be omitted. When hovering the tag, a <code>tooltip</code> should be displayed</p>'
       },
       codeFiles: ['collapse-tags.vue']
     },

packages/theme/src/select/index.less

@@ -160,7 +160,7 @@
       display: inline-flex;
       justify-content: flex-start;
       align-items: center;
-      max-width: 180px;
+      max-width: 160px;
     }
 
     .@{select-prefix-cls}__tags-text {

packages/vue/src/select/src/index.ts

@@ -312,6 +312,10 @@ export default defineComponent({
     clearNoMatchValue: {
       type: Boolean,
       default: false
+    },
+    showProportion: {
+      type: Boolean,
+      default: false
     }
   },
   setup(props, context) {

packages/vue/src/select/src/mobile-first.vue

@@ -271,6 +271,9 @@
           <span v-if="state.showCopy" class="h-4 cursor-pointer relative z-[1]" @click.stop="handleCopyClick">
             <icon-copy :class="[gcls('caret'), 'align-top group-hover:fill-color-brand']"></icon-copy>
           </span>
+          <span v-if="showProportion && state.selected.length > 0 && state.options.length > 1">
+            {{ state.selected.length + '/' + state.options.length }}
+          </span>
           <icon-close
             v-if="state.showClose"
             :class="[
@@ -630,6 +633,7 @@ export default {
     'options',
     'showCheck',
     'showAlloption',
+    'showProportion',
     'hideDrop',
     'modelValue',
     'showOverflowTooltip',

packages/vue/src/select/src/pc.vue

@@ -266,6 +266,9 @@
             <span v-if="state.showCopy" class="tiny-select__copy" @click.stop="handleCopyClick">
               <icon-copy class="tiny-svg-size tiny-select__caret"></icon-copy>
             </span>
+            <span v-if="showProportion && state.selected.length > 0 && state.options.length > 1">
+              {{ state.selected.length + '/' + state.options.length }}
+            </span>
             <icon-close
               v-if="state.showClose"
               class="tiny-svg-size tiny-select__caret icon-close"
@@ -712,7 +715,8 @@ export default defineComponent({
     'showEmptyImage',
     'inputBoxType',
     'tagType',
-    'clearNoMatchValue'
+    'clearNoMatchValue',
+    'showProportion'
   ],
   setup(props, context) {
     return setup({ props, context, renderless, api })