layui 弹出框确定按钮yes回调多次触发问题如何处理?

讨论 未结 2 96
三花聚顶社区
悬赏:20飞吻
layui弹出框按钮,在弹窗为关闭之前,多次点击确定按钮,会触发多次yes回调,有什么通用的办法处理一下呢
回帖
  • 难得920
    2019-10-9
    0 回复
  • IDyun
    2019-10-9
    按钮倒计时显示

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>layui在线调试</title>
    <link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css?t=1568076536509" media="all">
    <style>
    body{margin: 10px;}
    .demo-carousel{height: 200px; line-height: 200px; text-align: center;}
    </style>
    </head>
    <body>

    <script src="//res.layui.com/layui/dist/layui.js?t=1568076536509"></script>
    <script>
    layui.config({
    version: '1568076536509' //为了更新 js 缓存,可忽略
    });

    layui.use(['laydate', 'layer', 'util'], function () {
    var laydate = layui.laydate //日期
    ,
    layer = layui.layer //弹层
    ,
    util = layui.util //

    var $ = layui.$;

    layer.open({
    type: 2 //此处以iframe举例
    ,
    title: '当你选择该窗体时,即会在最顶端',
    area: ['390px', '260px'],
    shade: 0,
    maxmin: true,
    offset: [ //为了演示,随机坐标
    Math.random() * ($(window).height() - 300), Math.random() * ($(window).width() - 390)
    ],
    content: '//layer.layui.com/test/settop.html',
    btn: ['继续弹出'] //只是为了演示
    ,
    yes: function (index, layero) {
    var btn = layero.find('.layui-layer-btn'),
    btn_yes = btn.find('.layui-layer-btn0'),
    text = btn_yes.text(),
    isDisable = btn_yes.hasClass('layui-btn-disabled');
    //判断是否已经点击了
    if (isDisable) {
    return false;
    }
    btn_yes.addClass('layui-btn-disabled');
    //结束日期
    var endTime = new Date(new Date().getTime() + (time * 1000));
    setCountdown(endTime, function (endTime, serverTime, date, serverTime, timer) {
    var str = text;
    //等于0秒时
    if (0 == date[3]) {
    btn_yes.removeClass('layui-btn-disabled');
    } else {
    str += '(' + date[3] + '秒)';
    }
    btn_yes.html(str);
    });
    }
    });


    //倒计时
    //time 多少秒后关闭
    var thisTimer, time = 3,
    setCountdown = function (endTime, callBack) {
    var serverTime = new Date(); //假设为当前服务器时间,这里采用的是本地时间,实际使用一般是取服务端的
    clearTimeout(thisTimer);
    util.countdown(endTime, serverTime, function (date, serverTime, timer) {
    callBack(endTime, serverTime, date, serverTime, timer);
    thisTimer = timer;
    });
    };

    });
    </script>
    </body>
    </html>
    https://www.layui.com/demo/util.html
    0 回复