面向对象创建分页插件

最新推荐文章于 2023-04-12 18:40:57 发布

HAI6545

最新推荐文章于 2023-04-12 18:40:57 发布

阅读量282

点赞数 1

分类专栏： JavaScript案例文章标签： javascript vue.js elementui

本文链接：https://blog.csdn.net/HAI6545/article/details/122329931

版权

本文介绍如何利用Vue.js的响应式特性和ElementUI组件库，创建一个强大的分页插件。通过结合Vue的数据绑定和ElementUI的Page组件，可以轻松实现前后端数据交互和用户友好的分页效果。

摘要由CSDN通过智能技术生成


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<!-- 在布局的时候需要留一个盒子放分页 -->
<div class="container"></div>
</body>
<script>
// 使用面向对象来做分页插件
// 因为有实参，需要形参接收 - 希望后面的对象参数是可选项 - 希望别人如果有数据就直接使用，如果没有数据，也可以进行效果的展示
function Page(classname, options = {}){
    // 获取容器
    this.container = document.querySelector('.'+classname);
    // 创建分页盒子
    this.box = document.createElement('div')
    // 设置样式
    this.setStyle(this.box, {
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center'
    })
    // 不允许选中其中的文字
    this.box.onselectstart = function(){ // 选中文字就会触发这个事件
        // console.log(this);
        return false // 阻止默认行为
    }
    // 鼠标移入鼠标变成手指状态
    this.box.onmouseover = () => this.box.style.cursor = 'pointer'
    // 将分页盒子放在容器中
    this.container.appendChild(this.box)
    // 创建小div需要参数的替换
    // 将形参options当做当前对象的属性
    this.options = options
    // 定义自己的参数 - 对象的属性
    this.myOptions = {
        language: {
            first: '首页',
            prev: '上一页',
            pageList: '', // 添加一个键值对 - 在上一页和下一页之间多创建一个放页码的div
            next: '下一页',
            last: '末页'
        },
        pageData: {
            total: 1000,
            pageSize: 10
        }
    }
    // 替换参数的方法
    this.setDefault()
    // 定义一个对象属性 - 的值是用来放页码的div
    this.pageList = null
    // 定义当前页默认为1
    this.currentPage = 1
    // 遍历自己的参数创建小div
    this.createDiv()
    // 创建页码
    // 计算总页数 - 用自己的参数去计算
    this.totalPage = Math.ceil(this.myOptions.pageData.total / this.myOptions.pageData.pageSize)
    // 创建页

最低0.47元/天解锁文章

HAI6545

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
面向对象创建分页插件

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body><div class="container"></div></body><scri..
复制链接

扫一扫