ShowEasyFrontEnd/FrontEnd/components/newComponent/pagination/pagination.vue

<template>
  <div>
    <v-pagination v-model="page" :length="pageLength"
      :next-icon="page === pageLength || pageLength === 0 ? '' : '$next'" :prev-icon="page === 1 ? '' : '$prev'"
      total-visible="5" circle></v-pagination>
  </div>
</template>
<script>
export default {
  props: {
    pageLength: {
      type: Number,
      required: true,
      default: 1,
    },
  },
  data() {
    return {
      page: 1,
    };
  },
  watch: {
    page: {
      handler: function () {
        this.$emit("update", this.page);
      },
    },
    pageLength: {
      handler: function () {
        if (this.pageLength === 1) {
          this.page = 1;
        }
      },
    },
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
:deep() {
  ul>li {
    button {
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      box-shadow: none;
      border: none;
      color: #f48800 !important;

      i {
        color: #f48800 !important;
      }
    }

    .v-pagination__item--active {
      color: white !important;
    }

    .v-pagination__more {
      color: #f48800 !important;
    }
  }
}
</style>