用vue写出放大镜查看图片的效果。

安装

npm install vue2.0-zoom

引入

import imgZoom from 'vue2.0-zoom'

组件

components: { imgZoom }

标签

配置参数

configs: {                width: 650,                height: 350,                maskWidth: 100,                maskHeight: 100,                maskColor: 'red',                maskOpacity: 0.2            }

　　

 

以上为组件的引用方法，针对与此类方法，运用到直接引用的vue.js项目中，做了相应改变。

组件方法

　　

标签

　　

样式

#_magnifier_layer{position: absolute; z-index: 9999; background: #f9f9f9;} ._magnifier{position: relative;display: inline-block;} ._magnifier img{vertical-align: middle;} ._magnifier_zoom{position: absolute; top:0;left:0; z-index: 10;pointer-events:none;}

　　

最终效果