You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
50 lines
856 B
50 lines
856 B
<template>
|
|
<view class="indicator flex">
|
|
<view
|
|
v-for="(item, index) in list"
|
|
:key="index"
|
|
:class="['indicator-dot', index === current ? 'is-active' : '']"
|
|
@click="$emit('click', index)"
|
|
></view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
current: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
length: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
},
|
|
computed: {
|
|
list() {
|
|
return new Array(this.length).fill(0)
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.indicator {
|
|
&-dot {
|
|
width: 12rpx;
|
|
height: 12rpx;
|
|
border-radius: 6rpx;
|
|
background: #D9D9D9;
|
|
|
|
& + & {
|
|
margin-left: 12rpx;
|
|
}
|
|
|
|
&.is-active {
|
|
width: 56rpx;
|
|
background-image: linear-gradient(to right, #4B348F, #845CFA);
|
|
}
|
|
}
|
|
}
|
|
</style>
|