网站开发 jsp,手工网站和自助建站式网站却别,目前流行的网站开发设计,网站建设 淘宝描述psd实现思路: 获取到富文本中所有的img标签#xff0c;方面给图片添加类名方便后面取dom#xff1b; 获取所有的img类 给每个img绑定点击事件 利用数组的splice方法#xff0c;将当前点击的图片放置数组的第一项 调用vant预览方法 import { showImagePreview } from vant;p…  实现思路: 获取到富文本中所有的img标签方面给图片添加类名方便后面取dom 获取所有的img类 给每个img绑定点击事件 利用数组的splice方法将当前点击的图片放置数组的第一项 调用vant预览方法 import { showImagePreview } from vant;p v-htmlcontent/p// 点击图片预览 let content ref() //处理后的富文本 let contentPic ref() const getImgList () {let srcList [];content.value dataObj.value.content.replace(/img [^]*src[]([^])[^]*/g, (match, capture) {console.log(capture, capture);srcList.push(capture); // capture图片地址 match img标签整体return img src${capture} classcontent-img;//给图片添加class方便后面取dom});nextTick(() {const imgHtml document.getElementsByClassName(content-img);for (let i 0; i imgHtml.length; i 1) {imgHtml[i].onclick () {//解决点击预览时不是当前图片问题const tempImgList [...srcList];// 所有图片地址if (i 0) {contentPic.value tempImgList;} else {// 调整图片顺序把当前图片放在第一位const start tempImgList.splice(i);const remain tempImgList.splice(0, i);contentPic.value start.concat(remain);}console.log(contentPic.value, contentPic.value);showImagePreview([contentPic.value[0]]);}}}) }