写了一个兼容IE9的图片放大器(基于vue)
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)的更多相关文章
- Vue -- 项目报错整理(2):IE报错 - ‘SyntaxError:strict 模式下不允许一个属性有多个定义‘ ,基于vue element-ui页面跳转坑的解决
- 【CSS学习笔记】初始化CSS后,写li,并利用背景图片,来完成li小图标的效果,且达到个浏览器兼容
第一种情况 /*当标题前的图标时单独的一个点儿或者方块或者其他类似图标时,定义背景图background要放在<li>里. 在<li>中设置背景图片的尺寸,地址,不重复, ...
- 开源自己写的一个拖拽库,兼容到IE8+
github地址:https://github.com/qiangzi7723/draggable 目前这个库的兼容做到了兼容IE8,所以如果需要兼容IE8的朋友不妨试试.库里面写了很多的注释,对于想 ...
- 原生js写的一个弧形菜单插件
弧形菜单是一种半弧式或者全弧形菜单,是一种不同于传统横向或者竖向菜单形式的菜单.最近在网上看到好多人写出了这种效果,于是也尝试自己写了一个. 实现方式:原生态js 主要结构: 1.参数合并 var d ...
- 前端表单提交,提交有图片出现的问题,及解决方案 兼容ie9
更新一下我的小园子,主要说的是jq文件上传的过程中,如果出现上传的文件里有图片问题 其实文件上传有图片的情况下,不是什么大问题,对于前端来说,但是,如果需要兼容ie9的时候,就需要处理一下 文件上传如 ...
- VUE项目中文件上传兼容IE9
项目使用VUE编写,UI是ElementUI,但是Element的Upload组件是不兼容IE9的.因为IE9中无法使用FormData. 查找资料基本有两种解决方法:1.引入JQuery和jQuer ...
- js 无刷新文件上传 (兼容IE9 )
之前项目中有个文件上传了需求,于是直接就使用了FormData对象异步上传,但是在测试得时候发现ie9无法正常上传(项目要求兼容IE9+),无奈,查资料得知IE9- 版本不支持formdata对象得异 ...
- pc端兼容IE9及以上版本
最近业务部门反映我们商城的兼容性不是很好,尤其是在IE浏览器上,经过调研,我们决定对IE9及以上版本的IE内核浏览器进行主流程测试,发现有哪些功能在IE9上不兼容 一.CSS兼容性 如下图所示 使用了 ...
- 12小时包你学会基于ReactMix框架的ReactNativeApp开发(二)基于Css+HTML写第一个app页面
上一篇文章,大家对于ReactMix(https://github.com/xueduany/react-mix)框架有了一个基本认识,知道我们是一个语法糖,帮助大家基于一套代码,所有平台都能跑.那么 ...
随机推荐
- ubuntu oracle 环境搭建
安装 Oracle SQL Developer Oracle客户端安装 https://oracle.github.io/odpi/doc/installation.html#linux
- compose配置文件参数详解
转自:https://www.cnblogs.com/jsonhc/p/7814138.html 本文介绍compose配置文件参数的使用,熟练编写compose文件 [root@docker lnm ...
- Delphi Locate 详解1 转
TDataSet控件以及它的继承控件,例如TSimpleDataSet/TClientDataSet等都可以使用Locate方法在结果数据集中查寻数据.程序首先必须使用SQL命令从后端数据库中取得数据 ...
- jQuery 知识体系
jQuery基础知识一 jQuery之知识二-选择器 [jQuery知识]jQuery之知识三-过滤器 [jQuery知识]jQuery之知识四-DOM和CSS操作 [jQuery知识]jQuery之 ...
- hibernate criteria Restrictions工具类用法
CriteriaQuery cq = new CriteriaQuery(TSUser.class, dataGrid); // 查询条件组装器 org.jeecgframework.core.ext ...
- 16.Set、List、Queue集合;Map.md
目录 1.Set 1.2HashSet TreeSet 2.List 2.1ArrayList 2.1.1ArrayList和Vector的区别 2.2LinkedList 3.Queue 4.各种线 ...
- Linux下设置动态库的方法
库文件在连接(静态库和共享库)和运行(仅限于使用共享库的程序)时被使用,其搜索路径是在系统中进行设置的. 一般 Linux 系统把 /lib 和 /usr/lib 两个目录作为默认的库搜索路径,所以使 ...
- IDEA导入jar包
http://blog.csdn.net/a153375250/article/details/50851049
- linux服务器中Jenkins集成git、Gradle持续构建Springboot项目
Jenkins是用java编写的开源持续集成工具,目前被国内外各公司广泛使用.本章教大家如何在linux服务器中使用Jenkins自动发布一个可作为linux服务发布的Springboot项目. 自动 ...
- git gitlab 部署
GitLab.Gerrit 区别 , 如果需要cr ,就使用gerrit 否则 用gitlab 两个都支持ci gitlab 配置, 切换项目获取为ssh, ssh-keygen -t rsa -C ...