80 lines
2.4 KiB
Vue
80 lines
2.4 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';
|
|
|
|
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
|
|
};
|
|
},
|
|
computed: {
|
|
classes () {
|
|
return [
|
|
`${prefixCls}`,
|
|
{
|
|
[`${prefixCls}-disabled`]: this.disabled,
|
|
[`${prefixCls}-selected`]: this.selected,
|
|
[`${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);
|
|
}
|
|
},
|
|
mounted () {
|
|
this.searchLabel = this.$el.innerHTML;
|
|
this.dispatch('iSelect', 'append');
|
|
this.$on('on-select-close', () => {
|
|
this.isFocus = false;
|
|
});
|
|
this.$on('on-query-change', (val) => {
|
|
this.queryChange(val);
|
|
});
|
|
},
|
|
beforeDestroy () {
|
|
this.dispatch('iSelect', 'remove');
|
|
}
|
|
};
|
|
</script>
|