uniapp显示富文本,<view v-html="goodsDetail.htmlRemark" @click="imageChagange($event)"></view>,判断点击的是否是图片,如果是获取图片的路径
时间: 2024-11-15 19:29:46 浏览: 2
mi-shop:小米手机商城
uniapp中的`v-html`指令用于将HTML字符串渲染到页面上,这里你在`<view>`标签内设置了动态的HTML内容`goodsDetail.htmlRemark`,并绑定了一个点击事件`@click=imageChagange($event)`。如果想判断点击的是图片,并获取图片的路径,你需要在`imageChagange`方法内部做处理。
首先,你需要解析这个`htmlRemark`,找出所有的img标签,然后监听每个图片元素的`tap`或`click`事件。当点击事件触发时,你可以检查当前点击元素是否为`img`元素,如果是,则可以读取其`src`属性获取图片路径。
下面是一个简单的示例代码:
```javascript
methods: {
imageChagange(e) {
const target = e.target || e.srcElement; // 获取点击的目标元素
if (target.tagName.toLowerCase() === 'img') { // 判断是否是图片
const imgPath = target.getAttribute('src'); // 如果是,获取图片路径
console.log('点击的图片路径:', imgPath); // 打印路径
// 根据需要在这里做其他操作,比如保存图片等
}
}
}
```
请注意,这只是一个基础示例,实际应用中可能还需要处理更复杂的情况,如处理`data-src`或其他动态加载的图片。同时,为了安全起见,在生产环境中应该避免直接使用`v-html`,因为它可能会引入XSS攻击的风险。
阅读全文