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

* feat: show-proportion of select component * fix: delete tag * fix: update review
2024-03-30 10:06:40 +08:00 · 2024-03-30 10:06:40 +08:00 · 687a073478
parent ecba505e95
commit 687a073478
10 changed files with 35 additions and 9 deletions
--- a/examples/sites/demos/apis/select.js
+++ b/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: [
--- a/examples/sites/demos/mobile-first/app/select/collapse-tags.vue
+++ b/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>
--- a/examples/sites/demos/mobile-first/app/select/webdoc/select.js
+++ b/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']
    },
--- a/examples/sites/demos/pc/app/select/collapse-tags-composition-api.vue
+++ b/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 />
--- a/examples/sites/demos/pc/app/select/collapse-tags.vue
+++ b/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 />
--- a/examples/sites/demos/pc/app/select/webdoc/select.js
+++ b/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']
    },
--- a/packages/theme/src/select/index.less
+++ b/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 {
--- a/packages/vue/src/select/src/index.ts
+++ b/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) {
--- a/packages/vue/src/select/src/mobile-first.vue
+++ b/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',
--- a/packages/vue/src/select/src/pc.vue
+++ b/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 })