前言

最近在使用layer彈窗元件時遇到了一個小需求，需要修改彈窗按鈕的樣式，

比如把確定按鈕藍色背景改為黑色，字型顏色改為白色

修改彈窗按鈕樣式

起初我查閱了一下官方文件，並沒有看到可直接修改按鈕樣式的配置，後來百度時發現自己疏忽了一些細節，

原來官網是有告知解決方法的，可直接通過layer.confirm和layer.open2種方式，配置該選項 skin: 'demo-class'即可

layer.open({
  skin: 'demo-class' //該類可自定義類名
});

layer.confirm('自定義內容', {
skin: 'demo-class', //該類可自定義類名
 

}, function (index) {
// doSomething
}

然後在給demo-class新增要修改的樣式，記得在類名前面加上body字首提高權重

body .demo-class .layui-layer-btn0 {
    color: #fff;
    background-color: #000;
}

詳見官方文件：https://layer.layui.com/skin.html#publish

修改彈窗按鈕提示文字修改

現在需求又變了，需要把按鈕提示文字換成英文的，應該怎麼做呢？

官網沒有直接給出來，藏得有點深，後來我是在layer官網的某個示例中發現的

layer.confirm('Do you want to delete？', {
  skin: 
 
'demo-class', //自定義類名
  title: 'tips',
  btn: ['sure', 'cancel'] //修改按鈕文字
  }, function (index) {
// doSomething
  layer.close(index); //關閉彈窗
}

layer.open({
  skin: 'demo-class',
  content: 'Do you want to delete？',
  btn: ["sure", "cancel"],  //修改按鈕文字
  yes: function (index) {
    layer.close(index) //關閉彈窗
  },
});