标签：layer demo 按钮 skin class 弹窗

前言

最近在使用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) //关闭弹窗
  },
});

标签：layer,demo,按钮,skin,class,弹窗
来源： https://www.cnblogs.com/tu-0718/p/14876064.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。