<template>
<div class="system-num" :style="{ width: contentWidth + 'px' }">
<div
class="prev"
@click="prevHandle"
:style="{ width: btnWidth + 'px' }"
:class="{ 'btn-opacity': index == 0 }"
>
{{ leftIcon }}
</div>
<div class="num-box" :style="{ width: contentWidth - btnWidth * 2 + 'px' }">
<div
class="num-content"
:style="{ transform: 'translateX(' + left + 'px)' }"
>
<div
class="num-item"
v-for="(item, index) in systemList"
:key="index"
:style="{ width: itemWidth + 'px' }"
>
{{ item }}
</div>
</div>
</div>
<div
class="next"
@click="nextHandle"
:style="{ width: btnWidth + 'px' }"
:class="{ 'btn-opacity': index == -(systemList.length - num) }"
>
{{ rightIcon }}
</div>
</div>
</template>
<script>
export default {
name: "",
data() {
return {
index: 0,
left: 1,
systemList: [1, 2, 3, 4, 5, 6, 7, 8],
leftIcon: "<<",
rightIcon: ">>",
};
},
props: {
/*
每一项的宽度 * 一屏显示多少个 = 最外面div的宽度 - 两边按钮的宽度(两个)
*/
// 最外面div的宽度
contentWidth: {
type: String,
default: 550,
},
// 两边按钮的宽度
btnWidth: {
type: String,
default: 25,
},
// 每一项的宽度
itemWidth: {
type: Number,
default: 100,
},
// 一屏显示多少个
num: {
type: Number,
default: 5,
},
// systemList: {
// typeof: Array,
// default: () => []
// }
},
mounted() {},
methods: {
prevHandle() {
if (this.index == 0) return;
this.index++;
this.left = this.index * this.itemWidth;
},
nextHandle() {
if (this.index == -(this.systemList.length - this.num)) return;
this.index--;
this.left = this.index * this.itemWidth;
},
},
};
</script>
<style lang="scss" scoped>
.system-num {
height: 100%;
display: flex;
justify-content: space-between;
.prev,
.next {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: #095d94;
color: #02d4ff;
}
.btn-opacity {
opacity: 0.3;
}
.num-box {
height: 100%;
overflow: hidden;
.num-content {
display: flex;
justify-content: space-between;
height: 100%;
transition: transform 1s;
.num-item {
display: flex;
justify-content: space-between;
flex-shrink: 0;
background: #666;
}
}
}
}
</style>
