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----文件操作
Jan 18 Javascript
JS 实现完美include载入实现代码
Aug 05 Javascript
浅谈javascript事件取消和阻止冒泡
May 26 Javascript
有关JavaScript中call()和apply() 的一些理解
May 20 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
Jun 12 Javascript
微信小程序 图片边框解决方法
Jan 16 Javascript
一篇看懂vuejs的状态管理神器 vuex状态管理模式
Apr 20 Javascript
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
webpack+vue+express(hot)热启动调试简单配置方法
Sep 19 Javascript
JavaScript 对引擎、运行时、调用堆栈的概述理解
Oct 22 Javascript
Vue代码整洁之去重方法整理
Aug 06 Javascript
Vue.extend 登录注册模态框的实现
Dec 29 Vue.js
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的源码中深入了解stdClass类
2014/04/18 PHP
php计算两个日期时间差(返回年、月、日)
2014/06/19 PHP
smarty简单应用实例
2015/11/03 PHP
php自定义时间转换函数示例
2016/12/07 PHP
php7下的filesize函数
2019/09/30 PHP
setTimeout的延时为0时多个浏览器的区别
2012/05/23 Javascript
关于jQuery参考实例2.0 用jQuery选择元素
2013/04/07 Javascript
Node.js中使用Log.io在浏览器中实时监控日志(等同tail -f命令)
2014/09/17 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
2015/12/23 Javascript
不得不分享的JavaScript常用方法函数集(上)
2015/12/23 Javascript
JQuery datepicker 用法详解
2015/12/25 Javascript
bootstrap datepicker限定可选时间范围实现方法
2016/09/28 Javascript
jQuery中的一些小技巧
2017/01/18 Javascript
JS判断数组那点事
2017/10/10 Javascript
Vue2 模板template的四种写法总结
2018/02/23 Javascript
vue 根据数组中某一项的值进行排序的方法
2018/08/30 Javascript
Angular6 正则表达式允许输入部分中文字符
2018/09/10 Javascript
vue中动态select的使用方法示例
2019/10/28 Javascript
ES6实现图片切换特效代码
2020/01/14 Javascript
js获取本日、本周、本月的时间代码
2020/02/01 Javascript
[44:04]OG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python爬虫中get和post方法介绍以及cookie作用
2018/02/08 Python
python微信跳一跳系列之棋子定位像素遍历
2018/02/26 Python
Python使用修饰器进行异常日志记录操作示例
2019/03/19 Python
PythonPC客户端自动化实现原理(pywinauto)
2020/05/28 Python
Python Pygame实现俄罗斯方块
2021/02/19 Python
华为旗下电子商务平台:华为商城
2016/08/06 全球购物
kmart凯马特官网:美国最大的打折零售商和全球最大的批发商之一
2016/11/17 全球购物
如何利用cmp命令比较文件
2016/04/11 面试题
校园广播稿500字
2014/02/04 职场文书
六查六看自查材料
2014/02/17 职场文书
产品销售计划书
2014/05/04 职场文书
行风评议整改报告
2014/11/06 职场文书
离婚案件被告代理词
2015/05/23 职场文书
主题班会开场白
2015/06/01 职场文书
大学生安全教育主题班会
2015/08/12 职场文书