Posted in Javascript onJune 23, 2020
本文实例为大家分享了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.js实现照片放大功能
- Author -
周小姐你好声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@