你向数组中push了一段html代码，格式是字符串的，类似如下面这样
|
1 |
this.msgList.push(`<img src="${res.data.data.url}" />`) |
在template中你是这样显示的：
|
1 2 3 |
<ul class="msg-list" ref="msglist"> <li v-for="(item, index) in msgList" :key="index" v-html="item"></li> </ul> |
现在要求img点击可以预览图片。咱们暂且不考虑预览图片怎么做，先考虑一下点击事件如何被触发？
……….
……….
静静思考几秒
……….
………
有人说给图片添加onclick原生事件，没错，可以触发事件了，那有没有另外的方法，
这里有一个简单的，开始改写代码：
|
1 2 3 4 |
<!--1:给父元素添加点击事件getNodeImg--> <ul class="msg-list" ref="msglist"> <li v-for="(item, index) in msgList" :key="index" v-html="item" @click="getNodeImg"> </li> </ul> |
|
1 2 3 4 5 6 7 8 |
method: { // 获取点击节点 getNodeImg (e) { if (e.target.nodeName === 'IMG') { console.log('img点击事件被触发') } } } |
这样就行了，img的属性可以详细打印e元素看看
