zoukankan      html  css  js  c++  java
  • ZUI(BootStrap)使用vue动态插入HTMl所创建的data-toggle事件初始化方法

    用ZUI的图片浏览:lightbox

    写静态html的时候是有预览效果的,使用了vue动态加载就没有效果了,

    网上的说法是动态生成的没有激活事件:ZUI(BootStrap)动态插入HTMl所创建的data-toggle事件初始化方法

    处理方法是:

    $(“.cards”).find(‘.card’).eq(0).find(‘a’).eq(0).lightbox();
    
    popover同理:$(“.cards”).find(‘.card’).eq(0).find(‘a’).eq(0).popover();
    

    这边优化了下:加载完列表时触发lightbox

    watch 下item的加载完成

        var app = new Vue({
            el: '#app',
            data: {
                items: [
                    {"id":1}
                ],
                page: {
                    "index": 1,
                    "total": 0,
                    "pagesize": 2
                }
            },
            methods: {
                indexs:function(){
    
                    axios
                        .get('mock/ajax-form-list.json')
                        .then(response => {
                            // console.log(response);
                            this.items = response.data.result.list
                            this.page = response.data.result.page
                    })
                        .catch(function (error) { // 请求失败处理
                            console.log(error);
                        });
                }
            },
            watch:{
                items: function() {
                    this.$nextTick(function(){
                        /*现在数据已经渲染完毕*/
                        $('img.cardimg').lightbox({
                            caption: '图片说明'
                        });
                        console.log("load completed")
                    })
                }
            },
            created(){
                //自动加载indexs方法
                this.indexs();
                console.log("created completed")
            },
            mounted(){
                console.log("mounted completed")
            }
    
        });
    

     

  • 相关阅读:
    第二次作业
    大学——新生活方式
    第四次作业
    第三次作业
    第二次作业——起航
    梦开始的地方
    第四次作业
    第三次作业
    第二次作业
    博客作业 随笔
  • 原文地址:https://www.cnblogs.com/timseng/p/11944549.html
Copyright © 2011-2022 走看看