mirror of https://github.com/ElemeFE/element
139 lines
3.3 KiB
Vue
139 lines
3.3 KiB
Vue
<template>
|
|
<li
|
|
@mouseenter="hoverItem"
|
|
@click.stop="selectOptionClick"
|
|
class="el-select-dropdown__item"
|
|
v-show="visible"
|
|
:class="{
|
|
'selected': itemSelected,
|
|
'is-disabled': disabled || groupDisabled || limitReached,
|
|
'hover': parent.hoverIndex === index
|
|
}">
|
|
<slot>
|
|
<span>{{ currentLabel }}</span>
|
|
</slot>
|
|
</li>
|
|
</template>
|
|
|
|
<script type="text/babel">
|
|
import Emitter from 'element-ui/src/mixins/emitter';
|
|
|
|
export default {
|
|
mixins: [Emitter],
|
|
|
|
name: 'el-option',
|
|
|
|
componentName: 'ElOption',
|
|
|
|
props: {
|
|
value: {
|
|
required: true
|
|
},
|
|
label: [String, Number],
|
|
selected: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
created: Boolean,
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
index: -1,
|
|
groupDisabled: false,
|
|
visible: true,
|
|
hitState: false
|
|
};
|
|
},
|
|
|
|
computed: {
|
|
currentLabel() {
|
|
return this.label || ((typeof this.value === 'string' || typeof this.value === 'number') ? this.value : '');
|
|
},
|
|
|
|
currentValue() {
|
|
return this.value || this.label || '';
|
|
},
|
|
|
|
parent() {
|
|
let result = this.$parent;
|
|
while (!result.isSelect) {
|
|
result = result.$parent;
|
|
}
|
|
return result;
|
|
},
|
|
|
|
itemSelected() {
|
|
if (!this.parent.multiple) {
|
|
return this.value === this.parent.value;
|
|
} else {
|
|
return this.parent.value.indexOf(this.value) > -1;
|
|
}
|
|
},
|
|
|
|
limitReached() {
|
|
if (this.parent.multiple) {
|
|
return !this.itemSelected &&
|
|
this.parent.value.length >= this.parent.multipleLimit &&
|
|
this.parent.multipleLimit > 0;
|
|
} else {
|
|
return false;
|
|
}
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
handleGroupDisabled(val) {
|
|
this.groupDisabled = val;
|
|
},
|
|
|
|
hoverItem() {
|
|
if (!this.disabled && !this.groupDisabled) {
|
|
this.parent.hoverIndex = this.parent.options.indexOf(this);
|
|
}
|
|
},
|
|
|
|
selectOptionClick() {
|
|
if (this.disabled !== true && this.groupDisabled !== true) {
|
|
this.dispatch('ElSelect', 'handleOptionClick', this);
|
|
}
|
|
},
|
|
|
|
queryChange(query) {
|
|
// query 里如果有正则中的特殊字符，需要先将这些字符转义
|
|
let parsedQuery = query.replace(/(\^|\(|\)|\[|\]|\$|\*|\+|\.|\?|\\|\{|\}|\|)/g, '\\$1');
|
|
this.visible = new RegExp(parsedQuery, 'i').test(this.currentLabel) || this.created;
|
|
if (!this.visible) {
|
|
this.parent.filteredOptionsCount--;
|
|
}
|
|
},
|
|
|
|
resetIndex() {
|
|
this.$nextTick(() => {
|
|
this.index = this.parent.options.indexOf(this);
|
|
});
|
|
}
|
|
},
|
|
|
|
created() {
|
|
this.parent.options.push(this);
|
|
this.parent.cachedOptions.push(this);
|
|
this.parent.optionsCount++;
|
|
this.parent.filteredOptionsCount++;
|
|
this.index = this.parent.options.indexOf(this);
|
|
|
|
this.$on('queryChange', this.queryChange);
|
|
this.$on('handleGroupDisabled', this.handleGroupDisabled);
|
|
this.$on('resetIndex', this.resetIndex);
|
|
},
|
|
|
|
beforeDestroy() {
|
|
this.dispatch('ElSelect', 'onOptionDestroy', this);
|
|
}
|
|
};
|
|
</script>
|