diff --git a/components/select/option-group.vue b/components/select/option-group.vue
index f3055fd..e0c5d7b 100644
--- a/components/select/option-group.vue
+++ b/components/select/option-group.vue
@@ -18,8 +18,7 @@
},
data () {
return {
- prefixCls: prefixCls,
- hidden: false // for search
+ prefixCls: prefixCls
}
}
}
diff --git a/components/select/select.vue b/components/select/select.vue
index 39ce2f3..61a1f5a 100644
--- a/components/select/select.vue
+++ b/components/select/select.vue
@@ -12,17 +12,21 @@
<span :class="[`${prefixCls}-selected-value`]" v-show="!showPlaceholder && !multiple && !filterable">{{ selectedSingle }}</span>
<input
type="text"
- :class="[`${prefixCls}-input`]"
v-if="filterable"
v-model="query"
- :placeholder="placeholder"
+ :class="[`${prefixCls}-input`]"
+ :placeholder="showPlaceholder ? placeholder : ''"
:style="inputStyle"
- @blur="handleBlur">
+ @blur="handleBlur"
+ @keydown="resetInputState"
+ @keydown.delete="handleInputDelete"
+ v-el:input>
<Icon type="ios-close" :class="[`${prefixCls}-arrow`]" v-show="showCloseIcon" @click.stop="clearSingleSelect"></Icon>
<Icon type="arrow-down-b" :class="[`${prefixCls}-arrow`]"></Icon>
</div>
<Dropdown v-show="visible" transition="slide-up" v-ref:dropdown>
- <ul :class="[`${prefixCls}-dropdown-list`]"><slot></slot></ul>
+ <ul v-show="notFound" :class="[`${prefixCls}-not-found`]"><li>未找到</li></ul>
+ <ul v-else :class="[`${prefixCls}-dropdown-list`]"><slot></slot></ul>
</Dropdown>
</div>
</template>
@@ -85,7 +89,8 @@
selectedMultiple: [],
focusIndex: 0,
query: '',
- inputLength: 20
+ inputLength: 20,
+ notFound: false
}
},
computed: {
@@ -124,7 +129,11 @@
let style = {};
if (this.multiple) {
- style.width = `${this.inputLength}px`;
+ if (this.showPlaceholder) {
+ style.width = '100%';
+ } else {
+ style.width = `${this.inputLength}px`;
+ }
}
return style;
@@ -245,6 +254,12 @@
return false;
}
this.model.splice(index, 1);
+
+ if (this.filterable && this.visible) {
+ this.$els.input.focus();
+ }
+
+ this.$broadcast('on-update-popper');
},
// to select option for single
toggleSingleSelected (value, init = false) {
@@ -404,6 +419,14 @@
}
}
}, 300);
+ },
+ resetInputState () {
+ this.inputLength = this.$els.input.value.length * 12 + 20;
+ },
+ handleInputDelete () {
+ if (this.multiple && this.model.length && this.query === '') {
+ this.removeTag(this.model.length - 1);
+ }
}
},
ready () {
@@ -423,6 +446,9 @@
},
visible (val) {
if (val) {
+ if (this.multiple && this.filterable) {
+ this.$els.input.focus();
+ }
this.$broadcast('on-update-popper');
} else {
@@ -430,6 +456,16 @@
},
query (val) {
this.$broadcast('on-query-change', val);
+ let is_hidden = true;
+
+ this.$nextTick(() => {
+ this.findChild((child) => {
+ if (!child.hidden) {
+ is_hidden = false;
+ }
+ });
+ this.notFound = is_hidden;
+ });
}
},
events: {
@@ -443,6 +479,12 @@
this.removeTag(index);
} else {
this.model.push(value);
+ this.$broadcast('on-update-popper');
+ }
+
+ if (this.filterable) {
+ this.query = '';
+ this.$els.input.focus();
}
} else {
this.model = value;
diff --git a/local/routers/select.vue b/local/routers/select.vue
index 7d07926..1bd88d1 100644
--- a/local/routers/select.vue
+++ b/local/routers/select.vue
@@ -4,7 +4,7 @@
{{ city | json }}<br>
<Button @click="city = 'hangzhou'">切换城市</Button>
<br>
- <i-select v-if="true" :model.sync="city" style="width:200px" @on-change="change">
+ <i-select v-if="true" :model.sync="city" style="width:200px" filterable @on-change="change">
<i-option-group label="热门城市">
<i-option value="beijing">北京市</i-option>
<i-option value="shanghai" disabled label="上海市">上海市2</i-option>
@@ -13,31 +13,16 @@
<i-option-group label="二线城市">
<i-option value="nanjing">南京市</i-option>
<i-option value="hangzhou">杭州市</i-option>
+ <i-option value="heilongjiang" disabled>黑龙江市</i-option>
</i-option-group>
- <i-option value="heilongjiang" disabled>黑龙江市</i-option>
- <i-option-group label="热门城市">
- <i-option value="beijing">北京市</i-option>
- <i-option value="shanghai" disabled label="上海市">上海市2</i-option>
- <i-option value="shenzhen">深圳市</i-option>
- </i-option-group>
- <i-option-group label="二线城市">
- <i-option value="nanjing">南京市</i-option>
- <i-option value="hangzhou">杭州市</i-option>
- </i-option-group>
- <i-option value="heilongjiang" disabled>黑龙江市</i-option>
- <i-option-group label="热门城市">
- <i-option value="beijing">北京市</i-option>
- <i-option value="shanghai" disabled label="上海市">上海市2</i-option>
- <i-option value="shenzhen">深圳市</i-option>
- </i-option-group>
- <i-option-group label="二线城市">
- <i-option value="nanjing">南京市</i-option>
- <i-option value="hangzhou">杭州市</i-option>
+ <i-option-group label="其它城市">
+ <i-option value="jyg">嘉峪关市</i-option>
+ <i-option value="lanzhou">兰州市</i-option>
+ <i-option value="beijingxi">北京西</i-option>
</i-option-group>
- <i-option value="heilongjiang" disabled>黑龙江市</i-option>
</i-select>
- <i-select :model.sync="focus" style="width:200px" @on-change="change" clearable filterable label-in-value>
+ <i-select v-show="true" :model.sync="focus" style="width:200px" @on-change="change" clearable filterable label-in-value>
<i-option value="beijing">北京</i-option>
<i-option value="shanghai" label="上海市">上海市</i-option>
<i-option value="shenzhen" disabled>深圳市</i-option>
@@ -51,6 +36,19 @@
<i-option value="e">e市</i-option>
</i-select>
+ <i-select v-if="true" :model.sync="focus2" style="width:300px" @on-change="change" clearable filterable multiple>
+ <i-option value="beijing" label="北京市">北京2</i-option>
+ <i-option value="shanghai">上海市</i-option>
+ <i-option value="shenzhen" disabled>深圳市</i-option>
+ <i-option value="guangzhou">广州市</i-option>
+ <i-option value="shijiazhuang">石家庄市</i-option>
+ <i-option value="a">a1市</i-option>
+ <i-option value="b">b2市</i-option>
+ <i-option value="c">c1市</i-option>
+ <i-option value="d">d2市</i-option>
+ <i-option value="e">e1市</i-option>
+ </i-select>
+
<i-select v-if="true" :model.sync="focus2" style="width:300px" @on-change="change" clearable multiple>
<i-option value="beijing" label="北京市">北京2</i-option>
<i-option value="shanghai">上海市</i-option>
@@ -84,7 +82,7 @@
return {
city: '',
focus: '',
- focus2: ['beijing', 'guangzhou', 'b']
+ focus2: ['beijing']
// focus2: []
}
},
diff --git a/styles/components/select.less b/styles/components/select.less
index 5b14788..d346311 100644
--- a/styles/components/select.less
+++ b/styles/components/select.less
@@ -163,6 +163,17 @@
&-small &-input{
height: @input-height-small;
}
+
+ &-multiple &-input{
+ height: 25px;
+ line-height: 28px;
+ padding: 0 0 0 6px;
+ }
+
+ &-not-found{
+ text-align: center;
+ color: @btn-disable-color;
+ }
}
.@{select-item-prefix-cls} {
--
libgit2 0.21.4