hfysite/components/pageSelect.vue

<template>
  <div class="content">
    <div class="conBox page-select">
<!--      当前页数-->
<!--      总页数-->
      <div :class="`p-btn prev ${page===1?'disable-btn':''}`"
           @click="prevPageHandle">
        <svg-icon icon-class="prev"/>
      </div>
      <div class="p-show">
        {{page}}/{{total}}
        页 {{count}}条
      </div>
      <div :class="`p-btn next ${page===total?'disable-btn':''}`"
           @click="nextPageHandle">
        <svg-icon icon-class="next"/>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "pageSelect",
  props:{
    page: {default:1},
    count: {default:1},
    total: {default:1}
  },
  methods:{
    prevPageHandle(){
      if(this.page <= 1){
        return
      }
      this.$root.$emit('changePage',this.page-1);
    },
    nextPageHandle(){
      if(this.page >= this.total){
        return
      }
      this.$root.$emit('changePage',this.page+1);
    }
  }
}
</script>

<style scoped>
.page-select{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 15px;
}
.p-btn{
  width: 120px;
  height: 35px;
  display: flex;
  justify-content: center;
  font-size: 1.4rem;
  align-items: center;
  border-radius: 3px;
  box-shadow: 1px 1px 3px blanchedalmond;
  background: #4397bd;
  cursor: pointer;
}
.disable-btn{
  cursor: not-allowed;
  background: #595959;
  color: white;
}
.p-show{
  margin: 0 10px;
}
</style>