介绍
MagnifyingGlass是vue组件库,提供一个查看图片的放大镜的效果。
安装
可通过 npm i guide-magnifying-glass 直接安装
使用方法
一、可直接在main.js中全局引入
import { MagnifyingGlass } from 'guide-magnifying-glass'
Vue.use(MagnifyingGlass)
二、也可以在某个页面中单独引入
<template>
<MagnifyingGlass imgSrc = 'youImgFilePath'></MagnifyingGlass>
</template>
<script>
import { MagnifyingGlass } from 'guide-magnifying-glass'
export default {
components: {
MagnifyingGlass
}
}
</script>
props
- imgSrc { String } 需要展示的图片路径
- eleWidth { number } 展示区域宽度,默认 400
- eleHeight { number } 展示区域高度,默认 300
- glassRadius { number } 放大镜半径,默认 100