Select: add visible-change event (#1849)

.github/CONTRIBUTING.md

@@ -58,7 +58,7 @@ npm run dist
 ```
 
 ## 组件开发规范
-- 通过 `npm run new` 创建组件目录结构，包含测试代码、入口文件、cooking 配置、package.json、文档
+- 通过 `make new` 创建组件目录结构，包含测试代码、入口文件、cooking 配置、package.json、文档
 - 如果包含父子组件，需要更改目录结构，参考 `Button`
 - 组件内如果依赖了其他组件，需要在当前组件内引入，参考 `Select`
 

examples/docs/en-US/select.md

@@ -637,11 +637,15 @@ Create and select new items that are not included in select options
 | remote | whether options are loaded from server | boolean | — | false |
 | remote-method | custom remote search method | function | — | — |
 | loading | whether Select is loading data from server | boolean | — | false |
+| loading-text | displayed text while loading data from server | string | — | Loading |
+| no-match-text | displayed text when no data matches the filtering query | string | — | No matching data |
+| no-data-text | displayed text when there is no options | string | — | No data |
 
 ### Select Events
 | Event Name | Description | Parameters |
 |---------|---------|---------|
 | change | triggers when the selected value changes | current selected value |
+| visible-change | triggers when the dropdown appears/disappears | true when it appears, and false otherwise |
 
 ### Option Group Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |

examples/docs/zh-CN/select.md

@@ -639,11 +639,15 @@
 | remote | 是否为远程搜索 | boolean | — | false |
 | remote-method | 远程搜索方法 | function | — | — |
 | loading | 是否正在从远程获取数据 | boolean | — | false |
+| loading-text | 远程加载时显示的文字 | string | — | 加载中 |
+| no-match-text | 搜索条件无匹配时显示的文字 | string | — | 无匹配数据 |
+| no-data-text | 选项为空时显示的文字 | string | — | 无数据 |
 
 ### Select Events
 | 事件名称 | 说明 | 回调参数 |
 |---------|---------|---------|
 | change | 选中值发生变化时触发 | 目前的选中值 |
+| visible-change | 下拉框出现/隐藏时触发 | 出现则为 true，隐藏则为 false |
 
 ### Option Group Attributes
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |

packages/select/src/select.vue

@@ -124,14 +124,14 @@
 
       emptyText() {
         if (this.loading) {
-          return this.t('el.select.loading');
+          return this.loadingText || this.t('el.select.loading');
         } else {
           if (this.remote && this.query === '' && this.options.length === 0) return false;
           if (this.filterable && this.options.length > 0 && this.filteredOptionsCount === 0) {
-            return this.t('el.select.noMatch');
+            return this.noMatchText || this.t('el.select.noMatch');
           }
           if (this.options.length === 0) {
-            return this.t('el.select.noData');
+            return this.noDataText || this.t('el.select.noData');
           }
         }
         return null;
@@ -163,6 +163,9 @@
       allowCreate: Boolean,
       loading: Boolean,
       remote: Boolean,
+      loadingText: String,
+      noMatchText: String,
+      noDataText: String,
       remoteMethod: Function,
       filterMethod: Function,
       multiple: Boolean,
@@ -291,6 +294,7 @@
             this.setOverflow();
           }
         }
+        this.$emit('visible-change', val);
       },
 
       options(val) {
@@ -433,7 +437,9 @@
           let inputChildNodes = this.$refs.reference.$el.childNodes;
           let input = [].filter.call(inputChildNodes, item => item.tagName === 'INPUT')[0];
           input.style.height = Math.max(this.$refs.tags.clientHeight + 6, sizeMap[this.size] || 36) + 'px';
-          this.broadcast('ElSelectDropdown', 'updatePopper');
+          if (this.visible && this.emptyText !== false) {
+            this.broadcast('ElSelectDropdown', 'updatePopper');
+          }
         });
       },
 

test/unit/specs/select.spec.js

@@ -209,6 +209,41 @@ describe('Select', () => {
     expect(vm.$el.querySelector('.el-input').classList.contains('is-disabled')).to.true;
   });
 
+  it('visible event', done => {
+    vm = createVue({
+      template: `
+        <div>
+          <el-select v-model="value" @visible-change="handleVisibleChange">
+            <el-option
+              v-for="item in options"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
+        </div>
+      `,
+
+      data() {
+        return {
+          options: [],
+          value: '',
+          visible: ''
+        };
+      },
+
+      methods: {
+        handleVisibleChange(val) {
+          this.visible = val;
+        }
+      }
+    }, true);
+    vm.$children[0].visible = true;
+    setTimeout(() => {
+      expect(vm.visible).to.true;
+      done();
+    }, 50);
+  });
+
   it('keyboard operations', done => {
     vm = getSelectVm();
     const select = vm.$children[0];