直接修改 btn 数组首项即可更换「确定」文字,无需改动 css、html 或源码;btn 是字符串数组,顺序固定,长度须 ≥2,且需为每个按钮提供带 index 参数的回调并调用 layer.close(index)。

直接改 btn 数组第一个元素就能换「确定」文字
不需要动 CSS、不写额外 HTML、也不用重写 layer 源码。layer.confirm 的按钮文案完全由 btn 配置项控制,它是个字符串数组,顺序固定:第一个是「确定」,第二个是「取消」,第三个起依次往后排。默认值是 ['确定', '取消'],所以想把「确定」改成「提交」,就传 btn: ['提交', '取消']。
注意点:
-
btn数组长度必须 ≥2,否则「取消」按钮会消失,且右上角 × 点击后不会触发cancel回调 - 支持 HTML 字符串,比如
btn: ['<i class="layui-icon"></i> 删除', '算了'],但别拼接用户输入,防 XSS - 如果项目里大量使用中文「确定/取消」,建议全局统一配一次,避免每个地方都重复写
三个按钮时,btn 和回调函数必须严格配对
加第三个按钮不是只改 btn: ['是', '否', '取消'] 就完事。Layui 会按顺序把第一个按钮映射到 yes(或第一个匿名函数),第二个到 btn2,第三个到 btn3。漏掉任意一个回调,对应按钮点击后完全没反应,控制台也不报错,极难排查。
正确写法示例:
layer.confirm('确认删除?', {
btn: ['删除', '保留', '稍后再定']
}, function(index) { // yes → 删除
doDelete();
layer.close(index);
}, function(index) { // btn2 → 保留
layer.close(index);
}, function(index) { // btn3 → 稍后再定
layer.close(index);
});
关键提醒:
- 每个回调都必须接收
index参数,并显式调用layer.close(index),否则弹窗残留 -
cancel回调只响应右上角 ×,和第三个按钮无关,别混用 - 命名回调(
yes、btn2、btn3)比依赖函数顺序更安全,不易漏写
全站统一改默认按钮文字,用 layer.config
如果整个项目要切英文、或统一用业务化文案(如「确认操作」「暂不处理」),别在每个 layer.confirm 里手动写 btn。直接在入口 JS 里调一次 layer.config({btn: ['OK', 'Cancel']}),后续所有带按钮的弹层(layer.alert、layer.confirm、layer.open)都会继承这个配置。
注意事项:
- 已显式传了
btn的弹层,优先级高于全局配置,不受影响 - Layui 官方 i18n 支持弱,
layer.config是最稳的覆盖方式 - 文案改了,但回调里的
console.log或注释没同步更新,过两个月自己都忘了「继续」到底代表保存还是跳过——建议文案和日志保持一致
按钮文字改了,但点击没反应?先查这三处
常见静默失败场景,不是样式问题,而是逻辑断链:
- 写了
btn: ['提交', '取消', '重试'],但只提供了两个回调函数 → 第三个按钮点不动 - 回调函数写成
function() { },漏了index参数 →layer.close()关错层甚至报错 - 异步操作里忘了手动关弹窗,比如
axios.post().then(() => layer.close(index))没写,或者失败分支没处理,导致弹窗一直挂着
最易被忽略的是:改了按钮文字后,没检查对应回调是否还匹配业务意图。「我已知晓」按钮点下去该关窗还是该跳转?这个语义一致性得人工对齐,layer 不会帮你校验。











