不懂vue.js怎么实现照片放大的功能?其实想解决这个问题也不难,下面让小编带着大家一起学习怎么去解决,希望大家阅读完这篇文章后大所收获。
这里就不放图了,放大的是别人的身份证
<template> <div class="image-cell__wrapper" :> <span class="title" :>{{ 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组件学习教程进行学习。
感谢你能够认真阅读完这篇文章,希望小编分享vue.js怎么实现照片放大的功能内容对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,遇到问题就找亿速云,详细的解决方法等着你来学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。