vue.js怎么实现照片放大的功能

发布时间：2020-06-23 14:33:14 来源：亿速云阅读：215 作者：清晨栏目：开发技术

不懂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 &#63; '1px solid #ececec' : ''
  }
 }
 },
 created () {
 },
 computed: {
 realImage () {
  if (this.image) {
  return this.image.length > 5 &#63; 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 + '&#63;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怎么实现照片放大的功能内容对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，遇到问题就找亿速云，详细的解决方法等着你来学习!

向AI问一下细节

vue.js怎么实现照片放大的功能

猜你喜欢

最新资讯

相关推荐

相关标签