[Carousel] Add an optional label to indicator buttons (#4317)

* Add optional label to indicator buttons

* Add styling for indicator labels

* Fix positioning of indicators

* Update item.vue

* Update main.vue

* Update carousel.css
pull/4551/head
Paul 2017-04-30 08:02:42 +01:00 committed by 杨奕
parent fcfda74543
commit 54e2047818
3 changed files with 31 additions and 4 deletions

View File

@ -29,7 +29,11 @@
name: 'ElCarouselItem', name: 'ElCarouselItem',
props: { props: {
name: String name: String,
label: {
type: [String, Number],
default: ''
}
}, },
data() { data() {

View File

@ -34,14 +34,14 @@
<ul <ul
class="el-carousel__indicators" class="el-carousel__indicators"
v-if="indicatorPosition !== 'none'" v-if="indicatorPosition !== 'none'"
:class="{ 'el-carousel__indicators--outside': indicatorPosition === 'outside' || type === 'card' }"> :class="{ 'el-carousel__indicators--labels': hasLabel, 'el-carousel__indicators--outside': indicatorPosition === 'outside' || type === 'card' }">
<li <li
v-for="(item, index) in items" v-for="(item, index) in items"
class="el-carousel__indicator" class="el-carousel__indicator"
:class="{ 'is-active': index === activeIndex }" :class="{ 'is-active': index === activeIndex }"
@mouseenter="throttledIndicatorHover(index)" @mouseenter="throttledIndicatorHover(index)"
@click.stop="handleIndicatorClick(index)"> @click.stop="handleIndicatorClick(index)">
<button class="el-carousel__button"></button> <button class="el-carousel__button"><span v-if="hasLabel">{{ item.label }}</span></button>
</li> </li>
</ul> </ul>
</div> </div>
@ -95,6 +95,12 @@ export default {
}; };
}, },
computed: {
hasLabel() {
return this.items.some(item => item.label.toString().length > 0);
}
},
watch: { watch: {
items(val) { items(val) {
if (val.length > 0) this.setActiveItem(0); if (val.length > 0) this.setActiveItem(0);

View File

@ -70,6 +70,23 @@
opacity: 0.24; opacity: 0.24;
} }
} }
@modifier labels {
left: 0;
right: 0;
transform: none;
text-align: center;
.el-carousel__button {
size: auto auto;
padding: 2px 18px;
font-size: 12px;
}
.el-carousel__indicator {
padding: 6px 4px;
}
}
} }
@e indicator { @e indicator {
@ -114,4 +131,4 @@
transform: translateY(-50%) translateX(10px); transform: translateY(-50%) translateX(10px);
opacity: 0; opacity: 0;
} }
} }