v-html渲染给图片添加点击事件

最新推荐文章于 2024-04-11 23:15:35 发布
最新推荐文章于 2024-04-11 23:15:35 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： js 文章标签： javascript vue.js node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43059898/article/details/120121120
版权 
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
    <div id="app">
        <!-- v-html渲染 -->
        <div v-html="message" id="message" ref="content" @click="imageEnlargement"></div>
        <!-- 图片弹框 -->
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                message: `<p>11111</p><div>222</div><img src="./图片/E82UDD)66W4D7$FQ70{N910.jpg" />,<img src="./图片/E82UDD)66W4D7$FQ70{N910.jpg" /><p>333</p>`,
                dialogImageUrl: '',
                dialogVisible: false
            }
        },
        created() {},
        methods: {
            imageEnlargement(e) {
                if (e.target.nodeName == 'IMG') { //判断点击富文本内容为img图片
                    console.log(e.target.currentSrc)

                    this.dialogImageUrl = e.target.currentSrc;
                    this.dialogVisible = true;
                } else {
                    console.log("点击内容不为img")
                }
            },

        },
    })
</script>

</html>
今晚来我家吗
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
html页面图片可点击事件,html中如何给图片添加点击事件的详解
weixin_35448391的博客
06-03 6402
首先使用jQuery选择器获取到想要绑定click事件的img元素，然后可以直接绑定click方法，也可以通过bind方法绑定。这里详细介绍一下bind方法。jQuery 事件 - bind() 方法 —— 定义和用法bind() 方法为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。jQuery 事件 - bind() 方法 ——将事件和函数绑定到元素规定向被选元素添加的一个或多...
解决vue的 v-for 循环中图片加载路径问题
10-18
在这种情况下，我们通常会将图片的路径和名称作为数据返回给前端，然后通过`v-for`循环展示这些图片。 例如，数据结构如下： ```javascript [ { CnName: '荷花', EnName: 'lotus' }, { CnName: '康乃馨', EnName...
vue渲染数据时，v-html中的图片如何点击放大 以及 markdowm数据中的图片点击如何放大
時間的博客
08-07 495
vue渲染数据时，v-html中的图片如何点击放大 以及 markdowm数据中的图片点击如何放大
如何动态渲染HTML内容？用v-html！
最新发布
你若盛开，清风自来
04-11 1408
本文将介绍Vue中的v-html指令，以及它在动态渲染HTML内容中的应用。Vue中的v-html指令是动态渲染HTML内容的关键，但使用时需要注意安全性。了解v-html的使用方法和注意事项对于Vue开发者来说至关重要。
v-html解析出的图片添加点击事件，并获取图片url
c_qianxia5040的博客
11-19 1480
实现效果：点击解析出的图片并预览，通过event获取事件，event获取事件，event获取事件，event.target.currentSrc为base64的图片地址 <div @click="previewImg($event)" v-html="item.answerBody"></div> <Modal v-model="isShowImg" title="预览图片"> <img :src="currImgUrl" alt="" style="
v-html 处理图片自适应以及点击图片预览 图片 （vant的组件IMagePreview）
qq_37672347的博客
01-17 4104
handleHtml($event) 利用冒泡事件实现的 设置 深度选择器设置 img 最大宽度100% 写的公共预览图片的方法 通过import 导入 写的公共预览图片的方法
vue v-html新增点击图片放大预览功能组件
lihefei_coder的博客
04-15 1163
封装组件 PicturePreview <template> <div v-if="visible" class="preview-container" @click.stop="previewClick($event)"> <span class="preview-close" @click.stop="closeClick"></span> <img class="preview-img" :src="src"
VUE解决 v-html不能触发点击事件的问题
10-16
在Vue.js开发过程中，有时候会遇到一个问题，即使用`v-html`指令插入动态HTML内容时，这些内容中的事件监听器（如点击事件）无法正常触发。这是因为Vue.js的模板编译机制不处理`v-html`插入的纯HTML字符串，它们被视...
vue v-for 点击当前行,获取当前行数据及event当前事件对象的操作
10-14
在Vue.js中，`v-for`指令用于循环渲染列表数据，而通过添加点击事件，我们可以实现用户交互，例如点击某一行获取该行的数据。本文将详细介绍如何在Vue中使用`v-for`结合点击事件来获取当前行的数据以及事件对象。 ...
详解三种方式解决vue中v-html元素中标签样式
12-29
Vue为v-html中标签添加CSS样式 <h2 class=title>{{news.title}} <p class=news-time>{{news.datetime}} <div class=con v-html=news.dec> <button class=back @click=goBack...当我们使用v-html渲染页面
uni-app小程序图片v-html自适应问题
tsang荒男的博客
01-20 2561
自适应前言解决办法效果展示补充 前言 用v-html渲染富文本框，发现小程序图片没有办法自适应 采用css去修改，发现不生效 img{ width: 750upx!important; } 解决办法 uni的v-html转换成小程序是rich-text标签，则我们直接使用rich-text来实现富文本的渲染 <rich-text :nodes="details.newsConten | filtersRichText"></rich-text> 我们使用过滤器来把img的标签拿
vue3 v-html点击事件
前端小白成长记
02-22 1618
vue3 v-html点击事件
vue 中拼接html时添加点击事件
热门推荐
wzwzwz555的博客
09-24 6万+
在vue 的html拼接在添加点击事件用原生的onclick来触发事件，将事件挂在window上 <template> <div> <el-button @click="hahha"> 添加 </el-button> <div style="height:500px;width:1000px;...
iView表格（table）渲染（render)
猿飞梦的博客
04-22 4940
零、render 1、语法 以下分别定义了：标签名称，（样式，事件等综合内容），显示内容 render: (h, params) => { return h('span', { style: { color: '#FF7D41' }, on:...
html怎么自动点击按钮事件,html5中如何通过点击按钮 自动填写表单
weixin_42523718的博客
05-30 490
不负相思意可以写一个为表单内元素赋值的方法，三个按钮上面添加点击事件，点击时调用这个赋值方法，但是传的参数不一样，在方法中根据不同的参数，为表单赋不同模板的值。不知上面是否写的清楚，我写了一个对应的小demo：demo    function demo(demo){        if(demo ==1){    &n...
html 给图片添加点击事件吗,如何给图片加click事件 jquery代码
weixin_36185593的博客
06-05 2350
湖上湖给图片一个Id$("#图片ID").click(function(){alert("aa”);});或者$("#图片ID").bind("click",function(){alert("aa");});扩展资料：JQuery中的click方法详解click方法(jquery中的)作用是触发onclick事件，只要执行了元素的click()方法，就会触发onclick事件。click()方法...
HTML中在a标签中添加onclick事件
EmotionComputer
08-21 7806
链接的onclick 事件被先执行，其次是href属性下的动作; 假设链接中同时存在href 与onclick，如果想让href 属性下的动作不执行，onclick 必须得到一个false的返回值; <a onclick="jumpTo(); return false" href="http://www.baidu.com">链接</a> 如果页面过长有滚动条，且希望通过链接的 onclick 事件执行操作。应将它的 href属性设为 javascript:void(..
html td双击事件,tr td同时添加点击事件
weixin_39571404的博客
06-04 1980
1.情景展示tr td同时添加点击事件，互不影响，如何实现？如上图所示，tr、td、input标签都添加了点击事件，在input框进行点击时，分别执行的是：input，td，tr三级标签的点击事件，这绝对不是我们想要的效果，我们只想执行input的点击事件，如何实现？2.原因分析这个流程图能够很好的解释，为什么执行了3次点击事件。同一事件的执行顺序DOM方法 addEventListener() ...
android html图片点击事件,Android中WebView加载Html中的图片添加点击事件
weixin_33363025的博客
05-27 336
基本的思路：(1)WebView来加载HTML。(2)向HTML中注入JavaScript，利用JavaScript来调用Android中的方法(执行一些跳转的操作等等)。首先你必须有一个HTML或者是一个地址，或者是存到本地的一个文件。我这里使用的是存到本地的HTML文件。index.html。内容是：标题 他的位置如下： 下面是布局的代码：android:layout_width="match...
v-html渲染的东西触发不了事件
06-09
使用v-html指令渲染的HTML代码无法触发事件的问题，通常是由于事件绑定不正确或者事件绑定时机不正确所导致的。具体解决方法可以参考以下几点： 1. 确认事件绑定是否正确：在使用v-html指令渲染HTML代码时，如果需要为HTML元素绑定事件，需要在元素上添加相应的事件绑定代码。例如，为按钮添加点击事件的代码如下： ```html <button v-on:click="handleClick">点击按钮</button> ``` 如果事件绑定代码没有正确添加到HTML元素上，那么事件就无法触发。可以通过浏览器的开发者工具查看HTML代码，确认事件绑定是否正确。 2. 确认事件绑定时机是否正确：在使用v-html指令渲染HTML代码时，如果需要为HTML元素绑定事件，需要确保事件绑定时机正确。如果事件绑定代码在HTML元素还未渲染完成时执行，那么事件绑定就会失效。可以在mounted钩子函数中使用this.$nextTick方法确保HTML元素渲染完成后再执行事件绑定代码，例如： ```html <template> <div> <div v-html="htmlContent"></div> </div> </template> <script> export default { data() { return { htmlContent: '<button>点击按钮</button>' }; }, mounted() { this.$nextTick(() => { const btn = document.querySelector('button'); btn.addEventListener('click', () => { alert('点击了按钮'); }); }); } }; </script> ``` 在这个示例中，我们首先使用v-html指令将HTML代码渲染出来，然后在mounted钩子函数中使用this.$nextTick方法确保HTML元素渲染完成后再执行事件绑定代码。在事件处理函数中，我们使用alert方法显示一个提示框，以确认事件是否触发成功。 3. 使用事件委托：在使用v-html指令渲染HTML代码时，如果需要为HTML元素绑定事件，并且HTML代码较为复杂，可以考虑使用事件委托的方式来绑定事件。事件委托的原理是将事件绑定在容器元素上，然后通过事件冒泡机制来判断事件源是哪个子元素，并执行相应的事件处理函数。例如： ```html <template> <div @click="handleClick"> <div v-html="htmlContent"></div> </div> </template> <script> export default { data() { return { htmlContent: '<button>点击按钮</button>' }; }, methods: { handleClick(e) { const target = e.target; if (target.tagName === 'BUTTON') { alert('点击了按钮'); } } } }; </script> ``` 在这个示例中，我们首先在父容器元素上绑定了一个点击事件，并在事件处理函数中判断事件源是哪个子元素。当事件源是button元素时，我们执行alert方法显示一个提示框，以确认事件是否触发成功。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值