mirror of https://github.com/ElemeFE/element
Autocomplete: add 'icon' and 'on-icon-click' attributes (#2768)
parent
6e7ccc6a69
commit
c310ee5661
|
@ -452,6 +452,8 @@ Customize how suggestions are displayed.
|
||||||
custom-item="my-item-en"
|
custom-item="my-item-en"
|
||||||
placeholder="Please input"
|
placeholder="Please input"
|
||||||
@select="handleSelect"
|
@select="handleSelect"
|
||||||
|
icon="edit"
|
||||||
|
:on-icon-click="handleIconClick"
|
||||||
></el-autocomplete>
|
></el-autocomplete>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
@ -518,6 +520,9 @@ Customize how suggestions are displayed.
|
||||||
},
|
},
|
||||||
handleSelect(item) {
|
handleSelect(item) {
|
||||||
console.log(item);
|
console.log(item);
|
||||||
|
},
|
||||||
|
handleIconClick(ev) {
|
||||||
|
console.log(ev);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
@ -625,11 +630,13 @@ Attribute | Description | Type | Options | Default
|
||||||
|----| ----| ----| ---- | -----|
|
|----| ----| ----| ---- | -----|
|
||||||
|placeholder| the placeholder of Autocomplete| string | — | — |
|
|placeholder| the placeholder of Autocomplete| string | — | — |
|
||||||
|disabled | whether Autocomplete is disabled | boolean | — | false|
|
|disabled | whether Autocomplete is disabled | boolean | — | false|
|
||||||
|
|icon | icon name | string | — | — |
|
||||||
|value | binding value | string | — | — |
|
|value | binding value | string | — | — |
|
||||||
|custom-item | component name of your customized suggestion list item | string | — | — |
|
|custom-item | component name of your customized suggestion list item | string | — | — |
|
||||||
|fetch-suggestions | a method to fetch input suggestions. When suggestions are ready, invoke `callback(data:[])` to return them to Autocomplete | Function(queryString, callback) | — | — |
|
|fetch-suggestions | a method to fetch input suggestions. When suggestions are ready, invoke `callback(data:[])` to return them to Autocomplete | Function(queryString, callback) | — | — |
|
||||||
| popper-class | custom class name for autocomplete's dropdown | string | — | — |
|
| popper-class | custom class name for autocomplete's dropdown | string | — | — |
|
||||||
| trigger-on-focus | whether show suggestions when input focus | boolean | — | true |
|
| trigger-on-focus | whether show suggestions when input focus | boolean | — | true |
|
||||||
|
| on-icon-click | hook function when clicking on the input icon | function | — | — |
|
||||||
|
|
||||||
### Autocomplete Events
|
### Autocomplete Events
|
||||||
|
|
||||||
|
|
|
@ -7,6 +7,8 @@
|
||||||
:placeholder="placeholder"
|
:placeholder="placeholder"
|
||||||
:name="name"
|
:name="name"
|
||||||
:size="size"
|
:size="size"
|
||||||
|
:icon="icon"
|
||||||
|
:on-icon-click="onIconClick"
|
||||||
@change="handleChange"
|
@change="handleChange"
|
||||||
@focus="handleFocus"
|
@focus="handleFocus"
|
||||||
@blur="handleBlur"
|
@blur="handleBlur"
|
||||||
|
@ -62,7 +64,9 @@
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true
|
default: true
|
||||||
},
|
},
|
||||||
customItem: String
|
customItem: String,
|
||||||
|
icon: String,
|
||||||
|
onIconClick: Function
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
Loading…
Reference in New Issue