Skip to content

Commit e48138a

Browse files
lucienstarlucienstar
committed
feat(LinCmsUi): 增加分页组件及 Badge 标记组件(初始化)
1 parent 8bdbdb0 commit e48138a

4 files changed

Lines changed: 823 additions & 0 deletions

File tree

‎src/assets/styles/realize/element-variables.scss‎

Lines changed: 284 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -820,4 +820,288 @@ $typeMap: (primary:#3963BC,
820820
transform: scale(.7);
821821
}
822822
}
823+
}
824+
825+
/* Pagination 分页 */
826+
@include b(pagination) {
827+
padding: 2px 5px;
828+
color: $--pagination-font-color;
829+
button {
830+
font-size: $--pagination-font-size;
831+
min-width: $--pagination-button-width;
832+
height: $--pagination-button-height;
833+
line-height: $--pagination-button-height;
834+
}
835+
836+
.el-input__inner {
837+
text-align: center;
838+
-moz-appearance: textfield;
839+
line-height: normal;
840+
}
841+
842+
// pagesize 的下拉 icon
843+
.el-input__suffix {
844+
right: 0;
845+
transform: scale(.8);
846+
}
847+
848+
.el-select .el-input {
849+
width: 100px;
850+
margin: 0 5px;
851+
852+
.el-input__inner {
853+
padding-right: 25px;
854+
border-radius: $--pagination-border-radius;
855+
}
856+
}
857+
858+
button {
859+
border: none;
860+
padding: 0 6px;
861+
background: transparent;
862+
863+
&:focus {
864+
outline: none;
865+
}
866+
867+
&:hover {
868+
color: $--pagination-hover-color;
869+
}
870+
871+
&:disabled {
872+
color: $--pagination-button-disabled-color;
873+
background-color: $--pagination-button-disabled-background-color;
874+
cursor: not-allowed;
875+
}
876+
}
877+
878+
.btn-prev,
879+
.btn-next {
880+
background: center center no-repeat;
881+
background-size: 16px;
882+
background-color: $--pagination-background-color;
883+
cursor: pointer;
884+
margin: 0;
885+
color: $--pagination-button-color;
886+
887+
.el-icon {
888+
display: block;
889+
font-size: 12px;
890+
font-weight: bold;
891+
}
892+
}
893+
894+
.btn-prev {
895+
padding-right: 12px;
896+
}
897+
898+
.btn-next {
899+
padding-left: 12px;
900+
}
901+
902+
.el-pager li.disabled {
903+
color: $--color-text-placeholder;
904+
cursor: not-allowed;
905+
}
906+
907+
@include m(small) {
908+
.btn-prev,
909+
.btn-next,
910+
.el-pager li,
911+
.el-pager li.btn-quicknext,
912+
.el-pager li.btn-quickprev,
913+
.el-pager li:last-child {
914+
border-color: transparent;
915+
font-size: 12px;
916+
line-height: 22px;
917+
height: 22px;
918+
min-width: 22px;
919+
}
920+
921+
.arrow.disabled {
922+
visibility: hidden;
923+
}
924+
925+
.more::before,
926+
li.more::before {
927+
line-height: 24px;
928+
}
929+
930+
span:not([class*=suffix]),
931+
button {
932+
height: 22px;
933+
line-height: 22px;
934+
}
935+
936+
@include e(editor) {
937+
height: 22px;
938+
&.el-input .el-input__inner {
939+
height: 22px;
940+
}
941+
}
942+
}
943+
944+
@include e(sizes) {
945+
margin: 0 10px 0 0;
946+
font-weight: normal;
947+
color: $--color-text-regular;
948+
949+
.el-input .el-input__inner {
950+
font-size: $--pagination-font-size;
951+
padding-left: 8px;
952+
953+
&:hover {
954+
border-color: $--pagination-hover-color;
955+
}
956+
}
957+
}
958+
959+
@include e(total) {
960+
margin-right: 10px;
961+
font-weight: normal;
962+
color: $--color-text-regular;
963+
}
964+
965+
@include e(jump) {
966+
margin-left: 24px;
967+
font-weight: normal;
968+
color: $--color-text-regular;
969+
970+
.el-input__inner {
971+
padding: 0 3px;
972+
}
973+
}
974+
975+
@include e(rightwrapper) {
976+
float: right;
977+
}
978+
979+
@include e(editor) {
980+
line-height: 18px;
981+
padding: 0 2px;
982+
height: $--pagination-button-height;
983+
984+
text-align: center;
985+
margin: 0 2px;
986+
box-sizing: border-box;
987+
border-radius: $--pagination-border-radius;
988+
989+
&.el-input {
990+
width: 50px;
991+
}
992+
993+
&.el-input .el-input__inner {
994+
height: $--pagination-button-height;
995+
}
996+
997+
.el-input__inner::-webkit-inner-spin-button,
998+
.el-input__inner::-webkit-outer-spin-button {
999+
-webkit-appearance: none;
1000+
margin: 0;
1001+
}
1002+
}
1003+
1004+
@include when(background) {
1005+
.btn-prev,
1006+
.btn-next,
1007+
.el-pager li {
1008+
margin: 0 5px;
1009+
background-color: $--color-info-lighter;
1010+
color: $--color-text-regular;
1011+
min-width: 30px;
1012+
border-radius: 2px;
1013+
1014+
&.disabled {
1015+
color: $--color-text-placeholder;
1016+
}
1017+
}
1018+
1019+
.btn-prev, .btn-next {
1020+
padding: 0;
1021+
1022+
&:disabled {
1023+
color: $--color-text-placeholder;
1024+
}
1025+
}
1026+
1027+
.el-pager li:not(.disabled) {
1028+
&:hover {
1029+
color: $--pagination-hover-color;
1030+
}
1031+
1032+
&.active {
1033+
background-color: $--color-primary;
1034+
color: $--color-white;
1035+
}
1036+
}
1037+
1038+
&.el-pagination--small {
1039+
.btn-prev,
1040+
.btn-next,
1041+
.el-pager li {
1042+
margin: 0 3px;
1043+
min-width: 22px;
1044+
}
1045+
}
1046+
}
1047+
}
1048+
1049+
@include b(pager) {
1050+
user-select: none;
1051+
list-style: none;
1052+
display: inline-block;
1053+
vertical-align: top;
1054+
font-size: 0;
1055+
padding: 0;
1056+
margin: 0;
1057+
1058+
.more::before {
1059+
line-height: 30px;
1060+
}
1061+
1062+
li {
1063+
padding: 0 4px;
1064+
background: $--pagination-background-color;
1065+
vertical-align: top;
1066+
display: inline-block;
1067+
font-size: $--pagination-font-size;
1068+
min-width: $--pagination-button-width;
1069+
height: $--pagination-button-height;
1070+
line-height: $--pagination-button-height;
1071+
cursor: pointer;
1072+
box-sizing: border-box;
1073+
text-align: center;
1074+
margin: 0;
1075+
1076+
&.btn-quicknext,
1077+
&.btn-quickprev {
1078+
line-height: 28px;
1079+
color: $--pagination-button-color;
1080+
1081+
&.disabled {
1082+
color: $--color-text-placeholder;
1083+
}
1084+
}
1085+
1086+
&.btn-quickprev:hover {
1087+
cursor: pointer;
1088+
}
1089+
1090+
&.btn-quicknext:hover {
1091+
cursor: pointer;
1092+
}
1093+
1094+
&.active + li {
1095+
border-left: 0;
1096+
}
1097+
1098+
&:hover {
1099+
color: $--pagination-hover-color;
1100+
}
1101+
1102+
&.active {
1103+
color: $--pagination-hover-color;
1104+
cursor: default;
1105+
}
1106+
}
8231107
}

‎src/plugins/LinCmsUi/stage-config.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -162,6 +162,26 @@ const LinCmsUiRouter = {
162162
icon: 'iconfont icon-jiemiansheji',
163163
right: null,
164164
},
165+
{
166+
title: 'Pagination 分页',
167+
type: 'view',
168+
name: null,
169+
route: '/lin-cms-ui/pagination',
170+
filePath: 'plugins/LinCmsUi/views/pagination/Pagination.vue',
171+
inNav: true,
172+
icon: 'iconfont icon-jiemiansheji',
173+
right: null,
174+
},
175+
{
176+
title: 'Badge 标记',
177+
type: 'view',
178+
name: null,
179+
route: '/lin-cms-ui/badge',
180+
filePath: 'plugins/LinCmsUi/views/badge/Badge.vue',
181+
inNav: true,
182+
icon: 'iconfont icon-jiemiansheji',
183+
right: null,
184+
},
165185
],
166186
}
167187

0 commit comments

Comments
 (0)