成长的悲伤在于有一天你会成为你曾经讨厌的人。人生短短数十载,最要紧的是满足自己,不是讨好他人。
本文实例为大家分享了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组件学习好代码教程进行学习。
本文vue.javascript如何实现照片放大功能到此结束。立志趁早点,上路轻松点,目光放远点,苦累看淡点,努力多一点,奋斗勇一点,胜利把名点,祝你折桂冠,成功新起点,幸福多一点,笑容亮一点。小编再次感谢大家对我们的支持!