feat: select supports prepend

packages/web-vue/components/select/README.en-US.md

@@ -37,6 +37,8 @@ description: When users need to select one or more from a group of similar data,
 
 @import ./__demo__/label.md
 
+@import ./__demo__/prepend.md
+
 @import ./__demo__/linkage.md
 
 @import ./__demo__/field-names.md

packages/web-vue/components/select/README.zh-CN.md

@@ -35,6 +35,8 @@ description: 当用户需要从一组同类数据中选择一个或多个时，
 
 @import ./__demo__/label.md
 
+@import ./__demo__/prepend.md
+
 @import ./__demo__/linkage.md
 
 @import ./__demo__/field-names.md

packages/web-vue/components/select/__demo__/label.md

@@ -18,9 +18,17 @@ The display content of the select box can be customized through the `#label` slo
 
 ```vue
 <template>
-  <a-select default-value="Beijing" :style="{width:'320px'}" placeholder="Please select ...">
+  <a-select
+    default-value="Beijing"
+    :style="{ width: '320px' }"
+    placeholder="Please select ..."
+  >
     <template #label="{ data }">
-      <span><icon-plus/>{{data?.label}}</span>
+      <span><icon-plus />{{ data?.label }}</span>
+    </template>
+
+    <template #prepend>
+      <div>addBefore</div>
     </template>
     <a-option>Beijing</a-option>
     <a-option>Shanghai</a-option>
@@ -33,7 +41,7 @@ The display content of the select box can be customized through the `#label` slo
 import { IconPlus } from '@arco-design/web-vue/es/icon';
 
 export default {
-  components: { IconPlus }
+  components: { IconPlus },
 };
 </script>
 ```

packages/web-vue/components/select/__demo__/prepend.md

@@ -0,0 +1,35 @@
+```yaml
+title:
+  zh-CN: 前置标签
+  en-US: Prepend
+```
+
+## zh-CN
+
+通过 `#prepend` 插槽可以自定义选择框前置标签
+
+---
+
+## en-US
+
+The display content of the select box can be customized through the `#prepend` slot.
+
+---
+
+```vue
+<template>
+  <a-select
+    default-value="Beijing"
+    :style="{ width: '320px' }"
+    placeholder="Please select ..."
+  >
+    <template #prepend>
+      <div>Select City</div>
+    </template>
+    <a-option>Beijing</a-option>
+    <a-option>Shanghai</a-option>
+    <a-option>Guangzhou</a-option>
+    <a-option disabled>Disabled</a-option>
+  </a-select>
+</template>
+```

packages/web-vue/components/select/select.tsx

@@ -904,7 +904,7 @@ export default defineComponent({
       return data?.label ?? '';
     };
 
-    return () => (
+    const renderTriggerNode = () => (
       <Trigger
         v-slots={{ content: renderDropDown }}
         trigger="click"
@@ -957,5 +957,15 @@ export default defineComponent({
         )}
       </Trigger>
     );
+
+    if (slots.prepend) {
+      return () => (
+        <div class={`${prefixCls}-wrapper`}>
+          <div class={`${prefixCls}-prepend`}>{slots.prepend?.()}</div>
+          {renderTriggerNode()}
+        </div>
+      );
+    }
+    return renderTriggerNode;
   },
 });

packages/web-vue/components/select/style/index.less

@@ -1,8 +1,16 @@
 @import '../../style/mixins/index.less';
+@import './mixin.less';
 @import './token.less';
 
 @select-prefix-cls: ~'@{prefix}-select';
 
+.@{select-prefix-cls}-wrapper {
+  display: inline-flex;
+  align-items: stretch;
+
+  .select-prepend(@select-prefix-cls);
+}
+
 .@{select-prefix-cls}-dropdown {
   box-sizing: border-box;
   padding: @select-popup-padding-vertical 0;

packages/web-vue/components/select/style/mixin.less

@@ -0,0 +1,16 @@
+@import '../../input/style/token.less';
+
+.select-prepend(@cls) {
+  .@{cls}-prepend {
+    display: flex;
+    align-items: center;
+    padding: 0 @input-padding-horizontal;
+    color: @input-color-text;
+    white-space: nowrap;
+    background-color: @input-color-addon-bg;
+    border: 1px solid @input-color-addon-border_default;
+    border-right: @input-border-addon-separator-width solid
+      @input-color-addon-border;
+    border-bottom-left-radius: @input-border-radius;
+  }
+}