前言
一般的后台管理中,分页用到的地方有很多,索性就抽离出来一个组件,但是,项目领导突发奇想,说根据不同板块展示不同主题色。
实现
<template>
<div>
<el-pagination
ref="pagination"
v-if="handleSizeChange && handleCurrentChange"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="page"
background
:pager-count="5"
:page-size="size"
layout="total, jumper, sizes, prev, pager, next"
:total="total"
>
</el-pagination>
</div>
</template>
<script>
/**
* @warning 禁止私自修改代码
* @description 封装分页操作 支持主题变色
* @param { Number } page 页码
* @param { Number } size 一页几条
* @param { Number } total 总条数
* @param { Function } handleSizeChange 分页
* @param { Function } handleCurrentChange 翻页操作
* @param { String } palte 主题色 用来兼容不同板块的主题 默认绿色
* @author 小饼干.hualuo
* */
export default {
name: "CommonPaging",
props: {
page: {
type: Number,
default: 1,
},
size: {
type: Number,
default: 10,
},
total: {
type: Number,
default: 0,
},
handleSizeChange: {
type: Function,
default: ()=>function(){},
},
handleCurrentChange: {
type: Function,
default: ()=>function(){},
},
palte:{
type:String,
default:"user",
validator:function(value){
return ['user','admin'].indexOf(value) !== -1
}
}
},
computed:{
// 计算属性计算颜色
colors:function(){
let themeColors = ''
if (this.palte === 'user') {
themeColors = 'green'
}else{
themeColors = 'blue'
}
return themeColors
}
},
mounted(){
this.domOper()
},
methods:{
/**
* 操作dom 用来更改分页文案
* 操作dom 用来通过不同模块更改不同主题色
* */
domOper(){
// 更改UI文案
const jumper = document.getElementsByClassName("el-pagination__jump")
jumper[0].childNodes[0].nodeValue = '第'
// 更改主题
const pagination = document.getElementsByClassName("el-pager")
pagination[0].childNodes[this.page - 1].style.backgroundColor = this.colors
}
}
};
</script>
<style>
</style>
思路
想过很多种方案
props
更改less
- 动态
行内样式
- 百度。。。
虽然都没实现 但是思路有了
由于elementUI中 分页是封装好的 我肯定是不能去改源码的
然后 我毅然决然的去操作了dom
props
先根据props传入的参数
palte:{
type:String,
default:"user",
validator:function(value){
return ['user','admin'].indexOf(value) !== -1
}
}
计算属性
然后 用计算属性判断不同板块展示颜色
computed:{
// 计算属性计算颜色
colors:function(){
let themeColors = ''
if (this.palte === 'user') {
themeColors = 'green'
}else{
themeColors = 'blue'
}
return themeColors
}
},
操作dom
最后也是最重要的一步 拿到dom节点 去ast树上去赋值
const pagination = document.getElementsByClassName("el-pager")
pagination[0].childNodes[this.page - 1].style.backgroundColor = this.colors
然后就成功了
使用
//demo.vue
<template>
<div>
<!-- CommonPaging全局注册过 -->
<CommonPaging
:page="paging.page"
:size="paging.size"
:total="paging.total"
:handle-size-change="handleSizeChange"
:handle-current-change="handleCurrentChange"
palte='user'
></CommonPaging>
</div>
</template>
<script>
export default {
data() {
return {
paging: {
page: 1,
size: 10,
total: 10,
},
};
},
methods:{
handleSizeChange(val){
this.paging.size = val
},
handleCurrentChange(val){
this.paging.page = val
}
}
};
</script>
<style>
</style>
结果
最后效果 希望能对各位巨佬有所帮助