好资源导航 » 文章资讯 » vue实现带过渡效果的下拉菜单功能

vue实现带过渡效果的下拉菜单功能

2023-08-01 01:33:03 50

本文实例为大家分享了vue仿写下拉菜单功能，带有过渡效果(移动端)，供大家参考，具体内容如下

效果图

clickOutside.js点击目标之外的地方,下拉框隐藏

代码如下:

exportconstclickOutside={
bind(el,binding,vnode){
functiondocumentHandler(e){
if(el.contains(e.target)){
returnfalse;
}
if(binding.expression){
binding.value(e);
}
}
el.__vueClickOutside__=documentHandler;
document.addEventListener("click",documentHandler);
},
update(){},
unbind(el,binding){
document.removeEventListener("click",el.__vueClickOutside__);
deleteel.__vueClickOutside__;
}
};

正文html如下:




{{issues}}





{{item.class}}

{{item1.class}}

p1 p2

js代码如下:

import{clickOutside}from'Models/clickoutside.js';
exportdefault{
data(){
return{
catogery:'flight',
issues:"SelectCategory",
issues2:"SelectIssue",
showIssues:true,
showIssues2:true,
list:[
{id:0,class:'flight',node:[
{class:'1.1a111111111111111111111111111',node:[
{class:'问题a1?'},
{class:'问题a2?'}
]},
{class:'1.2a2',node:[
{class:'问题a3?'},
{class:'问题a4?'}
]},
]},
{id:1,class:'hotel',node:[
{class:'1.1b1',node:[
{class:'问题b1?'},
{class:'问题b2?'}
]},
{class:'1.2b2',node:[
{class:'问题b3?'},
{class:'问题b4?'}
]},
]},
],
childList:[],
form:{
issueMsg:"Pleaseselectacategory",issueErr:true,
issueMsg1:"Pleaseselectaissue",issueErr1:true,
},
}
},
methods:{
hideSelectUl(){
this.showIssues=true;
},
hideSelectUl2(){
this.showIssues2=true;
},
showSelectUl(s){
if(s=='s1'){
this.showIssues=!this.showIssues;
this.showIssues2=true;
}else{
this.showIssues=true;
this.showIssues2=!this.showIssues2;
}
},
getSize(s,val,index,index2){
if(s=='s1'){
this.issues=val;
this.showIssues=true;
this.catogery=this.list[index].class;
this.childList=this.list[index].node[index2].node;
this.issues2='SelectIssue';
}elseif(s=='s2'){
this.issues2=val;
this.showIssues2=true;
}
},
},
directives:{
clickOutside,
}
}

css代码如下:

.info-select{
display:flex;
justify-content:space-between;
.select{
width:40%;
position:relative;
padding:0.1rem3%0.1rem;
vertical-align:top;
font-size:0.15rem;
border-radius:2px;
background:#fff;
border-top:1pxsolid#ddd;
border-bottom:1pxsolid#ddd;
border-right:1pxsolid#ddd;
}
.select:last-child{
border-right:0;
border-top:1pxsolid#ddd;
border-bottom:1pxsolid#ddd;
border-left:1pxsolid#ddd;
}
.select-p{
position:relative;
height:0.21rem;
line-height:0.21rem;
span{
font-size:0.16rem;
display:inline-block;
width:90%;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
img{
display:block;
width:0.12rem;
position:absolute;
right:0;
top:0;
vertical-align:middle;
}
}
.select-ul{
width:93.5%;
padding:0.12rem3%;
position:absolute;
top:0.42rem;
left:0;
z-index:12;
background:#fff;
border:1pxsolid#eee;
p{
padding:0.1rem00.1rem0.1rem;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
p:hover{
background:#eee;
}
p.active{
background:#eee;
}
}
.errP{
color:#f00;
}
}
.p-bts{
margin-top:0.4rem;
zoom:1;//zoom(IE转有属性)可解决ie6,ie7浮动问题
button{
width:1.5rem;
height:0.4rem;
background:#ffa000;
float:left;
color:#fff;
font-size:0.25rem;
border-radius:2px;
}
button:last-child{
float:right;
}
}

.component-fade-enter-active,.component-fade-leave-active{
transition:opacity.3sease;
}
.component-fade-enter,.component-fade-leave-to
/*.component-fade-leave-activeforbelowversion2.1.8*/{
opacity:0;
}
//cssanimate
.slide-fade-enter-active{
transition:all.2sease-in;
}
.slide-fade-leave-active{
transition:all.2scubic-bezier(1.0,0.5,0.8,1.0);
}
.slide-fade-enter,.slide-fade-leave-to{
/*.slide-fade-leave-activeforbelowversion2.1.8*/
transform:translateY(20px);
opacity:0;
}

//bounce
.bounce-enter-active{
animation:bounce-in.2s;
}
.bounce-leave-active{
animation:bounce-in.1sreverse;
}
@keyframesbounce-in{
0%{
transform:scale(0);
}
50%{
transform:scale(1);
}
100%{
transform:scale(1);
}
}

查看完整代码

更多教程点击《Vue.js前端组件学习教程》，欢迎大家学习阅读。

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

vue实现带过渡效果的下拉菜单功能

热门推荐

随机推荐