vue.js实现照片放大功能

203 阅读 0 评论 134 点赞

我是靠谱客的博主认真钢笔，最近开发中收集的这篇文章主要介绍vue.js实现照片放大功能，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

本文实例为大家分享了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组件学习教程进行学习。

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