Merge pull request #1228 from poppyLuo/before-slot-dev

feat: add before slot for Select & DatePicker & NumberInput
ecomfe · Jul 12, 2024 · d3e0900 · d3e0900
2 parents 56209ab + 6fac2c2
commit d3e0900
Show file tree

Hide file tree

Showing 6 changed files with 60 additions and 1 deletion.
diff --git a/packages/veui/demo/cases/DatePicker.vue b/packages/veui/demo/cases/DatePicker.vue
@@ -144,6 +144,14 @@
         <veui-date-picker v-model="selectedDateRange" range clearable/>
       </section>
     </section>
+    <section>
+      <h2>before slot</h2>
+      <section>
+        <veui-date-picker v-model="selectedDateRange" range clearable>
+          <template #before> before </template>
+        </veui-date-picker>
+      </section>
+    </section>
   </veui-config-provider>
 </article>
 </template>

diff --git a/packages/veui/demo/cases/NumberInput.vue b/packages/veui/demo/cases/NumberInput.vue
@@ -151,6 +151,31 @@
       >
         <veui-number-input v-model="typeValue" :min="0" :decimal-place="1"/>
       </veui-field>
+      <veui-field label="before">
+        <veui-number-input
+          v-model="precisionValue"
+          :min="0"
+          :decimal-place="2"
+          style="width: 200px"
+        >
+          <template #before>
+            <span>before内容</span>
+          </template>
+        </veui-number-input>
+      </veui-field>
+      <veui-field label="before strong">
+        <veui-number-input
+          v-model="precisionValue"
+          ui="strong"
+          :min="0"
+          :decimal-place="2"
+          style="width: 200px"
+        >
+          <template #before>
+            <span>before内容</span>
+          </template>
+        </veui-number-input>
+      </veui-field>
     </veui-form>
   </section>
 </article>

diff --git a/packages/veui/demo/cases/Select.vue b/packages/veui/demo/cases/Select.vue
@@ -480,6 +480,22 @@
     <h2>200 个 option</h2>
     <veui-select :options="many"/>
   </section>
+  <section>
+    <h2>Select：(自定义 label-before slot)</h2>
+    <veui-select v-model="defaultValue2" v-bind="attrs" ui="checkmark">
+      <template #label-before>
+        <span>before</span>
+      </template>
+    </veui-select>
+  </section>
+  <section>
+    <h2>Select：(自定义 label-after slot)</h2>
+    <veui-select v-model="defaultValue2" v-bind="attrs" ui="checkmark">
+      <template #label-after>
+        <span>after</span>
+      </template>
+    </veui-select>
+  </section>
 </article>
 </template>
 

diff --git a/packages/veui/src/components/DatePicker.vue b/packages/veui/src/components/DatePicker.vue
@@ -34,7 +34,11 @@
         [$c('readonly')]: realReadonly
       }"
       tabindex="-1"
-    />
+    >
+      <template v-if="$slots.before" #before>
+        <slot name="before"/>
+      </template>
+    </veui-input>
     <template v-if="range">
       <span :class="$c('date-picker-tilde')">~</span>
       <veui-input

diff --git a/packages/veui/src/components/NumberInput.vue b/packages/veui/src/components/NumberInput.vue
@@ -33,6 +33,10 @@
         :aria-label="t('decrease', { value: step })"
       />
     </veui-button>
+    <slot name="before"/>
+  </template>
+  <template v-else slot="before">
+    <slot name="before"/>
   </template>
   <template slot="after">
     <div

diff --git a/packages/veui/src/components/Select/Select.vue b/packages/veui/src/components/Select/Select.vue
@@ -701,6 +701,7 @@ export default {
                 </template>
               ) : null}
             <template slot="before">
+              {renderSlot(this, 'label-before', this.slotProps)}
               {this.multiple ? multiBeforeSlot : beforeSlot}
             </template>
             <template slot="after">
@@ -735,6 +736,7 @@ export default {
                   name={this.icons[this.realExpanded ? 'collapse' : 'expand']}
                 />
               </div>
+              {renderSlot(this, 'label-after', this.slotProps)}
             </template>
           </Input>
         )}