本文实例为大家分享了vue.js实现照片放大的具体代码，供大家参考，具体内容如下

这里就不放图了，放大的是别人的身份证

<template> <div class="image-cell__wrapper" :style="border"> <span class="title" :style="{color: titleColor}">{{ imageTitle }}</span> <span class="icon-image"></span> <span class="image-wrapper"> <img v-for="(item, key) in realImage" :src="imageHandle(item, 80, 80)" alt="image"> </span> <span class="icon-arrow" v-if="arrow"></span> <div v-if="inlineBorder" class="inline-border"></div> </div></template><script>import { imgHandle } from '@/utils/tool'export default { name: 'imageCell', props: { imageTitle: { type: String, required: true }, image: { required: false }, arrow: { type: Boolean, default: true }, titleColor: { type: String, default: '#575fb6' }, inlineBorder: { type: Boolean, default: false }, hasBorder: { type: Boolean, default: false } }, data () { return { border: { borderBottom: this.hasBorder ? '1px solid #ececec' : '' } } }, created () { }, computed: { realImage () { if (this.image) { return this.image.length > 5 ? this.image.slice(0, 5) : this.image } } }, methods: { imageHandle (url, w, h) { return imgHandle(url, w, h) } }}</script><style lang="stylus" scoped> @import "~@/assets/mixin.stylus" .image-cell__wrapper{ position relative width 9rem padding 0 .5rem height 1.5rem line-height 1.5rem background-color white font-dpr(16px) color #4A4A4A .title{ color #575fb6 } .icon-image{ display inline-block width .5rem height .4rem bg-image('./img/picture') background-size contain vertical-align middle } .image-wrapper{ display inline-block position absolute right 1rem img{ display inline-block vertical-align middle padding-left .3rem width .6rem height .6rem } } .icon-arrow{ position relative top .6rem float right display inline-block width .2rem height .4rem bg-image('~@/assets/img/arrow') background-size contain } .inline-border{ position absolute bottom 0 left .4rem width 9.6rem height 1px background-color #ECECEC } }</style>

tool.js里面的imgHandle

@function imgHandle 切割图片function imgHandle (url, width, height) { const fontSize = document.documentElement.style.fontSize.split('px')[0] return url + '?imageView2/1/w/' + (fontSize / 75 * width * 5).toFixed(0) + '/h/' + (fontSize / 75 * height * 5).toFixed(0) + '/q/100'}export { imgHandle }export default { imgHandle }

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。