好资源导航 » 文章资讯 » vue.js实现照片放大功能

vue.js实现照片放大功能

2023-07-22 14:49:04 76

本文实例为大家分享了vue.js实现照片放大的具体代码，供大家参考，具体内容如下

这里就不放图了，放大的是别人的身份证






@import"~@/assets/mixin.stylus"
.image-cell__wrapper{
positionrelative
width9rem
padding0.5rem
height1.5rem
line-height1.5rem
background-colorwhite
font-dpr(16px)
color#4A4A4A
.title{
color#575fb6
}
.icon-image{
displayinline-block
width.5rem
height.4rem
bg-image('./img/picture')
background-sizecontain
vertical-alignmiddle
}
.image-wrapper{
displayinline-block
positionabsolute
right1rem
img{
displayinline-block
vertical-alignmiddle
padding-left.3rem
width.6rem
height.6rem
}
}
.icon-arrow{
positionrelative
top.6rem
floatright
displayinline-block
width.2rem
height.4rem
bg-image('~@/assets/img/arrow')
background-sizecontain
}
.inline-border{
positionabsolute
bottom0
left.4rem
width9.6rem
height1px
background-color#ECECEC
}
}

tool.js里面的imgHandle

@functionimgHandle切割图片
functionimgHandle(url,width,height){
constfontSize=document.documentElement.style.fontSize.split('px')[0]
returnurl+'?imageView2/1/w/'+(fontSize/75*width*5).toFixed(0)+'/h/'+(fontSize/75*height*5).toFixed(0)+'/q/100'
}
export{imgHandle}
exportdefault{imgHandle}

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

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

返回顶部
514930285
czq8825@qq.com

vue.js实现照片放大功能

热门推荐

随机推荐