• Element分页组件prev-text和next-text属性无效?


      前情提要 /(ㄒoㄒ)/~~

      作为刚刚接触 Element 组件的人来说,看文档是第一步,但是当我想要修改分页组件里面的按钮时却遇到了问题。

      

      文档中写到是需要给 prev-text 和 next-text 属性就可以将下图中划红线的小箭头修改成想要的文字,比如“上一页”和“下一页”。

      于是我试了两种方式去使用这两个属性,都没有成功,分页组件“一动不动”,简直就是黑人问号脸!

    //第一种方法无效
    <div class="block">
        <el-pagination
            layout="prev, pager, next"
            :total="200"
            prev-text="上一页"
            prev-text="下一页">
        </el-pagination>
    </div>
    
    //第二种方法也无效
    <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:"上一页", nex:"下一页" } } } }
    </script>

      怎么解决!?在网上搜了很久,但大家的问题都是如何修改组件中文字的颜色或字号,几乎没有使用 prev-text 和 next-text 属性的,难道……大家都没有这个需求吗!?好可怕,那就只能自己研究了,期间还异想天开的去搜索CSS可不可以改变文字内容?

      从另一个角度来看,答案当然是可以的!就是从伪类的角度入手,也就是我要说的解决方法。

      我们都知道CSS中的伪类是有 content 的,content中的内容就是伪类要显示的文字或字符串内容,如果用不到我们可以设置为空字符串,那么上面的问题就只需要将“上一页”写在其组件中类名为“btn-pre”的 before 伪类中,那么问题就可以解决了,至于小箭头怎么办? display:none掉就好了。

    .btn-prev:before{
        content: "上一页";
    }
    .btn-next:before{
        content: "下一页";
    }

      以上方法是我目前想到的解决办法,如果还有其他更好的方法,或者文中我有哪些不对和还有待改善的地方希望朋友们指正,我们一起学习进步~~!

      希望对大家有所帮助!

  • 相关阅读:
    Assignment 1-3 :Pattern Recognition
    GDB Guide
    Java 进阶
    Lab 4: Cache Geometries
    Buffer Overflows Lab
    二进制炸弹Lab
    Assignment 1-2 :Randomized Queues
    Assignment 1 :Percolation
    CSAPP Chapter 2
    在win7下用U盘安装Ubuntu,实现双系统
  • 原文地址:https://www.cnblogs.com/zheng577564429/p/7793325.html
Copyright © 2020-2023  润新知