iview/src/components/select/option.vue

85 lines
2.4 KiB
Vue
Raw Normal View History

<template>
2018-03-29 07:54:44 +02:00
<li
:class="classes"
@click.stop="select"
@touchend.stop="select"
2018-03-29 07:54:44 +02:00
@mousedown.prevent
@touchstart.prevent
><slot>{{ showLabel }}</slot></li>
</template>
<script>
2017-03-06 18:24:57 +08:00
import Emitter from '../../mixins/emitter';
2017-08-23 14:42:54 +08:00
import { findComponentUpward } from '../../utils/assist';
2017-03-06 18:24:57 +08:00
const prefixCls = 'ivu-select-item';
export default {
2017-03-06 18:24:57 +08:00
name: 'iOption',
componentName: 'select-item',
mixins: [ Emitter ],
props: {
value: {
type: [String, Number],
required: true
},
label: {
type: [String, Number]
},
disabled: {
type: Boolean,
default: false
2018-03-27 09:58:27 +02:00
},
selected: {
type: Boolean,
default: false
},
isFocused: {
type: Boolean,
default: false
}
},
data () {
return {
2018-03-27 09:58:27 +02:00
searchLabel: '', // the slot value (textContent)
2017-08-23 14:42:54 +08:00
autoComplete: false
2016-12-25 22:49:42 +08:00
};
},
computed: {
classes () {
return [
`${prefixCls}`,
{
[`${prefixCls}-disabled`]: this.disabled,
2017-08-23 14:42:54 +08:00
[`${prefixCls}-selected`]: this.selected && !this.autoComplete,
2018-03-27 09:58:27 +02:00
[`${prefixCls}-focus`]: this.isFocused
}
2016-12-25 22:49:42 +08:00
];
},
showLabel () {
2016-12-25 22:49:42 +08:00
return (this.label) ? this.label : this.value;
2018-03-27 09:58:27 +02:00
},
optionLabel(){
2018-05-29 08:40:45 +02:00
return this.label || (this.$el && this.$el.textContent);
}
},
methods: {
select () {
2018-03-27 09:58:27 +02:00
if (this.disabled) return false;
2018-03-27 09:58:27 +02:00
this.dispatch('iSelect', 'on-select-selected', {
value: this.value,
label: this.optionLabel,
});
this.$emit('on-select-selected', {
value: this.value,
label: this.optionLabel,
});
},
},
2017-03-06 18:24:57 +08:00
mounted () {
2017-08-23 14:42:54 +08:00
const Select = findComponentUpward(this, 'iSelect');
if (Select) this.autoComplete = Select.autoComplete;
2017-03-30 11:52:36 +08:00
},
2016-12-25 22:49:42 +08:00
};
</script>