vue.js实现照片放大功能


Posted in Javascript onJune 23, 2020

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript面向对象之静态与非静态类
Feb 03 Javascript
javascript中length属性的探索
Jul 31 Javascript
flash调用js中的方法,让js传递变量给flash的办法及思路
Aug 07 Javascript
使用jQuery实现更改默认alert框体
Apr 13 Javascript
浅谈jquery高级方法描述与应用
Oct 04 Javascript
js通过指定下标或指定元素进行删除数组的实例
Jan 12 Javascript
微信小程序 图片绝对定位(背景图片)
Apr 05 Javascript
gulp解决跨域的配置文件问题
Jun 08 Javascript
node使用promise替代回调函数
May 07 Javascript
用js简单提供增删改查接口
May 12 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
Dec 06 Javascript
Node在Controller层进行数据校验的过程详解
Aug 28 Javascript
vue实现点击按钮切换背景颜色的示例代码
Jun 23 #Javascript
vue.js实现双击放大预览功能
Jun 23 #Javascript
vue实现分页的三种效果
Jun 23 #Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
Jun 23 #Javascript
weui上传多图片,压缩,base64编码的示例代码
Jun 22 #Javascript
详细分析Node.js 多进程
Jun 22 #Javascript
详细分析vue响应式原理
Jun 22 #Javascript
You might like
php环境配置 php5 MySQL5 apache2 phpmyadmin安装与配置图文教程
2007/03/16 PHP
PHP5中的时间相差8小时的解决办法
2008/03/28 PHP
PHP 远程文件管理,可以给表格排序,遍历目录,时间排序
2009/08/07 PHP
php中取得URL的根域名的代码
2011/03/23 PHP
php浏览历史记录的方法
2015/03/10 PHP
JavaScript Event学习第九章 鼠标事件
2010/02/08 Javascript
Jquery为单选框checkbox绑定单击click事件
2012/12/18 Javascript
jquery异步跨域访问代码
2013/06/28 Javascript
js/jquery获取文本框输入焦点的方法
2014/03/04 Javascript
JavaScript中string转换成number介绍
2014/12/31 Javascript
Javascript中的几种URL编码方法比较
2015/01/23 Javascript
Jquery中offset()和position()的区别分析
2015/02/05 Javascript
JQuery自动触发事件的方法
2015/06/13 Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
2015/08/24 Javascript
js简单倒计时实现代码
2016/04/30 Javascript
jQuery Mobile 触摸事件实例
2016/06/04 Javascript
JavaScript原生实现观察者模式的示例
2017/12/15 Javascript
Vue Socket.io源码解读
2018/02/07 Javascript
垃圾回收器的相关知识点总结
2018/05/13 Javascript
实例讲解JS中pop使用方法
2019/01/27 Javascript
Python PyQt5标准对话框用法示例
2017/08/23 Python
Python 爬取携程所有机票的实例代码
2018/06/11 Python
python Tensor和Array对比分析
2020/01/08 Python
使用python求斐波那契数列中第n个数的值示例代码
2020/07/26 Python
英国航空官网:British Airways
2016/09/11 全球购物
美国最大的农村生活方式零售店:Tractor Supply Company(TSC)
2017/05/15 全球购物
加拿大在线隐形眼镜和眼镜店:VisionPros
2019/10/06 全球购物
优秀求职信范文分享
2013/12/19 职场文书
干部培训自我鉴定
2014/01/22 职场文书
建筑工地门卫岗位职责
2014/04/30 职场文书
垃圾分类的活动方案
2014/08/15 职场文书
先进个人事迹材料范文
2014/12/30 职场文书
2015年上半年计生工作总结
2015/03/30 职场文书
公司地址变更通知
2015/04/25 职场文书
2016年学校党支部创先争优活动总结
2016/04/05 职场文书
Python中re模块的元字符使用小结
2022/04/07 Python