<template><div>外贸知识<div class="art-box"><div class="art-item-box"><div class="art-item" v-for="(art, index) in paginatedArtList" :key="index"><a :href="art.artsrc"><img :src="art.imgsrc" alt="">{{art.title}}</a> </div></div><!-- 分页器 -->  <!-- <div class="pagination">  <button @click="currentPage--" :disabled="currentPage === 0">  上一页  </button>  <span>当前页: {{ currentPage + 1 }}</span>  <button @click="currentPage++" :disabled="currentPage >= Math.ceil(artList.length / 2) - 1">  下一页  </button>  </div>   --><div class="fenyeqi-box"><!-- <span class="demonstration">大于 7 页时的效果</span> --><el-paginationlayout="prev, pager, next"v-model="currentPage"  :page-count="totalPages"@current-change="handleCurrentChange">  <!-- 监听页码变化事件 --></el-pagination></div></div></div>
</template><script>
export default {name: "Knowledge",data() {return {currentPage: 0, // 当前页码};// artList:[]},computed: {artList() {return this.$store.state.artList;},paginatedArtList() {const start = this.currentPage * 9;const end = start + 9;return this.artList.slice(start, end);},totalPages() {// 计算总页数return Math.ceil(this.artList.length / 9);  // 每页显示9条数据},},methods: {handleCurrentChange(page) {this.currentPage = page - 1; // ElementUI 分页器从 1 开始，而我们的计算从 0 开始，需要转换一下},//  currentPage(step = 1) {  //         this.currentPage = Math.max(0, Math.min(this.currentPage + step, Math.ceil(this.artList.length / 2) - 1));  //     }},mounted(){console.log(this.totalPages);}
};
</script><style coped>
.art-box{max-width: 1200px;margin: auto;
}
.art-item-box{width: 100%;display: flex;flex-wrap: wrap;/*justify-content: space-around;*/
}
.art-item{width: 27%;margin: 3%;/*background-color: #cccccc;*/
}
.art-item img{width: 100%;display: block;box-shadow: 1px 1px 10px 5px #cccccc ;margin-bottom: 20px;transition: all 0.5s;
}
.art-item img:hover{transform: scale(1.1);
}
.art-item a{/* margin-top: 5px; */display: block;text-align: center;margin: auto;
}
.fenyeqi-box{display: block;text-align: center;
}
</style>