mirror of https://github.com/ElemeFE/element
129 lines
3.0 KiB
Vue
129 lines
3.0 KiB
Vue
<template>
|
|
<li
|
|
@mouseenter="hoverItem"
|
|
@click.stop="selectOptionClick"
|
|
class="el-select-dropdown__item"
|
|
v-show="queryPassed"
|
|
:class="{ 'selected': itemSelected, 'is-disabled': disabled, 'hover': parent.hoverIndex === index }">
|
|
<slot>
|
|
<span>{{ label }}</span>
|
|
</slot>
|
|
</li>
|
|
</template>
|
|
|
|
<script type="text/babel">
|
|
import emitter from 'main/mixins/emitter';
|
|
|
|
export default {
|
|
mixins: [emitter],
|
|
|
|
name: 'el-option',
|
|
|
|
componentName: 'option',
|
|
|
|
props: {
|
|
value: {
|
|
required: true
|
|
},
|
|
label: [String, Number],
|
|
selected: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
index: -1,
|
|
queryPassed: true,
|
|
hitState: false
|
|
};
|
|
},
|
|
|
|
computed: {
|
|
parent() {
|
|
let result = this.$parent;
|
|
while (!result.isSelect) {
|
|
result = result.$parent;
|
|
}
|
|
return result;
|
|
},
|
|
|
|
itemSelected() {
|
|
if (Object.prototype.toString.call(this.parent.selected) === '[object Object]') {
|
|
return this === this.parent.selected;
|
|
} else if (Array.isArray(this.parent.selected)) {
|
|
return this.parent.value.indexOf(this.value) > -1;
|
|
}
|
|
},
|
|
|
|
currentSelected() {
|
|
return this.selected || (this.parent.multiple ? this.parent.value.indexOf(this.value) > -1 : this.parent.value === this.value);
|
|
}
|
|
},
|
|
|
|
watch: {
|
|
currentSelected(val) {
|
|
if (val === true) {
|
|
this.dispatch('select', 'addOptionToValue', this);
|
|
}
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
disableOptions() {
|
|
this.disabled = true;
|
|
},
|
|
|
|
hoverItem() {
|
|
if (!this.disabled) {
|
|
this.parent.hoverIndex = this.parent.options.indexOf(this);
|
|
}
|
|
},
|
|
|
|
selectOptionClick() {
|
|
if (this.disabled !== true) {
|
|
this.dispatch('select', 'handleOptionClick', this);
|
|
}
|
|
},
|
|
|
|
queryChange(query) {
|
|
this.queryPassed = new RegExp(query, 'i').test(this.label);
|
|
if (!this.queryPassed) {
|
|
this.parent.filteredOptionsCount--;
|
|
}
|
|
},
|
|
|
|
resetIndex() {
|
|
this.$nextTick(() => {
|
|
this.index = this.parent.options.indexOf(this);
|
|
});
|
|
}
|
|
},
|
|
|
|
created() {
|
|
this.label = this.label || ((typeof this.value === 'string' || typeof this.value === 'number') ? this.value : '');
|
|
this.parent.options.push(this);
|
|
this.parent.optionsCount++;
|
|
this.parent.filteredOptionsCount++;
|
|
this.index = this.parent.options.indexOf(this);
|
|
|
|
if (this.currentSelected === true) {
|
|
this.dispatch('select', 'addOptionToValue', this);
|
|
}
|
|
|
|
this.$on('queryChange', this.queryChange);
|
|
this.$on('disableOptions', this.disableOptions);
|
|
this.$on('resetIndex', this.resetIndex);
|
|
},
|
|
|
|
beforeDestroy() {
|
|
this.dispatch('select', 'onOptionDestroy', this);
|
|
}
|
|
};
|
|
</script>
|