vue3-pagination组件封装

css部分：

.b-pag-box {display: flex;align-items: center;justify-content: flex-start;min-width: 550px;background: #fff;a {display: block;display: flex;align-items: center;justify-content: center;text-decoration: none;user-select: none;}.disabled {color: #9ca6b9;cursor: not-allowed !important;background: #fff;}.b-outside-border {box-sizing: border-box;width: 32px;height: 32px;margin-right: 4px;font-size: 14px;font-weight: 500;line-height: 32px;color: #9ca6b9;text-align: center;cursor: pointer;background: #fff;border: 1px solid #e1e4e8;border-radius: 4px;&:hover {&:not(.disabled) {border: 1px solid #0056ff;}}}.active {color: #fff !important;background: #0056ff !important;}.b-num-out-size-border {position: relative;width: 92px;height: 32px;margin-left: 10px;cursor: pointer;user-select: none;background: #fff;border: 1px solid #e1e4e8;border-radius: 4px;.b-select-dropdown {position: absolute;top: -125px;z-index: 1000;display: flex;flex-direction: column;align-items: center;width: 92px;background: #fff;border-radius: 4px;box-shadow: 0 8px 40px 0 rgb(100 107 122 / 15%);transform-origin: center bottom;&-item {min-width: 84px;height: 32px;margin: 3px 0;font-size: 14px;line-height: 32px;text-align: center;&:hover {width: 84px;height: 32px;background: rgb(0 86 255 / 3%);border-radius: 4px;// opacity: 0.03;}}}&:hover {background: #fff;border: 1px solid #0056ff;}.b-text-page-num {position: absolute;top: 9px;left: 12px;width: 48px;height: 14px;font-size: 14px;font-weight: 400;line-height: 14px;color: #9ca6b9;}.b-page-num-icon {position: absolute;top: 8px;right: 4px;}}
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！