vue的tab页面切换,vuetab栏切换
本文主要详细介绍了vue的tab切换的放大镜效果。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。
本文分享vue实现tab切换的放大镜效果的具体代码，供大家参考。具体内容如下
事不宜迟，先看效果图。
1.我这里没有加蒙版层，需要的话自己加。
2.图片建议使用4k高清图片，否则放大后会模糊，影响观看心情。
3.不拘泥于风格，只要注意实现原则就可以了。
4.可能我的方法不简单，但也是一种思路。请参考。
实现原理
第肯定需要vue.js次
秒需要两张图片
对于左边的真实图片，右边的放大效果图其实一直都是存在的，只不过鼠标移入现实，鼠标移出消失了。
放大图不是真的放大。而是在img标签上涂一个父元素，img标签的宽度和高度都设置为100%以上。至于放大图，你可以随心所欲的设置，然后设置父元素超越隐藏，然后设置display:none隐藏该元素，然后在鼠标移入左侧大图时显示。
至于如何让鼠标移动，放大的图片也会移动，就是获取鼠标在元素上移动的位置，用鼠标移动事件触发，然后设置放大图片的相对定位，再将鼠标移动的X轴位置和Y轴位置分别赋给大图的左边和上边。
-万能分割线-
简单来说，放大的图片已经存在，只是设置为隐藏，鼠标移入后再显示，然后将放大图片的相对定位值赋给鼠标的位置，这就是放大镜的实现原理。
选项卡切换更容易。
需要vue的v秀来实现。
在data中创建一个数组来存储数组中的图像地址，并通过v-for将图像地址遍历到img标签。
在数据中创建一个nowendex，将图像索引分配给nowendex，并通过v-show="nowendex==index "控制图像的显示和隐藏
以下是代码。
！声明文档类型
html lang=en
头
meta charset=UTF-8
meta name= viewport content= width=device-width，initial-scale=1.0
标题文档/标题
脚本src=。/vue/vue . js /脚本
风格
正文{
边距：0；
填充：0；
背景色：# ccc
}
#app {
身高：245px
宽度：556px
/*边框：3px实心；*/
位置：相对；
保证金：200px自动；
框大小：边框-框；
}。内容{
高度：150px
宽度：250px
边框-底部：5px纯白；
}。imgs {
高度：90px
宽度：248px
框大小：边框-框；
显示器：flex
justify-content:space-between；
}。imger {
身高：99%；
宽度：49.6%；
}。内容{
身高：100%；
宽度：100%；
}。活动{
box-shadow: 0px 8px 8px黑色；
不透明度：0.7；
}。fdj {
显示：无；
}。区块{
高度：240px
宽度：300px
位置：绝对；
top:0px；
右：-10px；
溢出：隐藏；
z指数：100；
边框半径：8px
}。阻止{
身高：600%；
宽度：600%；
位置：相对；
}
/风格
/头
身体
div id=应用程序
div class= content @ mouse over= over @ mouseout= out @ mousemove= move($ event)
img :src=item v-for=(item，index)在url v-show=index==nowindex 中
/div
div class=imgs
img :src=item v-for=(item，index)in URL class= imger @ click= change(index):class= { active:index==now index }
/div
div:class= block
img :src=item v-for=(item，index)在URL v-show= index==now index :style= positions 中
/div
/div
脚本
var vm=new Vue({
埃尔： #app ，
数据：{
//图片地址
网址：[ 1000 ,。/img/9.jpg]，
nowindex: 0，
区块：“fdj”，
//相对定位的值
职位：{
top: 0，
左侧：0
}
},
方法：{
变更（索引){
//图片的切换
this.nowindex=index
},
over() {
//通过更改类名实现显示隐藏
this.blocks=block
},
out() {
this.blocks=fdj
},
移动(e) {
//将鼠标移动位置赋值给图片相对定位的值，实现鼠标移动图片移动
这个。位置。top=(e . offsety *-7.9)" px "；
这个。位置。left=(e . offsetx *-6)" px "；
}
},
})
/脚本
/body
/html
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。