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

最新推荐文章于 2023-08-07 13:37:06 发布

今晚来我家吗

最新推荐文章于 2023-08-07 13:37:06 发布

阅读量1.2k

点赞数

分类专栏： js 文章标签： javascript vue.js node.js

本文链接：https://blog.csdn.net/qq_43059898/article/details/120121120

版权

js 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!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
评论
v-html渲染给图片添加点击事件

<!DOCTYPE html><html><head> <meta charset="UTF-8">  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"></head><body> <div id="app"
复制链接

扫一扫