首页 > Web开发 > 详细

ZUI(BootStrap)使用vue动态插入HTMl所创建的data-toggle事件初始化方法

时间:2019-11-27 19:34:23      阅读:102      评论:0      收藏:0      [点我收藏+]

用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")
        }

    });

 技术分享图片

 

ZUI(BootStrap)使用vue动态插入HTMl所创建的data-toggle事件初始化方法

原文:https://www.cnblogs.com/timseng/p/11944549.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!