Browse Source

Carousel: responsive to item change (#2775)

杨奕 8 years ago
parent
commit
3f64571fcc
3 changed files with 14 additions and 7 deletions
  1. 6 1
      examples/docs/zh-CN/input.md
  2. 7 5
      packages/carousel/src/main.vue
  3. 1 1
      test/unit/specs/carousel.spec.js

+ 6 - 1
examples/docs/zh-CN/input.md

@@ -528,6 +528,8 @@ export default {
   custom-item="my-item-zh"
   placeholder="请输入内容"
   @select="handleSelect"
+  icon="edit"
+  :on-icon-click="handleIconClick"
 ></el-autocomplete>
 
 <style>
@@ -639,6 +641,9 @@ export default {
       },
       handleSelect(item) {
         console.log(item);
+      },
+      handleIconClick(ev) {
+        console.log(ev);
       }
     },
     mounted() {
@@ -792,7 +797,7 @@ export default {
 | fetch-suggestions | 返回输入建议的方法,仅当你的输入建议数据 resolve 时,通过调用 callback(data:[]) 来返回它  | Function(queryString, callback)  | — | — |
 | popper-class | Autocomplete 下拉列表的类名 | string | — | — |
 | trigger-on-focus | 是否在输入框 focus 时显示建议列表 | boolean | — | true |
-| on-icon-click | 点击 Input 内的图标的钩子函数 | function | — | — |
+| on-icon-click | 点击图标的回调函数 | function | — | — |
 | icon          | 输入框尾部图标    | string          | — | — |
 
 ### Autocomplete Events

+ 7 - 5
packages/carousel/src/main.vue

@@ -96,6 +96,10 @@ export default {
   },
 
   watch: {
+    items() {
+      this.setActiveItem(0);
+    },
+
     activeIndex(val, oldVal) {
       this.resetItemPosition();
       this.$emit('change', val, oldVal);
@@ -139,11 +143,9 @@ export default {
       });
     },
 
-    handleItemChange() {
-      debounce(100, () => {
-        this.updateItems();
-      });
-    },
+    handleItemChange: debounce(100, function() {
+      this.updateItems();
+    }),
 
     updateItems() {
       this.items = this.$children.filter(child => child.$options.name === 'ElCarouselItem');

+ 1 - 1
test/unit/specs/carousel.spec.js

@@ -110,7 +110,7 @@ describe('Carousel', () => {
       expect(vm.val).to.equal(1);
       expect(vm.oldVal).to.equal(0);
       done();
-    }, 100);
+    }, 60);
   });
 
   describe('manual control', () => {