mirror of https://github.com/ElemeFE/element
Select: add prefix named slot (#11063)
* Select: add prefix named slot * Update select.mdpull/11067/merge
parent
ea70cf5a01
commit
602afe0364
|
@ -697,6 +697,12 @@ If the binding value of Select is an object, make sure to assign `value-key` as
|
||||||
| blur | triggers when Input blurs | (event: Event) |
|
| blur | triggers when Input blurs | (event: Event) |
|
||||||
| focus | triggers when Input focuses | (event: Event) |
|
| focus | triggers when Input focuses | (event: Event) |
|
||||||
|
|
||||||
|
### Select Slots
|
||||||
|
| Name | Description |
|
||||||
|
|---------|-------------|
|
||||||
|
| — | Option component list |
|
||||||
|
| prefix | content as Select prefix |
|
||||||
|
|
||||||
### Option Group Attributes
|
### Option Group Attributes
|
||||||
| Attribute | Description | Type | Accepted Values | Default |
|
| Attribute | Description | Type | Accepted Values | Default |
|
||||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||||
|
|
|
@ -703,6 +703,12 @@ Si el valor de encuadernación de Select es un objeto, asegúrese de asignar `va
|
||||||
| blur | se dispara cuando el input pierde el foco | (event: Event) |
|
| blur | se dispara cuando el input pierde el foco | (event: Event) |
|
||||||
| focus | se dispara cuando el input obtiene el foco | (event: Event) |
|
| focus | se dispara cuando el input obtiene el foco | (event: Event) |
|
||||||
|
|
||||||
|
### Select Slots
|
||||||
|
| Name | Description |
|
||||||
|
|---------|-------------|
|
||||||
|
| — | Option component list |
|
||||||
|
| prefix | content as Select prefix |
|
||||||
|
|
||||||
### Atributos del grupo de opciones
|
### Atributos del grupo de opciones
|
||||||
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
| Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
|
||||||
| -------- | ---------------------------------------- | ------- | ----------------- | ----------- |
|
| -------- | ---------------------------------------- | ------- | ----------------- | ----------- |
|
||||||
|
|
|
@ -692,6 +692,12 @@
|
||||||
| blur | 当 input 失去焦点时触发 | (event: Event) |
|
| blur | 当 input 失去焦点时触发 | (event: Event) |
|
||||||
| focus | 当 input 获得焦点时触发 | (event: Event) |
|
| focus | 当 input 获得焦点时触发 | (event: Event) |
|
||||||
|
|
||||||
|
### Select Slots
|
||||||
|
| name | 说明 |
|
||||||
|
|---------|---------|
|
||||||
|
| — | Option 组件列表 |
|
||||||
|
| prefix | Select 组件头部内容 |
|
||||||
|
|
||||||
### Option Group Attributes
|
### Option Group Attributes
|
||||||
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|
||||||
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
|---------- |-------------- |---------- |-------------------------------- |-------- |
|
||||||
|
|
|
@ -92,6 +92,9 @@
|
||||||
@paste.native="debouncedOnInputChange"
|
@paste.native="debouncedOnInputChange"
|
||||||
@mouseenter.native="inputHovering = true"
|
@mouseenter.native="inputHovering = true"
|
||||||
@mouseleave.native="inputHovering = false">
|
@mouseleave.native="inputHovering = false">
|
||||||
|
<template slot="prefix" v-if="$slots.prefix">
|
||||||
|
<slot name="prefix"></slot>
|
||||||
|
</template>
|
||||||
<i slot="suffix"
|
<i slot="suffix"
|
||||||
:class="['el-select__caret', 'el-input__icon', 'el-icon-' + iconClass]"
|
:class="['el-select__caret', 'el-input__icon', 'el-icon-' + iconClass]"
|
||||||
@click="handleIconClick"
|
@click="handleIconClick"
|
||||||
|
|
|
@ -331,6 +331,32 @@ describe('Select', () => {
|
||||||
}, 100);
|
}, 100);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('prefixed icon', () => {
|
||||||
|
vm = createTest({
|
||||||
|
template: `
|
||||||
|
<div>
|
||||||
|
<el-select v-model="value">
|
||||||
|
<el-option
|
||||||
|
v-for="item in options"
|
||||||
|
:label="item.label"
|
||||||
|
:key="item.value"
|
||||||
|
:value="item.value">
|
||||||
|
</el-option>
|
||||||
|
<i slot="prefix" class="el-input__icon el-icon-search"></i>
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
`,
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
options: [],
|
||||||
|
value: ''
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
|
expect(vm.$el.querySelector('.el-input__icon').classList.contains('el-icon-search')).to.be.true;
|
||||||
|
});
|
||||||
|
|
||||||
it('custom el-option template', () => {
|
it('custom el-option template', () => {
|
||||||
vm = createVue({
|
vm = createVue({
|
||||||
template: `
|
template: `
|
||||||
|
|
Loading…
Reference in New Issue