精华内容
下载资源
问答
  • 2021-03-24 11:36:15

    这次给大家带来vue实现点击图片放大功能(附代码),vue实现点击图片放大功能的注意事项有哪些,下面就是实战案例,一起来看一下。

    1.建立子组件,来实现图片方法功能: BigImg.vue

    export default {

    props: ['imgSrc'],//接受图片地址

    methods: {

    bigImg() {

    // 发送事件

    this.$emit('clickit')

    }

    }

    }

    /*动画*/

    .fade-enter-active,

    .fade-leave-active {

    transition: all .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.7);

    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;

    }

    2.在父类中使用子组件:

    import BigImg from '../../index/moduleStyles/BigImg.vue';

    export default {

    data () {

    return {

    showImg:false,

    imgSrc: ''

    }

    },

    props: ['pagedata'],

    computed: {},

    components: { 'big-img':BigImg},

    methods: {

    clickImg(e) {

    this.showImg = true;

    // 获取当前图片地址

    this.imgSrc = e.currentTarget.src;

    },

    viewImg(){

    this.showImg = false;

    },

    },

    watch: {},

    }

    相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

    推荐阅读:

    更多相关内容
  • 主要为大家详细介绍了vue实现点击图片放大效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue实现点击图片放大显示功能

    千次阅读 2021-04-09 22:30:27
    https://blog.csdn.net/qq348843576/article/details/103261567 ... 父组件: <template> ...-- imgBaseUrl为图片URL--> <!-- <img v-if="imgBaseUrl" style="width:100%" :src="imgBas

    https://blog.csdn.net/qq348843576/article/details/103261567

    https://blog.csdn.net/qq_36320160/article/details/102175334

    父组件:

    <template>
      <div>
    <!-- imgBaseUrl为图片URL-->
    <!-- <img v-if="imgBaseUrl" style="width:100%" :src="imgBaseUrl"  @click.self="showBigImage(imgBaseUrl)">
    -->
    <img
        @click.self="showBigImage($event)"
        src="~@/assets/img/liaojiewt/202141.png"
        alt=""
    />
    //显示放大图片的组件
    <BigImg :visible="photoVisible" :url="bigImgUrl" @closeClick="()=>{photoVisible=false}"></BigImg>
      </div>
    </template>
    
    import BigImg from "./BigImg.vue";
    export default {
      data() {
        return {
          photoVisible: false,
          bigImgUrl: "",
         }
      },
      methods: {
      showBigImage(imgUrl) {//点击图片函数,点击后,把photoVisible设置成true
        if (imgUrl != "") {
          this.photoVisible = true;
          this.bigImgUrl = e.currentTarget.src;
        }
      },
      components: {
         BigImg,
      },
      }

     

     

    子组件:

    <template>
      <div v-show="visible" @click="closeClick" class="showPhoto">
        <img class="img" :src="url" alt="图片加载失败" />
      </div>
    </template>
     
    <script>
    export default {
      props: {
        url: {
          type: String,
          default: "",
        },
        visible: {
          type: Boolean,
          default: false,
        },
      },
      methods: {
        closeClick() {
          //子组件可以使用 $emit 触发父组件的自定义事件
          this.$emit("closeClick");
        },
      },
    };
    </script>
    <style lang="css" scoped>
    .showPhoto {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: 99999;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .showPhoto .img {
      display: block;
      margin: auto 0;
      max-width: 100%;
      text-align: center;
    }
    </style>
     

     

    展开全文
  • vue 实现点击图片放大

    千次阅读 2019-10-05 21:52:15
    作者QQ:1095737364 QQ群:123300273 欢迎加入! 1.建立子组件,来实现图片方法功能: BigImg.vue <!-- 过渡动画 -...

    作者QQ:1095737364    QQ群:123300273     欢迎加入!

    1.建立子组件,来实现图片方法功能: BigImg.vue

    <template>
        <!-- 过渡动画 -->
        <transition name="fade">
          <div class="img-view" @click="bigImg">
            <!-- 遮罩层 -->
            <div class="img-layer"></div>
            <div class="img">
              <img :src="imgSrc">
            </div>
          </div>
      </transition>
    </template>
    <script>
      export default {
        props: ['imgSrc'],//接受图片地址
        methods: {
          bigImg() {
          // 发送事件
            this.$emit('clickit')
          }
        }
      }
    </script>
    <style scoped>
      /*动画*/
      .fade-enter-active,
      .fade-leave-active {
        transition: all .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.7);
        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;
      }
    </style>

     

    2.在父类中使用子组件:

    <template xmlns:v-on="http://www.w3.org/1999/xhtml">
      <div class="contents">
        <div class="group">
          <div class="special">
            <span v-text="pagedata.subtitle"></span>
          </div>       <span class="text-muted" v-text="pagedata.headline"></span>       <div class="group_img">         <!-- 放大图片 -->         <big-img v-if="showImg" @clickit="viewImg" :imgSrc="imgSrc"></big-img>            <div class="text" v-text="pagedata.article"></div>         <img id="smallImg" :src="pagedata.imgurl" @click="clickImg($event)">       </div>     </div>   </div> </template> <script> import BigImg from '../../index/moduleStyles/BigImg.vue'; export default {   data () {     return {       showImg:false,       imgSrc: ''     }   },   props: ['pagedata'],   computed: {},   components: { 'big-img':BigImg},   methods: {     clickImg(e) {       this.showImg = true;       // 获取当前图片地址       this.imgSrc = e.currentTarget.src;     },     viewImg(){       this.showImg = false;     },   },   watch: {}, } </script> <style> </style>

     


    更多专业前端知识,请上 【猿2048】www.mk2048.com
    展开全文
  • rank_aggregation&utm_term=%E7%82%B9%E5%87%BB%E5%9B%BE%E7%89%87%E6%94%BE%E5%A4%A7vue&spm=1000.2123.3001.4430 vue实现点击图片放大图片 使用vue一个组件vue-directive-image-previewer A Vue.js project for ...

    转自这篇文章学习的:https://blog.csdn.net/y895315416/article/details/82963396?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2aggregatepagefirst_rank_v2~rank_aggregation-6-82963396.pc_agg_rank_aggregation&utm_term=%E7%82%B9%E5%87%BB%E5%9B%BE%E7%89%87%E6%94%BE%E5%A4%A7vue&spm=1000.2123.3001.4430

    vue实现点击图片放大图片

    使用vue一个组件vue-directive-image-previewer

    A Vue.js project for tag img, click img to zoom out to full screen.

    安装vue-directive-image-previewer

    命令行

    npm install vue-directive-image-previewer -D

    main.js文件
    import VueDirectiveImagePreviewer from 'vue-directive-image-previewer'
    import 'vue-directive-image-previewer/dist/assets/style.css'
    Vue.use(VueDirectiveImagePreviewer)    
    
    components
    <template>
      <div>
          <img v-image-preview src="picture-url"/>
      </div>
    </template>
    
    展开全文
  • vue 点击图片放大预览

    千次阅读 2022-02-25 10:03:09
    网上有很多关于vue点击图片放大的方法,我是根据自己使用的情况进行制作的,我这种情况是点击iframe标签中图片进行放大的。 话不多说咱直接上代码,走你 父组件: <template> <div class="iframeBody">...
  • vue点击图片放大功能

    2021-10-14 09:25:10
    vue点击图片放大功能 1、安装配置 npm install v-viewer --save 2、main.js引用 import Viewer from 'v-viewer' import 'viewerjs/dist/viewer.css' //Vue.use(Viewer) 默认配置写法 Vue.use(Viewer, { default...
  • 主要介绍了Vue基于iview table展示图片实现点击放大,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • 说句实话,它的功能还是很多很强大的,大家可以自己去看看。主要使用的旋转、翻转、...import Vue from 'Vue' import Viewer from 'v-viewer' import 'viewerjs/dist/viewer.css' 进行Vue注册调用 Vue.use(Vi.
  • //v-viewer轮播图实现效果: // 轮播图+缩放、旋转照片 import Viewer from 'v-viewer' import 'viewerjs/dist/viewer.css' Vue.use(Viewer) Viewer.setDefaults({ Options: { 'inline': true, 'button': tru
  • vue 实现图片点击放大效果

    千次阅读 2020-09-14 20:44:00
    Vue图片浏览组件v-viewer,支持旋转、缩放、翻转等操作 组件v-viewer地址:https://github.com/mirari/v-viewer 使用效果 安装 使用npm命令安装 npm install v-viewer 使用 引入v-viewer及必需的css样式,并使用...
  • 问题:VUE开发时因为要访问后端的接口所以要配置请求转发,如果直接转发全部请求,那么VUE动态绑定的src也会转发到后端,因为图片在前端,所以会收到404 NOT FOUND的报错。 常规的请求转发 在vue-cli3内,直接编辑...
  • vue移动端实现图片点击放大

    千次阅读 2020-12-08 02:39:07
    import preview from 'vue-photo-preview' import 'vue-photo-preview/dist/skin.css' let options = { fullscreenEl: false, } Vue.use(preview, options) Vue.use(preview) <img v-for="(i,v) in xqimgurl" ...
  • vue 实现图片预览放大以及缩小

    千次阅读 2021-11-22 10:49:41
    1.在vue的环境下实现图片放大缩小,可以使用viewerjs 效果图: 关于viewerjs的使用: 1)首先安装依赖 npm i v-viewer --save 2)全局注册(在main.js)以及引用css //导入图片预览viewer组件以及css ...
  • 主要介绍了基于Vue实现图片在指定区域内移动,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 前年分享过一篇点击放大功能VUE中使用插件实现点击图片放大功能 ,但是这个只能点击之后预览放大,不能在移动端双指放大,也不能翻转旋转之类,本次分享另一款插件viewerjs来实现图片放大预览。首先,我们在vue项目...
  • 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中使用 //...
  • //预览图片 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': ...

空空如也

空空如也

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

vue实现点击图片放大