用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事件初始化方法的更多相关文章

  1. 【Html】Vue动态插入组件

    html: <div id="app"> <p>{{ message }}</p> <button @click="add('a ...

  2. vue 动态插入组件

    HTML代码: <div id="app"> <p>{{ message }}</p> <button @click="add( ...

  3. XML 动态 插入 父类标示 子类标示

    由于第一次写博客,写的不好的地方,还请各位大神多多指点, 讲解一下:xml动态插入数据并保存,写这个时候费了我不少劲,最后终于皇天不负有心人让我搞出来了,特意分享给大家,写的不完美的地方还请大家多多指 ...

  4. JavaScript 动态插入 CSS

    写组件时有时想把一些组件特性相关的 CSS 样式封装在 JS 里,这样更内聚,改起来方便.JS 动态插入 CSS 两个步骤就可以 创建一个 style 对象 使用 stylesheet 的 inser ...

  5. FMDB处理动态插入语句

    昨天做一个需求,参数的数量不确定,所以无法使用这个API: - (BOOL)executeUpdate:(NSString*)sql, ... 但是用 - (BOOL)executeUpdate:(N ...

  6. Sql [hierarchyid]类型如何动态插入层级数据

    [hierarchyid] 是个不错的数据类型,能够方便的操作树型结构,网上找了很多资料没找到如何做到动态插入节点的例子,只好从MSDN认真看了下资料写出了一个DEMO CREATE TABLE Em ...

  7. jquery动态插入行

    这是一个利用jquery动态插入输入内容的代码. html代码: <div title="分表2" class="ui-edit" style=" ...

  8. jquery动态插入行,不用拼写html,简洁版

    这个一个利用jquery实现动态插入输入行效果小功能,不用在javascript里拼写html字符串,更简洁.高效. html代码: <div class="fitem"&g ...

  9. 动态插入图片到 svg 中

    动态插入图片到 svg 中使用 createElementNS 来创建svg标签,通过setAttributeNS 来设置属性, 要注意两点,创建的时候要有'http://www.w3.org/200 ...

随机推荐

  1. 【算法题目】Leetcode算法题思路:两数相加

    在LeetCode上刷了一题比较基础的算法题,一开始也能解出来,不过在解题过程中用了比较多的if判断,看起来代码比较差,经过思考和改进把原来的算法优化了. 题目: 给出两个 非空 的链表用来表示两个非 ...

  2. PHP mysqli_change_user() 函数

    改变指定数据库连接的用户: <?php $con=mysqli_connect("localhost","my_user","my_passwo ...

  3. luogu 3998 [SHOI2013]发微博 map

    考试的时候被卡常了~ code: #include <bits/stdc++.h> #define ll long long #define N 200002 #define setIO( ...

  4. Java面向对象4(P~U)

    P    3-1 Point类的构造函数 (SDUT 2670) import java.util.Arrays; import java.util.Scanner; public class Mai ...

  5. java集合类-Set接口

    Set集合 Set集合中的对象不按特定的方式排序,只是简单的把对象放入集合中,但是不能包含重复对象. Set集合由Set接口和Set接口的实现类组成,Set接口继承与于Collection接口 Set ...

  6. 1.1 OC class new summary

    1.http://www.cnblogs.com/mjios/archive/2013/04/06/3002814.html 2.How to create a oc class? 3. 3.1 In ...

  7. spring相关知识点易错

    1.spring不支持静态变量注入,即不能再static变量上面加@Resoure 要是想注入的话就用set方法注入 private static ComboPooledDataSource pool ...

  8. 十一、FHS基础原理

      文件系统: http://note.youdao.com/noteshare?id=298f02714da5b9483429a40dda667f35&sub=6120396419BA477 ...

  9. while 循环 continue break 用法例子

    py2 temp = "理解" # utf- 8 #解码, 需要指定原来的是什么编码 temp_unicode = temp.decode("utf-8") # ...

  10. java -cp 用法介绍

    java -cp 和 -classpath 一样,是指定类运行所依赖其他类的路径,通常是类库,jar包之类,需要全路径到jar包,window上分号“;” 分隔,linux上是分号“:”分隔.不支持通 ...