diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md index f06ebe5f..3543ea35 100644 --- a/.github/CONTRIBUTING.md +++ b/.github/CONTRIBUTING.md @@ -58,7 +58,7 @@ npm run dist ``` ## 组件开发规范 -- 通过 `npm run new` 创建组件目录结构,包含测试代码、入口文件、cooking 配置、package.json、文档 +- 通过 `make new` 创建组件目录结构,包含测试代码、入口文件、cooking 配置、package.json、文档 - 如果包含父子组件,需要更改目录结构,参考 `Button` - 组件内如果依赖了其他组件,需要在当前组件内引入,参考 `Select` diff --git a/examples/docs/en-US/select.md b/examples/docs/en-US/select.md index 4d15adcb..5ea61c3d 100644 --- a/examples/docs/en-US/select.md +++ b/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 | diff --git a/examples/docs/zh-CN/select.md b/examples/docs/zh-CN/select.md index ba732531..dd0e65b2 100644 --- a/examples/docs/zh-CN/select.md +++ b/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 | 参数 | 说明 | 类型 | 可选值 | 默认值 | diff --git a/packages/select/src/select.vue b/packages/select/src/select.vue index 7f97b9e4..f972bf59 100644 --- a/packages/select/src/select.vue +++ b/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'); + } }); }, diff --git a/test/unit/specs/select.spec.js b/test/unit/specs/select.spec.js index 343b343b..7bf2633e 100644 --- a/test/unit/specs/select.spec.js +++ b/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: ` +