github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #32 from eleme/feat-next/upgrade-select-and-input 

update select and input
pull/2/head
baiyaaaaa 2016-07-29 11:33:19 +08:00 committed by GitHub
parent 8ec81da71b a733f7835e
commit 8de3a3158c
8 changed files with 163 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
examples/docs/select.md
View File

@ -1,8 +1,5 @@
<script> <script>
export default { export default {
created() {
this.template = '<span>label: {{ label }}, value: {{ value }}</span>';
},
data() { data() {
return { return {
options: [{ options: [{
@ -128,13 +125,13 @@
## 基本用法 ## 基本用法
<el-select :value.sync="value"> <el-select v-model="value">
<el-option v-for="item in options" :label="item.label" :value="item.value"></el-option> <el-option v-for="item in options" :label="item.label" :value="item.value"></el-option>
</el-select> </el-select>
```html ```html
<template> <template>
<el-select :value.sync="value"> <el-select v-model="value">
<el-option <el-option
v-for="item in options" v-for="item in options"
:label="item.label" :label="item.label"
@ -172,13 +169,13 @@
## 禁用状态 ## 禁用状态
<el-select :value.sync="value2" disabled> <el-select v-model="value2" disabled>
<el-option v-for="item in options" :label="item.label" :value="item.value"></el-option> <el-option v-for="item in options" :label="item.label" :value="item.value"></el-option>
</el-select> </el-select>
```html ```html
<template> <template>
<el-select :value.sync="value2" disabled> <el-select v-model="value2" disabled>
<el-option <el-option
v-for="item in options" v-for="item in options"
:label="item.label" :label="item.label"
@ -216,13 +213,13 @@
## 有禁用选项 ## 有禁用选项
<el-select :value.sync="value3"> <el-select v-model="value3">
<el-option v-for="item in options2" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option> <el-option v-for="item in options2" :label="item.label" :value="item.value" :disabled="item.disabled"></el-option>
</el-select> </el-select>
```html ```html
<template> <template>
<el-select :value.sync="value3"> <el-select v-model="value3">
<el-option <el-option
v-for="item in options2" v-for="item in options2"
:label="item.label" :label="item.label"
@ -262,13 +259,13 @@
## 可清空单选 ## 可清空单选
<el-select :value.sync="value4" clearable> <el-select v-model="value4" clearable>
<el-option v-for="item in options" :label="item.label" :value="item.value"></el-option> <el-option v-for="item in options" :label="item.label" :value="item.value"></el-option>
</el-select> </el-select>
```html ```html
<template> <template>
<el-select :value.sync="value4" clearable> <el-select v-model="value4" clearable>
<el-option <el-option
v-for="item in options" v-for="item in options"
:label="item.label" :label="item.label"
@ -306,7 +303,7 @@
## 指定初始被选项 ## 指定初始被选项
<el-select :value.sync="value5"> <el-select v-model="value5">
<el-option v-for="item in options" :label="item.label" :value="item.value" :selected="item.value === '选项2'"></el-option> <el-option v-for="item in options" :label="item.label" :value="item.value" :selected="item.value === '选项2'"></el-option>
</el-select> </el-select>
@ -314,7 +311,7 @@
```html ```html
<template> <template>
<el-select :value.sync="value5"> <el-select v-model="value5">
<el-option <el-option
v-for="item in options" v-for="item in options"
:label="item.label" :label="item.label"
@ -355,7 +352,7 @@
```html ```html
<template> <template>
<el-select :value.sync="value5"> <el-select v-model="value5">
<el-option <el-option
v-for="item in options" v-for="item in options"
:label="item.label" :label="item.label"
@ -393,32 +390,29 @@
## 自定义模板 ## 自定义模板
<el-select :value.sync="value6"> <el-select v-model="value6">
<el-option <el-option
v-for="item in options" v-for="item in options"
:label="item.label" :label="item.label"
:value="item.value" :value="item.value">
:template="template"> <span>label: {{ item.label }}, value: {{ item.value }}</span>
</el-option> </el-option>
</el-select> </el-select>
```html ```html
<template> <template>
<el-select :value.sync="value6"> <el-select v-model="value6">
<el-option <el-option
v-for="item in options" v-for="item in options"
:label="item.label" :label="item.label"
:value="item.value" :value="item.value">
:template="optionTemplate"> <span>label: {{ item.label }}, value: {{ item.value }}</span>
</el-option> </el-option>
</el-select> </el-select>
</template> </template>
<script> <script>
export default { export default {
cerated () {
this.optionTemplate = '<span>label: {{ label }}, value: {{ value }}</span>';
},
data() { data() {
return { return {
options: [{ options: [{
@ -446,7 +440,7 @@
## 多选 ## 多选
<el-select :value.sync="value7" multiple> <el-select v-model="value7" multiple>
<el-option <el-option
v-for="item in options" v-for="item in options"
:label="item.label" :label="item.label"
@ -456,7 +450,7 @@
```html ```html
<template> <template>
<el-select :value.sync="value7" multiple> <el-select v-model="value7" multiple>
<el-option <el-option
v-for="item in options" v-for="item in options"
:label="item.label" :label="item.label"
@ -494,13 +488,13 @@
## 自定义宽度 ## 自定义宽度
<el-select :value.sync="value8" :width="300" :dropdown-width="350"> <el-select v-model="value8" :width="300" :dropdown-width="350">
<el-option v-for="item in options" :label="item.label" :value="item.value"></el-option> <el-option v-for="item in options" :label="item.label" :value="item.value"></el-option>
</el-select> </el-select>
```html ```html
<template> <template>
<el-select :value.sync="value8" :width="300" :dropdown-width="350"> <el-select v-model="value8" :width="300" :dropdown-width="350">
<el-option <el-option
v-for="item in options" v-for="item in options"
:label="item.label" :label="item.label"
@ -538,7 +532,7 @@
## 分组 ## 分组
<el-select :value.sync="value9"> <el-select v-model="value9">
<el-option-group v-for="group in options3" :label="group.label"> <el-option-group v-for="group in options3" :label="group.label">
<el-option v-for="item in group.options" :label="item.label" :value="item.value"></el-option> <el-option v-for="item in group.options" :label="item.label" :value="item.value"></el-option>
</el-option-group> </el-option-group>
@ -546,7 +540,7 @@
```html ```html
<template> <template>
<el-select :value.sync="value9"> <el-select v-model="value9">
<el-option-group v-for="group in options3" :label="group.label"> <el-option-group v-for="group in options3" :label="group.label">
<el-option <el-option
v-for="item in group.options" v-for="item in group.options"
@ -592,13 +586,13 @@
## 选项较多时的交互 ## 选项较多时的交互
<el-select :value.sync="value10"> <el-select v-model="value10">
<el-option v-for="item in options4" :label="item.label" :value="item.value"></el-option> <el-option v-for="item in options4" :label="item.label" :value="item.value"></el-option>
</el-select> </el-select>
```html ```html
<template> <template>
<el-select :value.sync="value10"> <el-select v-model="value10">
<el-option <el-option
v-for="item in options4" v-for="item in options4"
:label="item.label" :label="item.label"
@ -654,13 +648,13 @@
## 可搜索 ## 可搜索
<el-select :value.sync="value11" filterable> <el-select v-model="value11" filterable>
<el-option v-for="item in options" :label="item.label" :value="item.value"></el-option> <el-option v-for="item in options" :label="item.label" :value="item.value"></el-option>
</el-select> </el-select>
```html ```html
<template> <template>
<el-select :value.sync="value11" filterable> <el-select v-model="value11" filterable>
<el-option <el-option
v-for="item in options" v-for="item in options"
:label="item.label" :label="item.label"
@ -698,14 +692,14 @@
## 服务端搜索 ## 服务端搜索
<el-select :value.sync="value12" multiple filterable remote :remote-method="remoteMethod" :loading="loading"> <el-select v-model="value12" multiple filterable remote :remote-method="remoteMethod" :loading="loading">
<el-option v-for="item in options5" :label="item.label" :value="item.value"></el-option> <el-option v-for="item in options5" :label="item.label" :value="item.value"></el-option>
</el-select> </el-select>
```html ```html
<template> <template>
<el-select <el-select
:value.sync="value12" v-model="value12"
multiple multiple
filterable filterable
remote remote
@ -776,4 +770,3 @@
| label | 选项的标签，若不设置则默认与 `value` 相同 | string/number | | | | label | 选项的标签，若不设置则默认与 `value` 相同 | string/number | | |
| disabled | 是否禁用该选项 | boolean | | false | | disabled | 是否禁用该选项 | boolean | | false |
| selected | 选项是否被初始选中 | boolean | | false | | selected | 选项是否被初始选中 | boolean | | false |
| template | 选项的自定义模板 | String | | `<span>{{ label }}</span>` |

47
packages/input/src/input.vue
View File

@ -12,20 +12,20 @@
:name="name" :name="name"
class="el-input__inner" class="el-input__inner"
:placeholder="placeholder" :placeholder="placeholder"
v-model="value" v-model="currentValue"
:disabled="disabled" :disabled="disabled"
:readonly="readonly" :readonly="readonly"
@focus="$emit('onfocus', value)" @focus="$emit('onfocus', currentValue)"
@blur="handleBlur" @blur="handleBlur"
:number="number" :number="number"
:maxlength="maxlength" :maxlength="maxlength"
:minlength="minlength" :minlength="minlength"
:autocomplete="autoComplete" :autocomplete="autoComplete"
v-el:input ref="input"
> >
</template> </template>
<!-- 写成垂直的方式会导致 placeholder 失效, 蜜汁bug --> <!-- 写成垂直的方式会导致 placeholder 失效, 蜜汁bug -->
<textarea v-else v-model="value" class="el-textarea__inner" :name="name" :placeholder="placeholder" :disabled="disabled" :readonly="readonly" @focus="$emit('onfocus', value)" @blur="handleBlur"></textarea> <textarea v-else v-model="currentValue" class="el-textarea__inner" :name="name" :placeholder="placeholder" :disabled="disabled" :readonly="readonly" @focus="$emit('onfocus', val)" @blur="handleBlur"></textarea>
</div> </div>
</template> </template>
<script> <script>
@ -37,9 +37,7 @@
mixins: [emitter], mixins: [emitter],
props: { props: {
value: { value: {},
required: true
},
placeholder: { placeholder: {
type: String, type: String,
default: '' default: ''
@ -79,26 +77,43 @@
maxlength: Number, maxlength: Number,
minlength: Number minlength: Number
}, },
events: {
inputSelect() {
this.$els.input.select();
}
},
methods: { methods: {
handleBlur(event) { handleBlur(event) {
this.$emit('onblur', this.value); this.$emit('onblur', this.currentValue);
this.dispatch('form-item', 'el.form.blur', [this.value]); this.dispatch('form-item', 'el.form.blur', [this.currentValue]);
},
inputSelect() {
this.$refs.input.select();
} }
}, },
data() {
return {
currentValue: ''
};
},
created() {
this.$on('inputSelect', this.inputSelect);
},
computed: { computed: {
validating() { validating() {
return this.$parent.validating; return this.$parent.validating;
} }
}, },
watch: { watch: {
'value'(val) { 'value'(val) {
this.$emit('onchange', this.value); this.currentValue = val;
this.dispatch('form-item', 'el.form.change', this.value); },
'currentValue'(val) {
this.$emit('input', val);
this.$emit('onchange', val);
this.dispatch('form-item', 'el.form.change', val);
} }
} }
}; };

18
packages/select-dropdown/src/select-dropdown.vue
View File

@ -28,14 +28,16 @@
if (this.popper) { if (this.popper) {
this.popper.update(); this.popper.update();
} else { } else {
this.popper = new Popper(this.$parent.$els.reference, this.$el, { this.$nextTick(() => {
gpuAcceleration: false, this.popper = new Popper(this.$parent.$refs.reference.$el, this.$el, {
placement: 'bottom-start', gpuAcceleration: false,
boundariesPadding: 0, placement: 'bottom-start',
forceAbsolute: true boundariesPadding: 0,
}); forceAbsolute: true
this.popper.onCreate(popper => { });
this.resetTransformOrigin(popper); this.popper.onCreate(popper => {
this.resetTransformOrigin(popper);
});
}); });
} }
}, },

14
packages/select/src/option-group.vue
View File

@ -1,10 +1,12 @@
<template> <template>
<li class="el-select-group__title">{{ label }}</li> <ul class="el-select-group__wrap">
<li> <li class="el-select-group__title">{{ label }}</li>
<ul class="el-select-group"> <li>
<slot></slot> <ul class="el-select-group">
</ul> <slot></slot>
</li> </ul>
</li>
</ul>
</template> </template>
<script type="text/babel"> <script type="text/babel">

27
packages/select/src/option.vue
View File

@ -5,7 +5,9 @@
class="el-select-dropdown__item" class="el-select-dropdown__item"
v-show="queryPassed" v-show="queryPassed"
:class="{ 'selected': itemSelected(), 'is-disabled': disabled, 'hover': parent.hoverIndex === index }"> :class="{ 'selected': itemSelected(), 'is-disabled': disabled, 'hover': parent.hoverIndex === index }">
<include></include> <slot>
<span>{{ label }}</span>
</slot>
</li> </li>
</template> </template>
@ -32,10 +34,6 @@
disabled: { disabled: {
type: Boolean, type: Boolean,
default: false default: false
},
template: {
type: String,
default: '<span>{{ label }}</span>'
} }
}, },
@ -48,18 +46,20 @@
}; };
}, },
computed: {
currentSelected() {
return this.selected || (this.$parent.multiple ? this.$parent.value.indexOf(this.value) > -1 : this.$parent.value === this.value);
}
},
watch: { watch: {
selected(val) { currentSelected(val) {
if (val === true) { if (val === true) {
this.dispatch('select', 'addOptionToValue', this); this.dispatch('select', 'addOptionToValue', this);
} }
} }
}, },
partials: {
'el-selectmenu-default': '<span>{{ label }}</span>'
},
methods: { methods: {
disableOptions() { disableOptions() {
this.disabled = true; this.disabled = true;
@ -94,22 +94,17 @@
}, },
created() { created() {
// Vue 1.x 需要禁用缓存；2.0 不需要配置
this.$options._linkerCachable = false;
this.parent = this.$parent; this.parent = this.$parent;
while (!this.parent.isSelect) { while (!this.parent.isSelect) {
this.parent = this.parent.$parent; this.parent = this.parent.$parent;
} }
this.label = this.label || ((typeof this.value === 'string' || typeof this.value === 'number') ? this.value : ''); this.label = this.label || ((typeof this.value === 'string' || typeof this.value === 'number') ? this.value : '');
this.selected = this.selected || (this.parent.multiple ? this.parent.value.indexOf(this.value) > -1 : this.parent.value === this.value);
this.parent.options.push(this); this.parent.options.push(this);
this.parent.optionsCount++; this.parent.optionsCount++;
this.parent.filteredOptionsCount++; this.parent.filteredOptionsCount++;
this.index = this.parent.options.indexOf(this); this.index = this.parent.options.indexOf(this);
this.$options.template = this.$options.template.replace(/<include><\/include>/g, this.template); if (this.currentSelected === true) {
if (this.selected === true) {
this.dispatch('select', 'addOptionToValue', this); this.dispatch('select', 'addOptionToValue', this);
} }

106
packages/select/src/select.vue
View File

@ -1,12 +1,12 @@
<template> <template>
<div class="el-select" :class="{ 'is-multiple': multiple, 'is-small': size === 'small' }"> <div class="el-select" :class="{ 'is-multiple': multiple, 'is-small': size === 'small' }">
<div class="el-select__tags" v-if="multiple" @click.stop="toggleMenu" v-el:tags :style="{ 'max-width': width - 36 + 'px' }"> <div class="el-select__tags" v-if="multiple" @click.stop="toggleMenu" ref="tags" :style="{ 'max-width': inputWidth - 36 + 'px' }">
<el-tag <el-tag
v-for="item in selected" v-for="item in selected"
closable closable
:hit="item.hitState" :hit="item.hitState"
type="primary" type="primary"
@click="deleteTag($event, item)" @click.native="deleteTag($event, item)"
close-transition>{{ item.label }}</el-tag> close-transition>{{ item.label }}</el-tag>
<input <input
@ -23,33 +23,33 @@
:debounce="remote ? 300 : 0" :debounce="remote ? 300 : 0"
v-if="filterable" v-if="filterable"
:style="{ width: inputLength + 'px' }" :style="{ width: inputLength + 'px' }"
v-el:input> ref="input">
</div> </div>
<el-input <el-input
v-el:reference ref="reference"
:value.sync="selectedLabel" v-model="selectedLabel"
type="text" type="text"
:placeholder="placeholder" :placeholder="currentPlaceholder"
:name="name" :name="name"
:disabled="disabled" :disabled="disabled"
:readonly="!filterable || multiple" :readonly="!filterable || multiple"
@click="toggleMenu" @click.native="toggleMenu"
@keyup="debouncedOnInputChange" @keyup.native="debouncedOnInputChange"
@keydown.down.prevent="navigateOptions('next')" @keydown.native.down.prevent="navigateOptions('next')"
@keydown.up.prevent="navigateOptions('prev')" @keydown.native.up.prevent="navigateOptions('prev')"
@keydown.enter.prevent="selectOption" @keydown.native.enter.prevent="selectOption"
@keydown.esc.prevent="visible = false" @keydown.native.esc.prevent="visible = false"
@keydown.tab="visible = false" @keydown.native.tab="visible = false"
@mouseenter="inputHovering = true" @mouseenter.native="inputHovering = true"
@mouseleave="inputHovering = false" @mouseleave.native="inputHovering = false"
:icon="showCloseIcon ? 'circle-close' : 'caret-top'" :icon="showCloseIcon ? 'circle-close' : 'caret-top'"
:style="{ 'width': width + 'px' }" :style="{ 'width': inputWidth + 'px' }"
v-element-clickoutside="visible = false"> v-element-clickoutside="handleClose">
</el-input> </el-input>
<el-select-menu <el-select-menu
v-el:popper ref="popper"
v-show="visible && nodataText !== false" v-show="visible && nodataText !== false"
transition="md-fade-bottom" transition="fade"
:style="{ 'width': dropdownWidth ? dropdownWidth + 'px' : '100%' }"> :style="{ 'width': dropdownWidth ? dropdownWidth + 'px' : '100%' }">
<ul class="el-select-dropdown__list" v-show="options.length > 0 && filteredOptionsCount > 0"> <ul class="el-select-dropdown__list" v-show="options.length > 0 && filteredOptionsCount > 0">
<slot></slot> <slot></slot>
@ -65,6 +65,7 @@
import ElSelectMenu from 'packages/select-dropdown/index.js'; import ElSelectMenu from 'packages/select-dropdown/index.js';
import ElTag from 'packages/tag/index.js'; import ElTag from 'packages/tag/index.js';
import debounce from 'throttle-debounce/debounce'; import debounce from 'throttle-debounce/debounce';
import Clickoutside from 'main/utils/clickoutside';
export default { export default {
mixins: [emitter], mixins: [emitter],
@ -80,6 +81,8 @@
showCloseIcon() { showCloseIcon() {
let criteria = this.clearable && this.inputHovering && !this.multiple && this.options.indexOf(this.selected) > -1; let criteria = this.clearable && this.inputHovering && !this.multiple && this.options.indexOf(this.selected) > -1;
if (!this.$el) return false;
let icon = this.$el.querySelector('.el-input__icon'); let icon = this.$el.querySelector('.el-input__icon');
if (icon) { if (icon) {
if (criteria) { if (criteria) {
@ -109,6 +112,14 @@
} }
} }
return null; return null;
},
inputWidth() {
if (!this.width) {
return this.multiple ? 220 : 180;
}
return this.width;
} }
}, },
@ -119,7 +130,7 @@
}, },
directives: { directives: {
ElementClickoutside: require('vue-clickoutside') ElementClickoutside: Clickoutside
}, },
props: { props: {
@ -161,7 +172,8 @@
voidRemoteQuery: false, voidRemoteQuery: false,
bottomOverflowBeforeHidden: 0, bottomOverflowBeforeHidden: 0,
optionsAllDisabled: false, optionsAllDisabled: false,
inputHovering: false inputHovering: false,
currentPlaceholder: ''
}; };
}, },
@ -172,7 +184,12 @@
} }
}, },
placeholder(val) {
this.currentPlaceholder = val;
},
value(val) { value(val) {
this.$emit('input', val);
this.$emit('change', val); this.$emit('change', val);
if (this.valueChangeBySelected) { if (this.valueChangeBySelected) {
this.valueChangeBySelected = false; this.valueChangeBySelected = false;
@ -211,11 +228,11 @@
return; return;
} }
this.valueChangeBySelected = true; this.valueChangeBySelected = true;
this.value = val.map(item => item.value); this.$emit('input', val.map(item => item.value));
if (this.selected.length > 0) { if (this.selected.length > 0) {
this.placeholder = ''; this.currentPlaceholder = '';
} else { } else {
this.placeholder = this.cachedPlaceHolder; this.currentPlaceholder = this.cachedPlaceHolder;
} }
this.$nextTick(() => { this.$nextTick(() => {
this.resetInputHeight(); this.resetInputHeight();
@ -223,17 +240,20 @@
if (this.filterable) { if (this.filterable) {
this.query = ''; this.query = '';
this.hoverIndex = -1; this.hoverIndex = -1;
this.$els.input.focus(); this.$refs.input.focus();
this.inputLength = 20; this.inputLength = 20;
} }
} else { } else {
if (val.value) { if (val.value) {
this.value = val.value; this.$emit('input', val.value);
} }
} }
}, },
query(val) { query(val) {
this.$nextTick(() => {
this.broadcast('select-dropdown', 'updatePopper');
});
if (this.multiple && this.filterable) { if (this.multiple && this.filterable) {
this.resetInputHeight(); this.resetInputHeight();
} }
@ -258,13 +278,13 @@
if (!val) { if (!val) {
this.$el.querySelector('.el-input__icon').classList.remove('is-reverse'); this.$el.querySelector('.el-input__icon').classList.remove('is-reverse');
this.broadcast('select-dropdown', 'destroyPopper'); this.broadcast('select-dropdown', 'destroyPopper');
if (this.$els.input) { if (this.$refs.input) {
this.$els.input.blur(); this.$refs.input.blur();
} }
this.resetHoverIndex(); this.resetHoverIndex();
if (!this.multiple) { if (!this.multiple) {
if (this.dropdownUl && this.selected.$el) { if (this.dropdownUl && this.selected.$el) {
this.bottomOverflowBeforeHidden = this.selected.$el.getBoundingClientRect().bottom - this.$els.popper.getBoundingClientRect().bottom; this.bottomOverflowBeforeHidden = this.selected.$el.getBoundingClientRect().bottom - this.$refs.popper.$el.getBoundingClientRect().bottom;
} }
if (this.selected && this.selected.value) { if (this.selected && this.selected.value) {
this.selectedLabel = this.selected.label; this.selectedLabel = this.selected.label;
@ -282,13 +302,13 @@
if (this.filterable) { if (this.filterable) {
this.query = this.selectedLabel; this.query = this.selectedLabel;
if (this.multiple) { if (this.multiple) {
this.$els.input.focus(); this.$refs.input.focus();
} else { } else {
this.broadcast('input', 'inputSelect'); this.broadcast('input', 'inputSelect');
} }
} }
if (!this.dropdownUl) { if (!this.dropdownUl) {
let dropdownChildNodes = this.$els.popper.childNodes; let dropdownChildNodes = this.$refs.popper.$el.childNodes;
this.dropdownUl = [].filter.call(dropdownChildNodes, item => item.tagName === 'UL')[0]; this.dropdownUl = [].filter.call(dropdownChildNodes, item => item.tagName === 'UL')[0];
} }
if (!this.multiple && this.dropdownUl) { if (!this.multiple && this.dropdownUl) {
@ -305,6 +325,10 @@
}, },
methods: { methods: {
handleClose() {
this.visible = false;
},
toggleLastOptionHitState(hit) { toggleLastOptionHitState(hit) {
if (!Array.isArray(this.selected)) return; if (!Array.isArray(this.selected)) return;
const option = this.selected[this.selected.length - 1]; const option = this.selected[this.selected.length - 1];
@ -340,21 +364,21 @@
}, },
managePlaceholder() { managePlaceholder() {
if (this.placeholder !== '') { if (this.currentPlaceholder !== '') {
this.placeholder = this.$els.input.value ? '' : this.cachedPlaceHolder; this.currentPlaceholder = this.$refs.input.value ? '' : this.cachedPlaceHolder;
} }
}, },
resetInputState(e) { resetInputState(e) {
if (e.keyCode !== 8) this.toggleLastOptionHitState(false); if (e.keyCode !== 8) this.toggleLastOptionHitState(false);
this.inputLength = this.$els.input.value.length * 12 + 20; this.inputLength = this.$refs.input.value.length * 12 + 20;
}, },
resetInputHeight() { resetInputHeight() {
this.$nextTick(() => { this.$nextTick(() => {
let inputChildNodes = this.$els.reference.childNodes; let inputChildNodes = this.$refs.reference.$el.childNodes;
let input = [].filter.call(inputChildNodes, item => item.tagName === 'INPUT')[0]; let input = [].filter.call(inputChildNodes, item => item.tagName === 'INPUT')[0];
input.style.height = Math.max(this.$els.tags.clientHeight + 6, this.size === 'small' ? 28 : 36) + 'px'; input.style.height = Math.max(this.$refs.tags.clientHeight + 6, this.size === 'small' ? 28 : 36) + 'px';
this.broadcast('select-dropdown', 'updatePopper'); this.broadcast('select-dropdown', 'updatePopper');
}); });
}, },
@ -429,8 +453,8 @@
}, },
resetScrollTop() { resetScrollTop() {
let bottomOverflowDistance = this.options[this.hoverIndex].$el.getBoundingClientRect().bottom - this.$els.popper.getBoundingClientRect().bottom; let bottomOverflowDistance = this.options[this.hoverIndex].$el.getBoundingClientRect().bottom - this.$refs.popper.$el.getBoundingClientRect().bottom;
let topOverflowDistance = this.options[this.hoverIndex].$el.getBoundingClientRect().top - this.$els.popper.getBoundingClientRect().top; let topOverflowDistance = this.options[this.hoverIndex].$el.getBoundingClientRect().top - this.$refs.popper.$el.getBoundingClientRect().top;
if (bottomOverflowDistance > 0) { if (bottomOverflowDistance > 0) {
this.dropdownUl.scrollTop += bottomOverflowDistance; this.dropdownUl.scrollTop += bottomOverflowDistance;
} }
@ -468,14 +492,12 @@
}, },
created() { created() {
this.cachedPlaceHolder = this.placeholder; this.cachedPlaceHolder = this.currentPlaceholder = this.placeholder;
if (this.multiple) { if (this.multiple) {
this.selectedInit = true; this.selectedInit = true;
this.selected = []; this.selected = [];
} }
if (!this.width) {
this.width = this.multiple ? 220 : 180;
}
this.debouncedOnInputChange = debounce(this.debounce, () => { this.debouncedOnInputChange = debounce(this.debounce, () => {
this.onInputChange(); this.onInputChange();
}); });

6
packages/theme-default/src/option-group.css
View File

@ -7,6 +7,12 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
@e wrap {
list-style: none;
margin: 0;
padding: 0;
}
@e title { @e title {
padding-left: 10px; padding-left: 10px;
font-size: 12px; font-size: 12px;

8
src/utils/vue-popper.js
View File

@ -1,8 +1,8 @@
import PopperJS from './popper'; import PopperJS from './popper';
/** /**
* @param {HTMLElement} [reference=$els.reference] - The reference element used to position the popper. * @param {HTMLElement} [reference=$refs.reference] - The reference element used to position the popper.
* @param {HTMLElement} [popper=$els.popper] - The HTML element used as popper, or a configuration used to generate the popper. * @param {HTMLElement} [popper=$refs.popper] - The HTML element used as popper, or a configuration used to generate the popper.
* @param {String} [placement=button] - Placement of the popper accepted values: top(-start, -end), right(-start, -end), bottom(-start, -right), left(-start, -end) * @param {String} [placement=button] - Placement of the popper accepted values: top(-start, -end), right(-start, -end), bottom(-start, -right), left(-start, -end)
* @param {Number} [offset=0] - Amount of pixels the popper will be shifted (can be negative). * @param {Number} [offset=0] - Amount of pixels the popper will be shifted (can be negative).
* @param {Boolean} [visible=false] Visibility of the popup element. * @param {Boolean} [visible=false] Visibility of the popup element.
@ -47,8 +47,8 @@ export default {
return; return;
} }
this.popper = this.popper || this.$els.popper; this.popper = this.popper || this.$refs.popper;
this.reference = this.reference || this.$els.reference; this.reference = this.reference || this.$refs.reference;
if (!this.popper || !this.reference) { if (!this.popper || !this.reference) {
return; return;