antDesign 自定义分页样式的实现代码_javascript技巧_

/* * @Author: 周云芳 * @Date: 2022-06-28 15:21:41 * @LastEditors: 周云芳 164591357@qq.com * @LastEditTime: 2022-10-21 14:26:58 * @Description: 用于自动注册全局自定义指令 * 使用规则: * 根据导出的name在页面使用如directives对象中的name为a-pagination,页面使用:v-a-pagination */ const requireDirective = require.context('./', true, /\.js$/) // 自定义指令 let directives = {} requireDirective.keys().map(file => { // console.log('file', file) const name = removerLastIndex(file) console.log('name', name) if (name) { directives = { ...directives, [name]: requireDirective(file).default } } return false }) function removerLastIndex(str) { const start = str.substring(2, str.length) // 去除路径中的./ start=el-drag-dialog/index.js // str = login/index // 获取最后一个/的索引 const index = start.lastIndexOf('/') // 获取最后一个/后面的值 const val = start.substring(index + 1, start.length) // 判断是不是index结尾 if (val === 'index.js') { return start.substring(index, -1) } return str } export default { install(Vue) { Object.keys(directives).forEach(key => { Vue.directive(key, directives[key]) }) } }

/* * @Author: 周云芳 * @Date: 2022-07-19 09:12:39 * @LastEditors: 周云芳 164591357@qq.com * @LastEditTime: 2022-10-21 15:05:49 * @Description:设置分页为左右布局 指令使用 v-el-pagination */ import './index.css' export default { inserted: (el, binding) => { setTimeout(() => { // 把分页条数放入总条数后 const options = el.getElementsByClassName('ant-pagination-options')[0] const sizeChange = options.getElementsByClassName( 'ant-pagination-options-size-changer' )[0] // 分页数 const prev = el.getElementsByClassName('ant-pagination-prev')[0] // // 创建两个左右div const liDom = document.createElement('li') liDom.className = 'size-change-li' // RDiv.className = 'right-div' liDom.appendChild(sizeChange) el.insertBefore(liDom, prev) // 在上一页前插入节点 }, 100) } }

.size-change-li { display: inline-block; } .ant-pagination-prev .ant-pagination-item-link, .ant-pagination-next .ant-pagination-item-link, .ant-pagination-item { border: none; } .ant-pagination-item { font-family: 'PingFang SC'; font-style: normal; font-weight: 400; font-size: 14px; } .ant-pagination-item-active { background: #3296FA; border-radius: 4px; } .ant-pagination-item-active a,.ant-pagination-item-active:focus a, .ant-pagination-item-active:hover a{ color: #FFFFFF; }

import Directive from '@/directive' Vue.use(Directive)