The prev-text and mext-text attributes of Element UI paging components are invalid ?, Prev-textmext-text

The prev-text and mext-text attributes of Element UI paging components are invalid ?, Prev-textmext-text

Prerequisites/(ㄒ o activities )/~~

As the person who just came into contact with the Element component, reading the document is the first step, but when I want to modify the buttons in the paging component, I encountered a problem.

　　

In this document, you need to set the prev-text and next-text attributes to change the small arrow that draws the red line to the desired text, such as "previous" and "next ".

So I tried two ways to use these two attributes, but none of them succeeded. The paging component was "Motionless" and it was simply a black question mark!

// The first method is invalid. <div class = "block"> <el-pagination layout = "prev, pager, next ": total = "200" prev-text = "Previous Page" prev-text = "next page"> </el-pagination> </div> // The second method is invalid. <div class = "block"> <el-pagination layout = "prev, pager, next ": total =" 200 ": prev-text =" changePage. pre ": prev-text =" changePage. nex "> </el-pagination> </div>
:
<Script> export default {data () {return {changePage: {pre: "Previous Page", nex: "Next page "}}}}
</Script>

How can this problem be solved !? I have searched the internet for a long time, but the question is how to modify the color or font size of the text in the component. I hardly use the prev-text and next-text attributes. Isn't it ...... Don't everyone have this requirement !? It's terrible, so I can only study it myself. Can I change the text content if I want to search CSS in a whimsical manner?

From another perspective, the answer is certainly yes! This is the solution from the perspective of pseudo classes.

We all know that the pseudo classes in CSS have content, and the content in the content is the text or string content to be displayed by the pseudo class. If not, we can set it as a null string, then the above problem only needs to write the previous page in the before pseudo class named "btn-pre" in its component. Then the problem can be solved. What should we do with the small arrow? Display: none.

. Btn-prev: before {content: "Previous Page";}. btn-next: before {content: "next page ";}

 

The above method is the solution that I have come up with. If there are other better methods, or if I have any mistakes in the text and want to be improved, I hope my friends can correct them. Let's study and make progress together ~~!

Hope to help you!