<template>
<div class="v-option" :class="{ 'is-disabled': option.disabled, 'is-selected': option.selected, 'is-highlighted': option.state.highlighted, 'is-hovered': option.state.hovered }" :style="{ 'padding-left': `${12 + 12 * option.state.depth}px` }">
<img class="icon" src="https://placekitten.com/20/20" width="20" height="20" />
<div class="label" v-html="option.item"></div>
</div>
</template>
<script type="text/javascript">
import VOption from './option.vue'
export default {
name: 'VState',
extends: VOption
}
</script>
<style lang="scss" scoped>
.v-option {
padding: 8px 12px;
&.is-hovered {
background-color: #e5e5e5;
}
&.is-disabled {
cursor: default;
opacity: .7;
}
&.is-highlighted {
color: #fff;
background-color: #19A187;
}
}
.icon {
float: left;
margin-right: 8px;
border-radius: 50%;
}
.label {
flex: 1 1 auto;
white-space: nowrap;
user-select: none;
pointer-events: none;
font-size: 14px;
font-weight: normal;
}
</style>
|