<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>
