由于是基于jquery插件实现的,所以需要在项目中引入jquery(vue项目可参考jquery引入)
页面代码:
<template>
<div>
<img id="imgs" class="imgs" src="./assets/img/1.jpg" />
</div>
</template>
<script>
import loupe from './assets/js/loupe.js'
export default {
name: "Photoloupe",
data(){
return{
}
},
methods:{
},
mounted() {
loupe.photoLoupe("imgs",200,4,50);
}
}
</script>
<style>
.imgs{
width: 800px;
}
</style>
3、效果展示