photoloupe

图片放大器

  • 第一次写vue插件,本人比较喜欢用简单易懂的写法,不喜勿喷。
  • 本插件支持IE9及以上版本,已经过验证。
  • 本插件可根据需要设置放大倍数,最小支持1倍,支持小数
  • 下载地址:https://github.com/xyytwz/photoloupe

示例图片:

Build Setup

# install dependencies
npm install # serve with hot reload at localhost:8080
npm run dev # build for production with minification
npm run build

For detailed explanation on how things work, consult the docs for vue-loader.

引用示例:

<template>
<div id="app">
<div class="goodPic">
<photoloupe class :src="goodPic" :magnification="3"></photoloupe>
</div>
</div>
</template> <script>
import goodPic from "./assets/godPic1.jpg";
import photoloupe from './components/photoloupe'
export default {
name: 'app',
components:{
photoloupe
},
data () {
return {
goodPic:goodPic
}
}
}
</script> <style>
.goodPic{
width:400px;
height:400px;
border:1px solid #ddd;
}
</style>

参数说明:

参数 说明 默认值 备注
src 图片路径 defaultImg.png  
width 图片宽度 400 宽高比例可以调整
height 图片高度 400 宽高比例可以调整
magnification 放大倍数 2 最小为1,支持小数

写了一个兼容IE9的图片放大器(基于vue)的更多相关文章

  1. Vue -- 项目报错整理(2):IE报错 - ‘SyntaxError:strict 模式下不允许一个属性有多个定义‘ ,基于vue element-ui页面跳转坑的解决

  2. 【CSS学习笔记】初始化CSS后,写li,并利用背景图片,来完成li小图标的效果,且达到个浏览器兼容

    第一种情况 /*当标题前的图标时单独的一个点儿或者方块或者其他类似图标时,定义背景图background要放在<li>里.    在<li>中设置背景图片的尺寸,地址,不重复, ...

  3. 开源自己写的一个拖拽库,兼容到IE8+

    github地址:https://github.com/qiangzi7723/draggable 目前这个库的兼容做到了兼容IE8,所以如果需要兼容IE8的朋友不妨试试.库里面写了很多的注释,对于想 ...

  4. 原生js写的一个弧形菜单插件

    弧形菜单是一种半弧式或者全弧形菜单,是一种不同于传统横向或者竖向菜单形式的菜单.最近在网上看到好多人写出了这种效果,于是也尝试自己写了一个. 实现方式:原生态js 主要结构: 1.参数合并 var d ...

  5. 前端表单提交,提交有图片出现的问题,及解决方案 兼容ie9

    更新一下我的小园子,主要说的是jq文件上传的过程中,如果出现上传的文件里有图片问题 其实文件上传有图片的情况下,不是什么大问题,对于前端来说,但是,如果需要兼容ie9的时候,就需要处理一下 文件上传如 ...

  6. VUE项目中文件上传兼容IE9

    项目使用VUE编写,UI是ElementUI,但是Element的Upload组件是不兼容IE9的.因为IE9中无法使用FormData. 查找资料基本有两种解决方法:1.引入JQuery和jQuer ...

  7. js 无刷新文件上传 (兼容IE9 )

    之前项目中有个文件上传了需求,于是直接就使用了FormData对象异步上传,但是在测试得时候发现ie9无法正常上传(项目要求兼容IE9+),无奈,查资料得知IE9- 版本不支持formdata对象得异 ...

  8. pc端兼容IE9及以上版本

    最近业务部门反映我们商城的兼容性不是很好,尤其是在IE浏览器上,经过调研,我们决定对IE9及以上版本的IE内核浏览器进行主流程测试,发现有哪些功能在IE9上不兼容 一.CSS兼容性 如下图所示 使用了 ...

  9. 12小时包你学会基于ReactMix框架的ReactNativeApp开发(二)基于Css+HTML写第一个app页面

    上一篇文章,大家对于ReactMix(https://github.com/xueduany/react-mix)框架有了一个基本认识,知道我们是一个语法糖,帮助大家基于一套代码,所有平台都能跑.那么 ...

随机推荐

  1. ubuntu oracle 环境搭建

    安装 Oracle SQL Developer Oracle客户端安装 https://oracle.github.io/odpi/doc/installation.html#linux

  2. compose配置文件参数详解

    转自:https://www.cnblogs.com/jsonhc/p/7814138.html 本文介绍compose配置文件参数的使用,熟练编写compose文件 [root@docker lnm ...

  3. Delphi Locate 详解1 转

    TDataSet控件以及它的继承控件,例如TSimpleDataSet/TClientDataSet等都可以使用Locate方法在结果数据集中查寻数据.程序首先必须使用SQL命令从后端数据库中取得数据 ...

  4. jQuery 知识体系

    jQuery基础知识一 jQuery之知识二-选择器 [jQuery知识]jQuery之知识三-过滤器 [jQuery知识]jQuery之知识四-DOM和CSS操作 [jQuery知识]jQuery之 ...

  5. hibernate criteria Restrictions工具类用法

    CriteriaQuery cq = new CriteriaQuery(TSUser.class, dataGrid); // 查询条件组装器 org.jeecgframework.core.ext ...

  6. 16.Set、List、Queue集合;Map.md

    目录 1.Set 1.2HashSet TreeSet 2.List 2.1ArrayList 2.1.1ArrayList和Vector的区别 2.2LinkedList 3.Queue 4.各种线 ...

  7. Linux下设置动态库的方法

    库文件在连接(静态库和共享库)和运行(仅限于使用共享库的程序)时被使用,其搜索路径是在系统中进行设置的. 一般 Linux 系统把 /lib 和 /usr/lib 两个目录作为默认的库搜索路径,所以使 ...

  8. IDEA导入jar包

    http://blog.csdn.net/a153375250/article/details/50851049

  9. linux服务器中Jenkins集成git、Gradle持续构建Springboot项目

    Jenkins是用java编写的开源持续集成工具,目前被国内外各公司广泛使用.本章教大家如何在linux服务器中使用Jenkins自动发布一个可作为linux服务发布的Springboot项目. 自动 ...

  10. git gitlab 部署

    GitLab.Gerrit 区别 , 如果需要cr ,就使用gerrit 否则 用gitlab 两个都支持ci gitlab 配置,  切换项目获取为ssh, ssh-keygen -t rsa -C ...