From 4aec6a66bbabe979473dbebb9830cea879c1e016 Mon Sep 17 00:00:00 2001 From: 梁灏 Date: Mon, 6 Mar 2017 18:24:57 +0800 Subject: [PATCH] support Select --- CHANGE.md | 2 ++ README.md | 2 +- examples/app.vue | 1 + examples/main.js | 4 ++++ examples/routers/select.vue | 294 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++----------------------------------------------------------- src/components/select/option-group.vue | 11 ++++++----- src/components/select/option.vue | 20 +++++++++++--------- src/components/select/select.vue | 144 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++----------------------------------------------------------------- src/index.js | 8 ++++---- 9 files changed, 343 insertions(+), 143 deletions(-) diff --git a/CHANGE.md b/CHANGE.md index a36640b..a1a85e1 100644 --- a/CHANGE.md +++ b/CHANGE.md @@ -41,3 +41,5 @@ MenuItem 和 Submenu 的 key 改为了 name Menu 的 activeKey 改为 activeName,openKeys 改为 openNames ### Cascader Caspanel 的 sublist 从 prop -> data +### Select +model 改为 value，支持 v-model \ No newline at end of file diff --git a/README.md b/README.md index 0e707fa..d070cb2 100644 --- a/README.md +++ b/README.md @@ -25,7 +25,7 @@ - [x] Checkbox - [x] Switch - [ ] Table -- [ ] Select +- [x] Select - [x] Slider - [ ] DatePicker - [ ] TimePicker diff --git a/examples/app.vue b/examples/app.vue index 0f3fa75..f51ad5a 100644 --- a/examples/app.vue +++ b/examples/app.vue @@ -43,6 +43,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
  • Menu
  • Spin
  • Cascader
    • +
  • Select
    • diff --git a/examples/main.js b/examples/main.js index c3b505e..db866cc 100644 --- a/examples/main.js +++ b/examples/main.js @@ -136,6 +136,10 @@ const router = new VueRouter({ { path: '/cascader', component: require('./routers/cascader.vue') + }, + { + path: '/select', + component: require('./routers/select.vue') } ] }); diff --git a/examples/routers/select.vue b/examples/routers/select.vue index e774cb0..96ae0ec 100644 --- a/examples/routers/select.vue +++ b/examples/routers/select.vue @@ -1,70 +1,246 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/select/option-group.vue b/src/components/select/option-group.vue index ee5a3a2..6dd245a 100644 --- a/src/components/select/option-group.vue +++ b/src/components/select/option-group.vue @@ -2,7 +2,7 @@
  • {{ label }}
    • @@ -10,6 +10,7 @@ const prefixCls = 'ivu-select-group'; export default { + name: 'OptionGroup', props: { label: { type: String, @@ -25,7 +26,7 @@ methods: { queryChange () { this.$nextTick(() => { - const options = this.$els.options.querySelectorAll('.ivu-select-item'); + const options = this.$refs.options.querySelectorAll('.ivu-select-item'); let hasVisibleOption = false; for (let i = 0; i < options.length; i++) { if (options[i].style.display !== 'none') { @@ -37,11 +38,11 @@ }); } }, - events: { - 'on-query-change' () { + mounted () { + this.$on('on-query-change', () => { this.queryChange(); return true; - } + }); } }; diff --git a/src/components/select/option.vue b/src/components/select/option.vue index 471f6a5..bef7dbf 100644 --- a/src/components/select/option.vue +++ b/src/components/select/option.vue @@ -2,9 +2,14 @@
  • {{ showLabel }}
    • diff --git a/src/components/select/select.vue b/src/components/select/select.vue index 297c18f..f1184ce 100644 --- a/src/components/select/select.vue +++ b/src/components/select/select.vue @@ -2,11 +2,11 @@
    -
    +
    {{ item.label }} - +
    {{ placeholder }} {{ selectedSingle }} @@ -20,31 +20,35 @@ @blur="handleBlur" @keydown="resetInputState" @keydown.delete="handleInputDelete" - v-el:input> - + ref="input"> +
    - -
    • {{ notFoundText }}
    -
    -     + + +
    • {{ notFoundText }}
    +
    +     +