vue仿淘宝放大镜插件的使用

1.首先下载PicZoom插件

npm install vue-piczoom --save

2.使用时注意：原来img标签要改为pic-zoom,并且属性src要改为url

html部分代码：

<template><div><div class="box"><pic-zoom :url="imgurl" :scale="3"></pic-zoom></div><div class="list"><ul><li v-for="(item,index) in imagesList" :key="index" @mouseenter="changeImage(index)"><img :src="item" /></li></ul></div></div>
</template>

js部分代码：（1）引入PicZoom

（2）如果使用的图片是本地图片，则要加上require来引入。

  import PicZoom from "vue-piczoom"

<script>import PicZoom from "vue-piczoom"export default {name: "FooterShow",data(){return{imgurl:require("../assets/images/pic1.jpg"),imagesList:[require("../assets/images/pic1.jpg"),require("../assets/images/pic2.jpg"),require("../assets/images/pic3.jpg"),]}},components:{PicZoom},methods:{changeImage:function (index) {this.imgurl=this.imagesList[index];}}}
</script>

css部分代码：

<style scoped>
.box{width: 400px;height: 320px;
}
.list{width: 400px;height: 130px;
}.list ul{width: 400px;display: flex;justify-content: space-around;}.list ul li{width:120px;height: 90px;background-color: white;margin-top: 15px;}.list ul li img{width: 120px;height: 90px;}
</style>

这样就可以作为成一个组件来使用了。

效果图：

vue仿淘宝放大镜插件的使用相关推荐

vue仿淘宝放大镜插件 vue-piczoom的使用问题
vue仿淘宝放大镜插件 vue-piczoom npm install vue-piczoom--save //下载放大镜插件使用的话就是直接引入 import picZoom from 'vue- ...
淘宝放大镜插件（vue-piczoom）
Build Setup 使用步骤 # 安装 install npm install vue-piczoom --save # 使用 use --script import PicZoom from ' ...
Vue 仿淘宝购物车
效果图: 我们只是做演示,其中的数据应该从后台来取得,这里我们模拟几条数据来显示. 页面布局: <div id="shop_car"><section class ...
用vue仿淘宝商品筛选
css略,点击牛仔裤添加到已选条件,点击x取消选择 <!DOCTYPE html> <html lang="en"> <head><met ...
vue仿淘宝京东商品多条件筛选（vue实现）
<template><div id="warp">你选择的是:<mark v-for="(item,index) in arr"& ...
vue仿淘宝结账订单
<template> <div class= "container" > <div class= "checkout-title&q ...
vue仿淘宝购物车的实现
先看效果图实现的功能有: 1.选中店铺,店铺下的商品全选中 2.店铺下的商品全选中,相对应的店铺也会被选中 3.所有的店铺全选中,底部的全选也会被选中 4.所有的商品全选中,底部的全选也会被选中 5 ...
高仿淘宝分页:jQuery分页插件kkpager-Array-专题视频课程
高仿淘宝分页:jQuery分页插件kkpager-503人已学习课程介绍天底下万能的分页课程收益让所有人不再为分页所苦恼讲师介绍 Array 更多讲师课程 ...
js仿淘宝主图放大镜功能
js仿淘宝主图放大镜功能演示地址下载地址

vue仿淘宝放大镜插件的使用

vue仿淘宝放大镜插件的使用相关推荐

最新文章

热门文章