feat(select): add tag prop

arco-design · Aug 16, 2024 · 52b8d98 · 52b8d98
1 parent 867cca0
commit 52b8d98
Show file tree

Hide file tree

Showing 7 changed files with 65 additions and 2 deletions.
diff --git a/packages/web-vue/components/_components/select-view/select-view.tsx b/packages/web-vue/components/_components/select-view/select-view.tsx
@@ -68,6 +68,10 @@ export default defineComponent({
       type: Number,
       default: 0,
     },
+    tagNowrap: {
+      type: Boolean,
+      default: false,
+    },
     retainInputValue: {
       type: Boolean,
       default: false,
@@ -190,6 +194,7 @@ export default defineComponent({
             error={mergedError.value}
             maxTagCount={props.maxTagCount}
             disabledInput={!props.allowSearch && !props.allowCreate}
+            tagNowrap={props.tagNowrap}
             retainInputValue
             uninjectFormItemContext
             onRemove={handleRemove}

diff --git a/packages/web-vue/components/cascader/cascader.vue b/packages/web-vue/components/cascader/cascader.vue
@@ -27,6 +27,7 @@
       :placeholder="placeholder"
       :loading="loading"
       :max-tag-count="maxTagCount"
+      :tag-nowrap="tagNowrap"
       v-bind="$attrs"
       @input-value-change="handleInputValueChange"
       @clear="handleClear"
@@ -426,6 +427,15 @@ export default defineComponent({
     virtualListProps: {
       type: Object as PropType<VirtualListProps>,
     },
+    /**
+     * @zh 标签内容不换行
+     * @en Tag content does not wrap
+     * @version 2.56.1
+     */
+    tagNowrap: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: {
     'update:modelValue': (

diff --git a/packages/web-vue/components/input-tag/input-tag.tsx b/packages/web-vue/components/input-tag/input-tag.tsx
@@ -155,6 +155,15 @@ export default defineComponent({
     fieldNames: {
       type: Object as PropType<InputTagFieldNames>,
     },
+    /**
+     * @zh 标签内容不换行
+     * @en Tag content does not wrap
+     * @version 2.56.1
+     */
+    tagNowrap: {
+      type: Boolean,
+      default: false,
+    },
     // private
     baseCls: String,
     focused: Boolean,
@@ -531,7 +540,12 @@ export default defineComponent({
           tag="span"
           name="input-tag-zoom"
           // @ts-ignore
-          class={`${prefixCls}-inner`}
+          class={[
+            `${prefixCls}-inner`,
+            {
+              [`${prefixCls}-nowrap`]: props.tagNowrap,
+            },
+          ]}
         >
           {tags.value.map((item, index) => (
             <Tag
@@ -541,6 +555,7 @@ export default defineComponent({
                 !mergedDisabled.value && !props.readonly && item.closable
               }
               visible
+              nowrap={props.tagNowrap}
               {...item.tagProps}
               onClose={(ev: MouseEvent) => handleRemove(item.value, index, ev)}
             >

diff --git a/packages/web-vue/components/input-tag/style/input-tag.less b/packages/web-vue/components/input-tag/style/input-tag.less
@@ -25,6 +25,11 @@
     overflow: hidden;
     line-height: 0;
 
+    &.@{cls}-nowrap {
+      display: flex;
+      flex-wrap: wrap;
+    }
+
     .@{cls}-tag {
       display: inline-flex;
       align-items: center;

diff --git a/packages/web-vue/components/select/select.tsx b/packages/web-vue/components/select/select.tsx
@@ -368,6 +368,15 @@ export default defineComponent({
       type: Boolean as PropType<boolean>,
       default: false,
     },
+    /**
+     * @zh 标签内容不换行
+     * @en Tag content does not wrap
+     * @version 2.56.1
+     */
+    tagNowrap: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: {
     'update:modelValue': (
@@ -1002,6 +1011,7 @@ export default defineComponent({
             placeholder={props.placeholder}
             bordered={props.bordered}
             size={mergedSize.value}
+            tagNowrap={props.tagNowrap}
             // @ts-ignore
             onInputValueChange={handleInputValueChange}
             onRemove={handleRemove}

diff --git a/packages/web-vue/components/tag/style/index.less b/packages/web-vue/components/tag/style/index.less
@@ -82,6 +82,12 @@
     color: @tag-default-color-icon;
   }
 
+  &-text {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
   each(@colors, {
     &&-checked&-@{value} {
       color: ~'@{tag-@{value}-color-text}';

diff --git a/packages/web-vue/components/tag/tag.vue b/packages/web-vue/components/tag/tag.vue
@@ -3,7 +3,10 @@
     <span v-if="$slots.icon" :class="`${prefixCls}-icon`">
       <slot name="icon" />
     </span>
-    <slot />
+    <span v-if="nowrap" :class="`${prefixCls}-text`">
+      <slot />
+    </span>
+    <slot v-else />
     <icon-hover
       v-if="closable"
       role="button"
@@ -124,6 +127,15 @@ export default defineComponent({
       type: Boolean,
       default: true,
     },
+    /**
+     * @zh 标签内容不换行
+     * @en Tag content does not wrap
+     * @version 2.56.1
+     */
+    nowrap: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: {
     'update:visible': (visible: boolean) => true,