瀏覽代碼

DatePicker: allowed to customize range-seprator with a slot (#13272)

* DatePicker: Allowed to customize range-seprator with a slot

Currently, the only possible option for "range-selector" is a string, would be nice to use a slot, so we could have custom svg-icon there.

* update doc
Ruslan P 6 年之前
父節點
當前提交
1f592944d6

+ 5 - 0
examples/docs/en-US/date-picker.md

@@ -522,3 +522,8 @@ When picking a date range, you can assign the time part for start date and end d
 | Method | Description | Parameters |
 |------|--------|-------|
 | focus | focus the Input component | — |
+
+### Slots
+| Name    | Description |
+|---------|-------------|
+| range-separator  | costume range separator content |

+ 4 - 0
examples/docs/es/date-picker.md

@@ -526,3 +526,7 @@ Al seleccionar un intervalo de fechas, puede asignar la hora para la fecha de in
 | ------ | -------------------------- | ----------- |
 | focus  | coloca el foco en el input | —           |
 
+### Slots
+| Name             | Description                     |
+|------------------|-------------------------------- |
+| range-separator  | costume range separator content |

+ 5 - 0
examples/docs/zh-CN/datetime-picker.md

@@ -325,3 +325,8 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生,`Picker Options` 或者其
 | 方法名 | 说明 | 参数 |
 | ---- | ---- | ---- |
 | focus | 使 input 获取焦点 | — |
+
+### Slots
+| Name    | 说明         |
+|---------|-------------|
+| range-separator  | 自定义分隔符 |

+ 3 - 1
packages/date-picker/src/picker.vue

@@ -59,7 +59,9 @@
       @change="handleStartChange"
       @focus="handleFocus"
       class="el-range-input">
-    <span class="el-range-separator">{{ rangeSeparator }}</span>
+    <slot name="range-separator">
+      <span class="el-range-separator">{{ rangeSeparator }}</span>
+    </slot>
     <input
       autocomplete="off"
       :placeholder="endPlaceholder"