欢迎来到站长教程网!

JavaScript

当前位置:主页 > 网页制作 > JavaScript >

vue.js实现照片放大功能

时间:2020-06-23|栏目:JavaScript|点击:

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

<template> <div :style="border"> <span :style="{color: titleColor}">{{ imageTitle }}</span> <span></span> <span> <img v-for="(item, key) in realImage" :src="imageHandle(item, 80, 80)" alt="image"> </span> <span v-if="arrow"></span> <div v-if="inlineBorder"></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三种安装方式

栏    目:JavaScript

下一篇:JS常见错误(Error)及处理方案详解

本文标题:vue.js实现照片放大功能

本文地址:http://www.blue1000.com/wangyezhizuo/JavaScript/2077.html

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:1961407250 | 邮箱:1961407250#qq.com(#换成@)

Copyright © 2002-2022 BK网络学院版权所有 Power by DedeCms 粤ICP备19027147号-7