laypage的文字通过初始化参数prev、next、skip或全局laypage.set()配置修改;v2.6+默认中文,不支持直接改源码或CSS覆盖文案,layout中count/limit/refresh等模块的文案不可单独配置。
laypage 的文字在哪改?直接改 laypage 初始化时的 prev、next、skip 等配置项
laypage 默认是中文,但如果你看到英文(比如 “prev” “next”),大概率是你用的是旧版(v2.0 之前)或手动引入了未汉化的精简版。新版 laypage(v2.6+)默认全中文,但所有文字都支持运行时覆盖——不是改源码,也不是改 css,而是初始化时传对象参数。
常见错误现象:调了 laypage.render() 却还是英文,或者跳转按钮显示 “Go”,其实是漏写了 skip 或写成了 jump 这类错名。
-
prev:上一页文字,可设为"上一页"、"←",甚至空字符串"" -
next:下一页文字,同理,别写成nextText(这是老版本写法,v2.6+ 已废弃) -
skip:跳转文本,即 “到第 __ 页”,注意它后面会自动拼数字和 “页” 字,所以值只需填"到第",不是"到第{}页" -
limits和limit不影响文字,但若你改了每页条数选项(如[10,20,50]),配套的 “每页显示” 文字在layout数组里控制,不是靠配置项
示例:
laypage.render({
elem: 'demo',
count: 100,
prev: '上一页',
next: '下一页',
skip: '跳至',
layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
});
layout 数组里哪些项会触发文字渲染?count、limit、refresh 都有默认文案
layout 不只是控制按钮排列,它也决定哪些带文字的模块被启用。每个字符串对应一个 UI 区块,其中部分区块自带文案,且这些文案**不能通过独立配置项修改**,只能靠替换整个模块的 HTML 模板(不推荐)或提前覆盖 laypage 内部语言包(更稳妥)。
容易踩的坑:以为 limit 的 “每页” 文字能像 prev 一样直接配,其实不能;还有人把 refresh 写成 reload,导致刷新按钮不显示。
-
count显示 “共 100 条”,文案固定,不可配 -
limit显示 “每页” + 下拉框,其中 “每页” 二字不可单独改,但可通过limits数组间接影响(例如写成['10 条', '20 条'],下拉选项就带单位) -
refresh显示 “刷新”,不可配;如果想改成 “重载”,得用theme+ 自定义 CSS 覆盖文字(见下一条) -
skip在 layout 里只控制是否显示跳转框,真正改文字还得靠上面说的skip配置项
想彻底换语言或加繁体字?改 laypage.set() 全局语言包
如果你项目里多处用 laypage,又想统一用繁体、英文或自定义术语(比如把 “页” 改成 “頁”),别每个 render() 都重复配,用 laypage.set() 一次性注入全局语言包。
注意:这个方法只对 v2.5.6+ 有效;低于此版本不支持,强行调用会报 laypage.set is not a function。
- 必须在任何
laypage.render()之前调用,否则无效 - 语言包是纯对象,键名固定:
prev、next、skip、more(更多页省略号提示)、jump(已废弃,不用管) - 没列出来的文字(如 “每页”、“共”、“条”)仍无法覆盖,这是 laypage 的设计限制
示例(繁体):
laypage.set({
prev: '上一頁',
next: '下一頁',
skip: '跳至',
more: '更多頁'
});
// 后续所有 render() 都自动应用该配置
CSS 覆盖文字?能但不推荐,除非只改个别字且不想动 JS 配置
有些场景,比如运营后台要求把 “刷新” 按钮强制改成 “重新加载”,又不想改 JS 层逻辑,可以走 CSS 伪元素方案。但要注意:这属于 hack,依赖 DOM 结构稳定,laypage 升级后可能失效。
关键点:laypage 的按钮文字基本都是 <button> 或 <a> 的 innerText,没法用 ::before 直接替换,得先清空再塞新内容。
- 给容器加唯一 class,比如
class="my-laypage",避免污染其他分页 - 用
button[lay-type="refresh"]::after插入文字,同时用button[lay-type="refresh"]::before把原文字隐藏(靠visibility: hidden,不是display: none,否则布局会乱) - 不要用
content: "重新加载" !important直接覆盖,因为原生文字还在,会叠在一起;得配合position: relative和负top微调 - 移动端点击区域变小,记得补
padding和min-width
这事做起来费劲,还容易和主题色、图标冲突,真要频繁定制文字,老老实实用 set() 或初始化参数。
skip 的语义——它只负责“跳至”那两个字,后面的输入框和“页”字是组件自己拼的,改错了位置,整个跳转就废了。


















