精华内容
下载资源
问答
  • vue 点击图片放大预览
    2022-02-25 10:03:09

    网上有很多关于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标签显示外部页面 -->
              <iframe
                ref="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中的值无效显示undefined
        let 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实现点击图片放大效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue点击图片放大预览图片支持旋转等

    万次阅读 热门讨论 2018-08-07 18:52:51
    vue图片点击放大预览v-viewer库使用 提到图片放大预览,可能好多人想到的是lightbox,但是伸手党做习惯了,所以去github上搜索了一个,感觉效果很完美,简单实用,所以推荐给大家。 ...在...

    vue图片点击放大预览v-viewer库使用

    aiprose 个人随笔上线,网址 aiprose.com 点击访问

    提到图片放大预览,可能好多人想到的是lightbox,在vue中使用lightbox还挺麻烦,但是伸手党做习惯了,所以去github上搜索了一个,感觉效果很完美,简单实用,所以推荐给大家。

    https://github.com/mirari/v-viewer github地址,下面是我这块使用的效果图。

    效果图

    1.安装配置
    npm install v-viewer --save
    

    在main.js中引入

    import Viewer from 'v-viewer'
    import 'viewerjs/dist/viewer.css'
    
    //Vue.use(Viewer) 默认配置写法
    Vue.use(Viewer, {
        defaultOptions: {
            zIndex: 9999
        }
    })
    
    2.使用
    <template>
    	<viewer :images="images">
    	   <img v-for="src in images" :src="src" :key="src" width="300">
    	</viewer>
    </template>
    
    <script type="text/ecmascript-6">
        export default {
            name: "images",
            data() {
                return {
                    images : []
                }
            },
            created() {
    	        //图片是从后台查的
                this.getData()
            },
            methods: {
                getData() {
                    var _this = this
                    _this.$http.get('/admin/attach/product')
                        .then(function (response) {
                            _this.images = response.data.data
                        })
                        .catch(function (err) {
                            console.log(err);
                        });
                }
            }
        }
    </script>
    

    images 数组里的格式很简单,就是图片地址,没有多余的参数。

    [
            "http://oss.tdcloud.trmap.cn/producephoto/1807181752/2c9180845e18bf9b015e19f1d3440010/别墅.jpg",
            "http://oss.tdcloud.trmap.cn/producephoto/1807311736/2c9180845e18bf9b015e19f1d3440010/201803190613566108.png",
            "http://oss.tdcloud.trmap.cn/producephoto/1807311736/2c9180845e18bf9b015e19f1d3440010/1248064370052.jpg",
            "http://oss.tdcloud.trmap.cn/producephoto/1807311737/2c9180845e18bf9b015e19f1d3440010/201709260737493750.png"
        ]
    

    关注

    aiprose 个人随笔上线,网址 aiprose.com 点击访问

    如果有问题,请在下方评论,或者加群讨论 128806068

    关注下方微信公众号,可以及时获取到各种技术的干货哦,如果你有想推荐的帖子,也可以联系我们的。

    这里写图片描述

    展开全文
  • vue图片点击放大预览

    千次阅读 2020-09-16 14:20:02
    import Vue from 'vue'; import Viewer from 'v-viewer' import 'viewerjs/dist/viewer.css' Vue.use(Viewer) Viewer.setDefaults({ Options: { 'inline': true, 'button': true, 'navbar': true, 'title': true, '...

    1、安装依赖

    npm install v-viewer --save
    

    2、全局引入

    import Vue from 'vue';
    import Viewer from 'v-viewer'
    import 'viewerjs/dist/viewer.css'
    Vue.use(Viewer)
    Viewer.setDefaults({
      Options: { 'inline': true, 'button': true, 'navbar': true, 'title': true, 'toolbar': true, 'tooltip': true, 'movable': true, 'zoomable': true, 'rotatable': true, 'scalable': true, 'transition': true, 'fullscreen': true, 'keyboard': true, 'url': 'data-source' }
    })
    

    3、使用

    <viewer :images="photo">
        <!--photo 一定要一个数组,否则报错-->
           <img
              v-for="(src,index) in photo"
              :src="src"
              :key="index"
              :onerror="errorImg"
               class="big-img"
          >
    </viewer>
    
    preview(item) {
       this.photo = []
       this.photo.push(item.templateImage)
    },
    

    效果如下
    在这里插入图片描述
    第二种 vue-photo-preview插件

    1、安装依赖

    npm install vue-photo-preview --save
    

    2、全局引入

    import preview from 'vue-photo-preview'
    import 'vue-photo-preview/dist/skin.css'
    Vue.use(preview)
    
    

    3、使用

    <el-table-column align="left" prop="goodsName" label="退货商品名称" width="280">
             <template slot-scope="scope">
                  <img
                      style="height:50px;width:50px;margin-right:10px;"
                      :src="scope.row.goodsImage"
                      preview
                  />
            </template>
    </el-table-column>
    

    效果如下
    在这里插入图片描述

    本人更推荐第一种方法,点击图片可放大可缩小,第二种不行,而且图片放大的时间有点长。

    展开全文
  • 说句实话,它的功能还是很多很强大的,大家可以自己去看看。主要使用的旋转、翻转、...import Vue from 'Vue' import Viewer from 'v-viewer' import 'viewerjs/dist/viewer.css' 进行Vue注册调用 Vue.use(Vi.

    说句实话,它的功能还是很多很强大的,大家可以自己去看看。主要使用的旋转、翻转、缩放、上下切换、键盘操作等功能都有。这里主要使用旋转

    1.首先是安装

    npm install v-viewer --save

    2.配置

    在main.js中引入

    记得引用它的CSS样式

    import Vue from 'Vue'
    import Viewer from 'v-viewer'
    import 'viewerjs/dist/viewer.css'
    

    进行Vue注册调用

     

    Vue.use(Viewer)
    Viewer.setDefaults({
      Options: {
        'inline': true, // 启用 inline 模式
        'button': true, // 显示右上角关闭按钮
        'navbar': true, // 显示缩略图导航
        'title': true, // 显示当前图片的标题
        'toolbar': true, // 显示工具栏
        'tooltip': true, // 显示缩放百分比
        'movable': true, // 图片是否可移动
        'zoomable': true, // 图片是否可缩放
        'rotatable': true, // 图片是否可旋转
        'scalable': true, // 图片是否可翻转
        'transition': true, // 使用 CSS3 过度
        'fullscreen': true, // 播放时是否全屏
        'keyboard': true, // 是否支持键盘
        'url': 'data-source' // 设置大图片的 url
      }
    })
    
    
    1. template中使用
    2. <template>
      	<viewer :images="image">
      	   <img :src="src">
      	</viewer>
      </template>
      
      <script>
      	export default {
      		name: 'images',
      		data() {
      			return {
      				 image: require("../../assets/image/po.jpg"),
      			}
      		}
      	}
      </script>
      

      随意拿了个图来做示范,放大后的效果图

       这样就完成了,但是,点击放大后你会发现下面有很多按钮,需求往往不需要这么多,所以可自行配置 Options 里面的值,但是为了统一,我更倾向于直接修改那些按钮的css,每个按钮有个独立的class,我们可以在自己的css文件中覆盖它的样式。


    博主不会以任何方式收取查看费用,欢迎大家进行转载,点个赞在走吧。 

    展开全文
  • 有一个需要在列表展示图片点击放大的功能 1、安装依赖 npm install v-viewer --save 2、全局引入 import Viewer from 'v-viewer' import 'viewerjs/dist/viewer.css' Vue.use(Viewer) Viewer.setDefaults({ ...
  • vue项目实现点击图片放大预览

    千次阅读 2019-11-13 16:27:38
    vue-photo-preview插件 1、运行 npm install vue-photo-preview --save 2、main.js引用 import preview from 'vue-photo-preview' import 'vue-photo-preview/dist/skin.css' Vue.use(preview) 3、在html中使用 //...
  • Element UI通过点击预览图片 //引入图片预览插件(前提是安装了element ui) import ElImageViewer from 'element-ui/packages/image/src/image-viewer' components: { ElImageViewer, }, data() { return { ...
  • 这是移动端使用vue框架与mint-ui实现的父用子之间的通信实现的图片预览的功能,在父组件中每一张图片都可以实现图片放大查看。 子组件 <!--html部分--> <mt-swipe :auto=0 :show-indicators=false :...
  • vue实现图片放大预览

    千次阅读 2020-10-18 15:22:05
    下载,官网 npm install vue-photo-preview --save main.js引用 import preview from 'vue-photo-preview' import 'vue-photo-preview/dist/skin.css' let options = { ... tapToClose: true, //点击滑动.
  • vue图片点击放大预览v-viewer

    千次阅读 2019-06-18 16:32:41
    1、安装依赖 npm install v-viewer --save ...import Vue from 'vue'; import Viewer from 'v-viewer' import 'viewerjs/dist/viewer.css' Vue.use(Viewer) Viewer.setDefaults({ Options: { 'inline': tr...
  • 首先先安装依赖: npm install v-viewer --...Vue.use(Viewer) Viewer.setDefaults({ Options: { 'inline': true, 'button': true, 'navbar': true, 'title': true, 'toolbar': true, 'tooltip': true, 'movable': tr
  • vue鼠标悬停图片放大特效是一款基于vue.js跟css3制作的相册图片悬停弹出3d放大展示代码。
  • Vue图片点击放大预览插件 v-viewer

    千次阅读 2019-09-30 15:39:37
    第一步: npm install v-viewer 还要引入css样式 import 'viewerjs/dist/...Vue.use(Viewer) Viewer.setDefaults({ Options: { 'inline': true, 'button': true, 'navbar': true, 'title': true, 'toolbar...
  • import Vue from 'vue' //v-viewer轮播图实现效果: // 轮播图+缩放、旋转照片 import Viewer from 'v-viewer' import 'viewerjs/dist/viewer.css' Vue.use(Viewer) Viewer.setDefaults({ Options: { 'inline': ...
  • vue插件v-viewer的使用目的新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants...
  • 前端vue实现图片放大预览

    千次阅读 2020-08-10 16:48:37
    1、安装依赖 npm i v-viewer 2、main.js全局引入 ...Vue.use(Viewer, { defaultOptions: { zIndex: 9999 } }) 3、使用 <viewer> <img :src= scope.row.icon" style="width: 34px; height: 34px; bord
  • //预览图片 private previewPicture(e: any) { if (e.target.tagName == 'IMG') { this.picturePreview.src = e.target.src; this.picturePreview.visible = true; } } } script> <style lang="scss" scoped> ....
  • vue点击放大预览图片插件-v-viewer

    千次阅读 2020-12-15 13:55:27
    import Vue from 'vue'; import Viewer from 'v-viewer' import 'viewerjs/dist/viewer.css' Vue.use(Viewer) Viewer.setDefaults({ Options: { 'inline': true, 'button': true, 'navbar': true, 'title':

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,710
精华内容 684
关键字:

vue点击图片放大预览