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