V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
lixyz
V2EX  ›  前端开发

layer.photos 点击预览图在弹出前,能不能做一个判断?

  •  
  •   lixyz · 2021-09-25 00:00:17 +08:00 · 606 次点击
    这是一个创建于 916 天前的主题,其中的信息可能已经有所发展或是发生改变。

    一直以来做移动端开发,最近自己搞了个小玩意儿,试着写了下 web 端的东西,一脸懵逼

    需求是一个类似于相册的东西,网格展示图片的缩略图,正常状态下,点击缩略图会弹出大图,在编辑状态下,点击图片不弹出,而是 checkbox 选中 /取消。

    大致代码如下

    <div id="layer-photos-demo" class="layer-photos-demo">
        <th:block th:each="image,pro : ${image}">
            <div class="item_container">
                <img th:class="image"
                     th:layer-pid="${image.objectId}"
                     th:layer-src="@{'https://www.xxxxxxx.top:1443/'+ ${categoryName}+'/cover/' + ${image.coverFileName}}"
                     th:src="@{'https://www.xxxxxxx.top:1443/'+ ${categoryName}+'/thumbnail/' + ${image.thumbnailFileName}}"
                     th:alt="${image.originalFileName}"
                     th:onclick="showImage([[${pro}]],[[${image}]])">
                <input id="check-box" class="check-box" type="checkbox" name="checkbox" lay-skin="primary" title="写作"
                       style="display: none">
            </div>
        </th:block>
    </div>
    
        let editable = false;
    
        function showImage(pro, image) {
            console.log(editable);
            if (editable) {
                let checkBox = document.getElementsByClassName("check-box")
                $(checkBox[pro.index]).prop("checked", !$(checkBox[pro.index]).prop("checked"));//正确选中
                let form = layui.form;
                form.render("checkbox");
            } else {
                // 调用示例
                layer.photos({
                    photos: '#layer-photos-demo'
                    , anim: 5 //0-6 的选择,指定弹出图片动画类型,默认随机(请注意,3.0 之前的版本用 shift 参数)
                });
            }
        }
    

    现在遇到的情况是,即使是在编辑情况下( editable = true )的时候,点击缩略图,依旧会弹出大图,有没有大神给讲讲到底是啥原因啊。

    或者说类似功能,有没有其他 UI 框架推荐?感谢感谢

    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2809 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 14:50 · PVG 22:50 · LAX 07:50 · JFK 10:50
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.