laravel +vite+ vue+ tailwindcss paginator分页

创建TS文件 UrlWindow.ts

export class Paginator {
    currentPage: number
    lastPage: number
    query: Object = {}
    path: string = '/'
    fragment: string = ''
    onEachSide: number = 3
    pageName: string = 'page'
    perPage: number = 15
    options: object = {}
    total: number = 0
    items = []

    constructor(paginate: object, options: object = {}) {
        console.log(paginate)
        let total = paginate['total']
        let perPage = paginate['per_page']
        let items = paginate['data']
        this.query = this.getUrlParams(window.location.href)
        this.options = options;
        Object.keys(options).forEach(k => {
            this[k] = options[k]
        })
        this.total = total;
        this.perPage = perPage;
        this.lastPage = paginate['last_page'];//Math.max(Math.ceil(total / perPage), 1);
        this.path = paginate['path'];//this.path !== '/' ? this.path.trim().replace(/^\/|\/$/g, '') : this.path;
        this.currentPage = paginate['current_page']
        this.items = items;
    }

    getUrlParams(url: string) {
        console.log(url)
        // 通过 ? 分割获取后面的参数字符串
        const urlStr = url.split('?')[1]
        if (urlStr) {
            // 创建空对象存储参数
            let obj = {};
            // 再通过 & 将每一个参数单独分割出来
            let paramsArr = urlStr.split('&')
            for (let i = 0, len = paramsArr.length; i < len; i++) {
                // 再通过 = 将每一个参数分割为 key:value 的形式
                let arr = paramsArr[i].split('=')
                obj[arr[0]] = arr[1];
            }
            return obj
        }
        return {}
    }

    hasPages() {
        return this.currentPage != 1 || this.hasMorePages();
    }

    hasMorePages() {
        return this.currentPage < this.lastPage
    }

    getUrlRange(start:number, end:number) {
        const ret = {}
        for (var i = start; i < end + 1; i++) {
            ret[i] = this.url(i)
        }
        return ret
    }
    firstItem() {
        return this.items.length > 0 ? (this.currentPage - 1) * this.perPage + 1 : null;
    }
    arrQuery(parameters: Object) {
        let strs = []
        Object.keys(parameters).forEach(k => {
            strs.push(k + '=' + parameters[k])
        })

        console.log('page ', strs)

        return strs.join('&')
    }

    url(page: any) {
        if (page <= 0) {
            page = 1;
        }
        let parameters = this.query
        parameters['page'] = page;
        return this.path + (this.path.indexOf('?') > -1 ? '&' : '?')
            + this.arrQuery(parameters) + this.buildFragment()
    }


    buildFragment() {
        return this.fragment ? ('#' + this.fragment) : '';
    }

    previousPageUrl() {
        if (this.currentPage > 1) {
            return this.url(this.currentPage - 1);
        }
    }

    nextPageUrl() {
        if (this.hasMorePages()) {
            let url= this.url(this.currentPage + 1);
            return url
        }
    }

    count() {
        return this.items.length;
    }

    onFirstPage()
    {
        return this.currentPage <= 1;
    }

    lastItem()
    {
        return this.items.length > 0 ? this.firstItem() + this.count() - 1 : null;
    }

}
export class UrlWindow {
    paginator: Paginator
    constructor(paginator: Paginator) {
        this.paginator = paginator
    }

    objectAssign(obj1, obj2) {
        const obj3 = {};
        Object.keys(obj1).forEach(key