drip-public/iview
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add AutoComplete component

Browse source
This commit is contained in:
梁灏 2017-08-23 14:42:54 +08:00
parent 1183836a92
commit fed3e09d15
11 changed files with 255 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

71
src/components/select/select.vue
View file

@ -1,29 +1,31 @@
<template>
<div :class="classes" v-clickoutside="handleClose">
<div
:class="[prefixCls + '-selection']"
:class="selectionCls"
ref="reference"
@click="toggleMenu">
<div class="ivu-tag" v-for="(item, index) in selectedMultiple">
<span class="ivu-tag-text">{{ item.label }}</span>
<Icon type="ios-close-empty" @click.native.stop="removeTag(index)"></Icon>
</div>
<span :class="[prefixCls + '-placeholder']" v-show="showPlaceholder && !filterable">{{ localePlaceholder }}</span>
<span :class="[prefixCls + '-selected-value']" v-show="!showPlaceholder && !multiple && !filterable">{{ selectedSingle }}</span>
<input
type="text"
v-if="filterable"
v-model="query"
:disabled="disabled"
:class="[prefixCls + '-input']"
:placeholder="showPlaceholder ? localePlaceholder : ''"
:style="inputStyle"
@blur="handleBlur"
@keydown="resetInputState"
@keydown.delete="handleInputDelete"
ref="input">
<Icon type="ios-close" :class="[prefixCls + '-arrow']" v-show="showCloseIcon" @click.native.stop="clearSingleSelect"></Icon>
<Icon type="arrow-down-b" :class="[prefixCls + '-arrow']" v-if="!remote"></Icon>
<slot name="input">
<div class="ivu-tag" v-for="(item, index) in selectedMultiple">
<span class="ivu-tag-text">{{ item.label }}</span>
<Icon type="ios-close-empty" @click.native.stop="removeTag(index)"></Icon>
</div>
<span :class="[prefixCls + '-placeholder']" v-show="showPlaceholder && !filterable">{{ localePlaceholder }}</span>
<span :class="[prefixCls + '-selected-value']" v-show="!showPlaceholder && !multiple && !filterable">{{ selectedSingle }}</span>
<input
type="text"
v-if="filterable"
v-model="query"
:disabled="disabled"
:class="[prefixCls + '-input']"
:placeholder="showPlaceholder ? localePlaceholder : ''"
:style="inputStyle"
@blur="handleBlur"
@keydown="resetInputState"
@keydown.delete="handleInputDelete"
ref="input">
<Icon type="ios-close" :class="[prefixCls + '-arrow']" v-show="showCloseIcon" @click.native.stop="clearSingleSelect"></Icon>
<Icon type="arrow-down-b" :class="[prefixCls + '-arrow']" v-if="!remote"></Icon>
</slot>
</div>
<transition :name="transitionName">
<Drop
@ -33,7 +35,7 @@
ref="dropdown"
:data-transfer="transfer"
v-transfer-dom>
<ul v-show="notFountShow" :class="[prefixCls + '-not-found']"><li>{{ localeNotFoundText }}</li></ul>
<ul v-show="notFoundShow" :class="[prefixCls + '-not-found']"><li>{{ localeNotFoundText }}</li></ul>
<ul v-show="(!notFound && !remote) || (remote && !loading && !notFound)" :class="[prefixCls + '-dropdown-list']"><slot></slot></ul>
<ul v-show="loading" :class="[prefixCls + '-loading']">{{ localeLoadingText }}</ul>
</Drop>
@ -123,6 +125,11 @@
transfer: {
type: Boolean,
default: false
},
// Use for AutoComplete
autoComplete: {
type: Boolean,
default: false
}
},
data () {
@ -161,7 +168,13 @@
dropdownCls () {
return {
[prefixCls + '-dropdown-transfer']: this.transfer,
[prefixCls + '-multiple']: this.multiple && this.transfer
[prefixCls + '-multiple']: this.multiple && this.transfer,
['ivu-auto-complete']: this.autoComplete,
};
},
selectionCls () {
return {
[`${prefixCls}-selection`]: !this.autoComplete
};
},
showPlaceholder () {
@ -225,16 +238,19 @@
let status = true;
const options = this.$slots.default || [];
if (!this.loading && this.remote && this.query === '' && !options.length) status = false;
if (this.autoComplete && !options.length) status = false;
return this.visible && status;
},
notFountShow () {
notFoundShow () {
const options = this.$slots.default || [];
return (this.notFound && !this.remote) || (this.remote && !this.loading && !options.length);
}
},
methods: {
toggleMenu () {
if (this.disabled) {
if (this.disabled || this.autoComplete) {
return false;
}
this.visible = !this.visible;
@ -543,6 +559,7 @@
},
handleBlur () {
setTimeout(() => {
if (this.autoComplete) return;
const model = this.model;
if (this.multiple) {
@ -737,7 +754,7 @@
if (this.multiple) {
this.$refs.input.focus();
} else {
this.$refs.input.select();
if (!this.autoComplete) this.$refs.input.select();
}
if (this.remote) {
this.findChild(child => {
@ -753,7 +770,7 @@
this.broadcast('Drop', 'on-update-popper');
} else {
if (this.filterable) {
this.$refs.input.blur();
if (!this.autoComplete) this.$refs.input.blur();
// #566 reset options visible
setTimeout(() => {
this.broadcastQuery('');