89 lines
2.8 KiB
Vue
89 lines
2.8 KiB
Vue
<template>
|
||
<li :class="classes" @click.stop="select" @mouseout.stop="blur" v-show="!hidden"><slot>{{ showLabel }}</slot></li>
|
||
</template>
|
||
<script>
|
||
import Emitter from '../../mixins/emitter';
|
||
import { findComponentUpward } from '../../utils/assist';
|
||
|
||
const prefixCls = 'ivu-select-item';
|
||
|
||
export default {
|
||
name: 'iOption',
|
||
componentName: 'select-item',
|
||
mixins: [ Emitter ],
|
||
props: {
|
||
value: {
|
||
type: [String, Number],
|
||
required: true
|
||
},
|
||
label: {
|
||
type: [String, Number]
|
||
},
|
||
disabled: {
|
||
type: Boolean,
|
||
default: false
|
||
}
|
||
},
|
||
data () {
|
||
return {
|
||
selected: false,
|
||
index: 0, // for up and down to focus
|
||
isFocus: false,
|
||
hidden: false, // for search
|
||
searchLabel: '', // the value is slot,only for search
|
||
autoComplete: false
|
||
};
|
||
},
|
||
computed: {
|
||
classes () {
|
||
return [
|
||
`${prefixCls}`,
|
||
{
|
||
[`${prefixCls}-disabled`]: this.disabled,
|
||
[`${prefixCls}-selected`]: this.selected && !this.autoComplete,
|
||
[`${prefixCls}-focus`]: this.isFocus
|
||
}
|
||
];
|
||
},
|
||
showLabel () {
|
||
return (this.label) ? this.label : this.value;
|
||
}
|
||
},
|
||
methods: {
|
||
select () {
|
||
if (this.disabled) {
|
||
return false;
|
||
}
|
||
|
||
this.dispatch('iSelect', 'on-select-selected', this.value);
|
||
},
|
||
blur () {
|
||
this.isFocus = false;
|
||
},
|
||
queryChange (val) {
|
||
const parsedQuery = val.replace(/(\^|\(|\)|\[|\]|\$|\*|\+|\.|\?|\\|\{|\}|\|)/g, '\\$1');
|
||
this.hidden = !new RegExp(parsedQuery, 'i').test(this.searchLabel);
|
||
},
|
||
// 在使用函数防抖后，设置 key 后，不更新组件了，导致SearchLabel 不更新 #1865
|
||
updateSearchLabel () {
|
||
this.searchLabel = this.$el.textContent;
|
||
}
|
||
},
|
||
mounted () {
|
||
this.updateSearchLabel();
|
||
this.dispatch('iSelect', 'append');
|
||
this.$on('on-select-close', () => {
|
||
this.isFocus = false;
|
||
});
|
||
this.$on('on-query-change', (val) => {
|
||
this.queryChange(val);
|
||
});
|
||
|
||
const Select = findComponentUpward(this, 'iSelect');
|
||
if (Select) this.autoComplete = Select.autoComplete;
|
||
},
|
||
beforeDestroy () {
|
||
this.dispatch('iSelect', 'remove');
|
||
}
|
||
};
|
||
</script>
|