vue 点击图片放大预览

网上有很多关于vue点击图片放大的方法，我是根据自己使用的情况进行制作的，我这种情况是点击iframe标签中图片进行放大的。

话不多说咱直接上代码，走你

父组件：

<template><div class="iframeBody"><!-- 标题 --><el-row><el-col :span="24" class="iframeTitle"><h1>{{ navigationTitle }}</h1></el-col></el-row><el-row><el-col :span="24" class="iframeBox"><el-col :span="24" style="display: flex; justify-content: center"><!-- iframe标签显示外部页面 --><iframeref="iframeHtml"id="iframeHtml"style="font-family: Microsoft YaHei; background-color: #ffffff":src="iframeHtml"frameborder="0"scrolling="auto"width="90%"></iframe></el-col></el-col></el-row><!-- 放大图片 -->//此部分是你需要的代码<big-img v-if="showImg" @clickit="viewImg" :imgSrc="imgSrc"></big-img></div>
</template>
<script>
import BigImg from "./BigImg.vue"; //引入子组件
export default {name: "OutsideManualSub",components: { "big-img": BigImg }, //对子组件进行封装加以使用data() {return {navigationTitle: "", //标题iframeHtml: "", //iframe显示内容地址imgSrc: "", //向子组件传输图片的地址showImg: false, //子组件显示条件};},created() {this.getHTML();},mounted() {// 必须在iframe标签onload事件前进行this指向，否则调用data中的值无效显示undefinedlet that = this;document.getElementById("iframeHtml").onload = function () {// 获取iframe中的document内容，进行操作let iframe =window.top.document.getElementById("iframeHtml").contentWindow.document;// 获取iframe html文件head头部标签const head = iframe.getElementsByTagName("head");// 新建link标签const linkTag = document.createElement("link");const linkTag1 = document.createElement("link");// link标签引入css文件的地址linkTag.href = "../topics/css/topic-body.css";linkTag1.href = "../topics/css/commonltr.css";// 设置link标签属性linkTag.setAttribute("rel", "stylesheet");linkTag1.setAttribute("rel", "stylesheet");// 设置link标签属性linkTag.setAttribute("type", "text/css");linkTag1.setAttribute("type", "text/css");// 将link标签添加进iframe html文件的head里head[0].appendChild(linkTag);head[0].appendChild(linkTag1);// 通过getElementsByTagName()方法获取全部img标签let label = iframe.getElementsByTagName("img");//因为是点击iframe标签中图片进行放大的，所以需要用到for循环// label中不只有img标签，使用for...in...循环是不可行的，需要使用原本的for循环，通过img标签的数量进行循环，过滤得到纯纯的img标签for (let i = 0; i < label.length; i++) {// 点击img标签进行方法操作label[i].onclick = function () {// 调用ShowBigImg()方法that.ShowBigImg(label[i].src);};}};},methods: {getHTML() {let baseUrl = this.axios.defaults.baseURL; //接口前缀// 标题this.navigationTitle =this.$route.query.manualName + " > " + this.$route.query.urlName;let url = this.$route.query.url;this.iframeHtml = baseUrl + url;},// 打开遮罩层并显示图片ShowBigImg(src) {// 展示遮罩层this.showImg = true;// 传输img标签的图片地址this.imgSrc = src;},// 关闭遮罩层viewImg() {this.showImg = false;},},
};
</script>

子组件（子组件你可以全部拿过去使用，记得在父组件引用）：

<template><!-- 过渡动画 --><transition name="fade-enter-active"><div class="img-view" @click="bigImg"><!-- 遮罩层 --><div class="img-layer"></div><div class="img" style="margin-top: -63em"><!-- 图片 --><img :src="imgSrc" /></div></div></transition>
</template>
<script>
export default {name: "BigImg",props: ["imgSrc"], //接受图片地址data() {return {};},methods: {bigImg() {// 发送事件this.$emit("clickit");},},
};
</script>
<style scoped>
.fade-enter-active,
.fade-leave-active {transition: all 0.2s linear;transform: translate3D(0, 0, 0);
}
.fade-enter,
.fade-leave-active {transform: translate3D(100%, 0, 0);
}/* bigimg */
.img-view {position: inherit;width: 100%;height: 100%;
}
/*遮罩层样式*/
.img-view .img-layer {position: fixed;z-index: 999;top: 0;left: 0;background: rgba(0, 0, 0, 0.9);width: 100%;height: 100%;overflow: hidden;
}
/*不限制图片大小，实现居中*/
.img-view .img img {max-width: 100%;display: block;position: absolute;left: 0;right: 0;margin: auto;z-index: 1000;margin-top: 10rem;
}
</style>

vue 点击图片放大预览相关推荐

点击图片放大预览，遮罩屏幕放大展示
功能说明:将图片方格展示,点击某张图片可在当前页面进行预览,点击遮罩屏幕,并且方法显示,点击右上角x,放大的图片消失. 效果图如下: 1.引入fancy.js和fancy.css 路径根据项目实际路径 ...
微信小程序系列——点击图片放大预览
需求开发的时候,把图片放到页面上,点击图片没有任何反应,不能放大也不能缩小这怎么能行!!! 所以需求来了:点击图片能够把图片弹出来,这样就能放大图片看细节了! 实现步骤微信提供了预览图片的接口, ...
小程序点击图片放大预览
Banner图点击预览 wxml  <view class='home-banner'><swiper indicator-dots='tr ...
自学小程序，我教你呀（五）实现点击图片放大预览长按保存下载
前言其实很多手机,只要你点了预览图片,然后长按图片就能够实现保存到手机和分享给朋友. 实现步骤微信提供了预览图片的接口,其中urls是必填的类型 step1 wxml文件里添加点击事件 <i ...
uni-app 点击图片放大预览
<u-image @click="imgClick(imgSrc)" :src="imgSrc"> </u-image> <scr ...
微信小程序点击图片放大预览，新页面中全屏预览图片
第一步:在wxml中定义image组件,并设置绑定事件. <image src="{{priceUrl}}" bindtap="imgClick"> ...
Vue 移动端 previewer实现图片放大预览
简述本文主要讲述,vue在手机移动端如何实现对小图进行放大查看预览.类似于朋友圈的照片查看. 可用工具 1.npm安装,npm i vue-preview -S 2.使用一些Vue的UI组件框架自带 ...
微信小程序图片放大预览效果的实现，轮播图点击放大预览
近期很多刚学习小程序的同学,想做哪种图片点击放大,然后可以左右滑动预览的效果.我也特意去研究下,发现直接用微信程序自己的api就可以很方便的实现.今天就来教大家如何实现小程序图片点击放大的效果. 老规 ...
vue本地上传并预览php,vue.js 实现图片本地预览裁剪压缩上传功能
以下代码涉及 Vue 2.0 及 ES6 语法. 目标纯 javascrpit 实现,兼容ie9及以上浏览器,在本地做好文件格式.长宽.大小的检测,减少浏览器交互. 现实是残酷的,为了兼容Ie9 还 ...
微信小程序图片放大预览效果的实现
效果预览效果图有点快,但是可以大致看出来效果了.我再给大家描述下吧一个页面有3张图片,点击其中任意一张都可以放大预览.然后在预览的时候,左右滑动,还可以看另外两张图片. 话不多说,直接上代码 1, ...

vue 点击图片放大预览

网上有很多关于vue点击图片放大的方法，我是根据自己使用的情况进行制作的，我这种情况是点击iframe标签中图片进行放大的。

话不多说咱直接上代码，走你

vue 点击图片放大预览相关推荐

最新文章

热门文章