快捷導(dǎo)航

vue.js實(shí)現(xiàn)照片放大功能

更新時(shí)間：2020年06月23日 11:24:18 作者：周小姐你好

這篇文章主要為大家詳細(xì)介紹了vue.js實(shí)現(xiàn)照片放大功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue.js實(shí)現(xiàn)照片放大的具體代碼，供大家參考，具體內(nèi)容如下

這里就不放圖了，放大的是別人的身份證

<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 }

關(guān)于vue.js組件的教程，請(qǐng)大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: