【Vuetify】v-pagination 怎样输入页码跳转

Vuetify 中提供了 v-pagination 分页的功能,如下图:
【Vuetify】v-pagination 怎样输入页码跳转_第1张图片
这样只能两个两个的往下获取页码,如果页码很多的话,查找起来极其不便,所以能不能加个输入页码跳转的功能呢?

<v-row>
  <v-col cols="8">
    <v-pagination v-model="pageNumber" :length="itemLength" total-visible="10" circle color="#c34450">v-pagination>
    
  v-col>
  
  <v-col cols="4">
    <div class="jump-page">
      <v-row>
        <span>跳转至第span>
        <v-text-field solo v-model="whichPage">v-text-field><span>span>
        <v-btn small fab @click="jumpPage()">GOv-btn>
      v-row>
    div>
  v-col>
v-row>
// js
export default {
     
  data() {
     
    return {
     
      pageNumber: 1,
      itemLength: 20,
      whichPage: 1
    }
  },
  methods: {
     
    jumpPage() {
     
      this.pageNumber = Number(this.whichPage);
    }
  }
}
/* css */
.jump-page span {
     
  margin-left: 10px;
  margin-right: 10px;
}
/* 样式写的不全,自己再调整哈~ */

在这里插入图片描述

你可能感兴趣的:(Vue网站局部实现,阿哈哈哈大前端)