|
|
@ -1,61 +1,67 @@ |
|
|
|
<template> |
|
|
|
<ElPagination v-on="$listeners" v-bind="getProps" ref="ElPaginationRef" class="Pagination" /> |
|
|
|
<ElPagination |
|
|
|
v-on="$listeners" |
|
|
|
v-bind="getProps" |
|
|
|
ref="ElPaginationRef" |
|
|
|
class="Pagination" |
|
|
|
/> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
export default { |
|
|
|
name: 'Pagination', |
|
|
|
name: "Pagination", |
|
|
|
computed: { |
|
|
|
getProps() { |
|
|
|
return { |
|
|
|
// total |
|
|
|
layout: "prev, pager, next, sizes, jumper", |
|
|
|
layout: "prev, pager, next, sizes, jumper,total", |
|
|
|
...this.$attrs, |
|
|
|
small: true, |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
}, |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
if (!this.$refs.ElPaginationRef) return; |
|
|
|
|
|
|
|
const jumpPageDom = this.$refs.ElPaginationRef.$el.querySelector(".el-pagination__jump"); |
|
|
|
const jumpPageDom = this.$refs.ElPaginationRef.$el.querySelector( |
|
|
|
".el-pagination__jump" |
|
|
|
); |
|
|
|
|
|
|
|
if (jumpPageDom?.childNodes?.[0]?.nodeValue) |
|
|
|
jumpPageDom.childNodes[0].nodeValue = "跳至"; |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
}; |
|
|
|
</script> |
|
|
|
|
|
|
|
<style lang='scss' scoped> |
|
|
|
<style lang="scss" scoped> |
|
|
|
.Pagination { |
|
|
|
// color: #fff; |
|
|
|
|
|
|
|
::v-deep { |
|
|
|
|
|
|
|
>button, |
|
|
|
>ul li { |
|
|
|
> button, |
|
|
|
> ul li { |
|
|
|
background: #064258; |
|
|
|
border-radius: 2px 2px 2px 2px; |
|
|
|
opacity: 1; |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
|
|
|
|
>button { |
|
|
|
> button { |
|
|
|
padding: 0 3px; |
|
|
|
border: 1px solid #00B3CC; |
|
|
|
border: 1px solid #00b3cc; |
|
|
|
} |
|
|
|
|
|
|
|
>ul li { |
|
|
|
background: linear-gradient(180deg, #004960 0%, #004B62 100%); |
|
|
|
> ul li { |
|
|
|
background: linear-gradient(180deg, #004960 0%, #004b62 100%); |
|
|
|
margin: 0 1.5px; |
|
|
|
|
|
|
|
&.active { |
|
|
|
background: linear-gradient(180deg, #005C79 0%, #009BCC 100%); |
|
|
|
background: linear-gradient(180deg, #005c79 0%, #009bcc 100%); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.el-pagination__total { |
|
|
|
color: #FFF; |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
|
|
|
|
.el-pagination__sizes { |
|
|
|