本文主要是介绍vue项目开发记录1：为v-html内的img元素添加点击放大效果，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
项目需求：在页面上显示帖子，帖子内的数据来源于后端，形式是"<p>内容</p>"这样的字符串。其中，要为所有的img元素添加一个点击之后看全图的功能，研究了一下，实现方案如下。
1. 基础内容，实现了帖子的显示
<template><div><div v-for="post in posts" :id="post.id"><p>{{ post.author }}</p><p>{{ post.create_time }}</p><div class="content" v-html="post.content"></div></div></div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { getPost } from '@/api/index";const posts = ref([])
onMounted(() => {getData();
})
const getData = () => {getPost().then((res) => {posts.value = res.data;}).catch(err => {});
}
</script>
<style scoped>
.content >>> img {max-width: 500px;
}
</style>2. 在finally中获取dom节点
由于要为img元素添加点击事件，起初我的想法是，用replaceAll函数手动给img添加@click或onclick事件，将字符串变成<img οnclick="test" src="/pictures/01.png" />这样的形式，后来发现不行，添加@click浏览器无法识别，添加onclick，浏览器也无法获取写在vue文件中的test函数，必须要对dom节点进行操作。
网上的写法都是在onMounted中通过ref获取对应节点，但是因为项目逻辑是在onMounted中调用api接口访问后端，所以必须要等到数据回来之后再去访问节点，才能获取对应的内容。
这时候就可以用到finally。在异步操作中，then, catch, finally是一组，finally内的内容在then和catch执行后执行，非常符合当前的场景。
const getData = () => {getPost().then((res) => {posts.value = res.data;}).catch(err => {console.log(err);}).finally(() => {const elements = document.querySelectorAll('.content img'); // 获取所有img节点elements.forEach(item => item.addEventListener('click', handleClick);});
}3. 添加弹窗
本来想使用ant-design中的Modal实现图片放大后的弹窗，但是默认的样式和需求差得太远，所以自己写了个。其中还有个小插曲，因为这个组件外部还有内容，所以将.modal_mask的样式写为position:absolute;的时候，并没有达到全屏的效果，只是占满了外部组件的全部，所以要写成position:fixed;
<template><div>...<div v-show="showModal" class="modal_mask"><div class="close_btn" @click="showModal=false"><img src="@/assets/pictures/close.png" /></div><img :src="imgsrc" /></div>
</template>
<script setup>
...const showModal = ref(false); //控制弹窗显示隐藏
const imgsrc = ref('');
...
const handleClick = (event) => {showModal.value = true;imgsrc.value = event.target.src; //必须要通过传来的event获取图片src
}
</script>
<style scoped>
.modal_mask {position: fixed;left: 0;right: 0;top: 0;bottom: 0;background-color: rgba(0, 0, 0, 0.45);z-index: 9999;display: flex;align-items: center;justify-content: center;
}
.modal_mask .close_btn {position: absolute;right: 10px;top: 10px;cursor: pointer;
}
.modal_mask img {max-width: 100%;max-height: 100%;
}
</style>这篇关于vue项目开发记录1：为v-html内的img元素添加点击放大效果的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
