1,官方樣式:
查了網上,有人說可以用slot插槽,但是試過之后,因為 不能插入多個 slot(沒法定義名字做區分),所以導致左右按鈕一樣了。。
2,還有種方法:
利用
prev-text 和 next-text 設置文字,替代圖標顯示的上下頁
3,最終解決辦法:
從根部改變按鈕所用 icon 圖標的content, 隨意改成你想要的圖標,就可以了。(不過還是只能用 elm本身的icon。)
附上代碼:
.btn-prev { margin-left: 0; margin-right: 5px; .el-icon-arrow-left:before { content: "\e6ea"; } } .btn-next { margin-left: 5px; margin-right: 0; .el-icon-arrow-right:before { content: "\e6e9"; } }
最終效果:
另外寫一下 相關的自定義樣式 (active, hover 時)
.btn-next.disabled, .btn-next:disabled, .btn-prev.disabled, .btn-prev:disabled, .el-pager li.disabled { opacity: 0.5; cursor: default; pointer-events: none; } .el-pager { .active { background-color: #ff7d00 !important; color: #fff; } li:not(.active):hover { color: #ff7d00 !important; } }