本次练习是在上次vue组件练习的基础上增加了分页和朦层的效果。组件化开发练习文章见地址
先上效果图:
目录结构:
在上次的基础上添加了分页组件Pager.js和朦层组件Loading.js和Modal.js以及修改了容器组件MovieContainer
在分页展示过程中,添加了页码,当用户发生点击事件时,分页组件获取到newPage(新页面),由于不是自己的数据,无法进行修改.这时候触发事件,将事件扔给父组件MovieContainer.js.父组件收到通知注册事件来解决问题.
分页组件Pager.js
var template = `
<div class="pager" v-if = "total>0">
<a href="" @click.prevent = "handleAClick(1)" class="pager-item " :class = "current ===1 ? 'disabled' : ''">首页</a>
<a href="" @click.prevent = "handleAClick(current - 1)" class="pager-item " :class = "current ===1 ? 'disabled' : ''">上一页</a>
<span class="pager-text">
<i>{{ current }}</i>
/
<i>{{ pageNumber }}</i>
</span>
<a href="" @click.prevent = "handleAClick(current + 1)" class="pager-item" :class = "current ===pageNumber ? 'disabled' : ''">下一页</a>
<a href="" @click.prevent = "handleAClick(pageNumber)" class="pager-item" :class = "current ===pageNumber ? 'disabled' : ''">尾页</a>
</div>
`;
export default {
computed: {
//总页数
pageNumber(){
return Math.ceil(this.total/this.limit);
}
},
props:{
current:{
//当前页码
default: 1,
type:Number,
},
total:{
//总的数据量
default: 0,
type: Number
},
limit:{
//页容量:每页显示多少条数据
default: 10,
type:Number
}
},
methods: {
handleAClick(newPage){
if(newPage < 1 || newPage > this.pageNumber || newPage == this.current){
return;
}
//自己无法处理,将事件扔出去
this.$emit("page-change",newPage)
}
},
template
};
父组件MovieContainer.js
//该组件仅用于获取电影数据
import MovieList from "./MovieList.js";
import movieService from "../service/movieService.js";
import Pager1 from "./Pager1.js";
import Loading from "./Loading.js"
var template = `
<div>
<MovieList :movies="movies"/>
<Pager1 :total = "total" :limit = "limit" :current = "page" @page-change = "handlePageChange"/>
<Loading :isShow = "isLoading"/>
</div>
`;
export default {
components: {
MovieList,
Pager1,
Loading
},
data() {
return {
movies: [],
total: 0, //总数据量
limit: 3, //页容量
page: 1, //当前页码
isLoading:false //是否正在远程加载数据
};
},
async created() {
//获取电影数据
this.getMovies();
},
methods: {
handlePageChange(newPage){
this.page = newPage;
this.getMovies();
},
async getMovies(){
this.isLoading = true;
var resp = await movieService.getMovies(this.page,this.limit);
this.movies = resp.data;
this.total = resp.count;
this.isLoading = false;
}
},
template
};
朦层组件
Loading.js
import Modal from "./Modal.js";
var template = `
<Modal v-if="isShow">
<div class="loading">加载中...</div>
</Modal>
`;
export default {
components:{
Modal
},
props: {
isShow: {
default: false,
type: Boolean
}
},
template
};
Modal.js
var template = `
<div class="modal">
<div class="center">
<slot>默认的显示</slot>
</div>
</div>
`;
export default {
template
};