Sfoglia il codice sorgente

Autocomplete: add 'icon' and 'on-icon-click' attributes (#2768)

Boik 8 anni fa
parent
commit
c310ee5661

+ 7 - 0
examples/docs/en-US/input.md

@@ -452,6 +452,8 @@ Customize how suggestions are displayed.
   custom-item="my-item-en"
   placeholder="Please input"
   @select="handleSelect"
+  icon="edit"
+  :on-icon-click="handleIconClick"
 ></el-autocomplete>
 
 <style>
@@ -518,6 +520,9 @@ Customize how suggestions are displayed.
       },
       handleSelect(item) {
         console.log(item);
+      },
+      handleIconClick(ev) {
+        console.log(ev);
       }
     },
     mounted() {
@@ -625,11 +630,13 @@ Attribute | Description | Type | Options | Default
 |----| ----| ----| ---- | -----|
 |placeholder| the placeholder of Autocomplete| string | — | — |
 |disabled | whether Autocomplete is disabled  | boolean | — | false|
+|icon | icon name | string | — | — |
 |value | binding value | 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) | — | — |
 | popper-class | custom class name for autocomplete's dropdown | string | — | — |
 | 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
 

+ 5 - 1
packages/autocomplete/src/autocomplete.vue

@@ -7,6 +7,8 @@
       :placeholder="placeholder"
       :name="name"
       :size="size"
+      :icon="icon"
+      :on-icon-click="onIconClick"
       @change="handleChange"
       @focus="handleFocus"
       @blur="handleBlur"
@@ -62,7 +64,9 @@
         type: Boolean,
         default: true
       },
-      customItem: String
+      customItem: String,
+      icon: String,
+      onIconClick: Function
     },
     data() {
       return {