写了一个兼容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，支持小数

转载于:https://www.cnblogs.com/xyyt/p/8718131.html