本文实例为大家分享了vue仿写下拉菜单功能,带有过渡效果(移动端),供大家参考,具体内容如下
效果图
clickOutside。js点击目标之外的地方,下拉框隐藏
代码如下:
出口const clickOutside={
绑定,绑定(el vnode) {
函数documentHandler (e) {
如果(el.contains (e。target)) {
返回错误;
}
如果(binding.expression) {
binding.value (e);
}
}
埃尔。__vueClickOutside__=documentHandler;
文档。addEventListener(“点击”,documentHandler);
},
update () {},
解开(el绑定){
文档。removeEventListener(“点击”,el.__vueClickOutside__);
删除el.__vueClickOutside__;
}
};
正文的html如下:
& lt; div类=癷nfo-select”比;
& lt; div类="选择"比;
& lt; p class=" select-p“@click=皊howSelectUl (s1)“v-clickOutside=癶ideSelectUl”比;
& lt; span>{{问题}}& lt;/span>
& lt; img src=" https://www.yisu.com/zixun/require(“. ./. ./资产/图片/支持/icon_xiala.png”)“alt="比;
& lt;/p>
& lt;过渡name=" slide-fade比;
& lt; div类=" select-ul " v-show=" !祝辞showIssues”;
& lt; div v="(项目、索引)名单”:关键=爸甘北?
& lt; div> {{item.class}} & lt;/div>
& lt; div v=" (item1,我)项目。节点”:关键="我" @click=" getSize (item1, s1 '。在类中,指数(i)”;
& lt; p: class="{活跃:项目==问题}”在{{item1.class}} & lt;/p>
& lt;/div>
& lt;/div>
& lt;/div>
& lt;/transition>
& lt;过渡leave-active-class=" slideOutRight " enter-active-class=皊lideInRight”比;
& lt; p class="动画errP”v-show="的形式。issueErr”在{{form.issueMsg}} & lt;/p>
& lt;/transition>
& lt;/div>
& lt; div类="选择"比;
& lt; p class=" select-p“@click=皊howSelectUl (s2)“v-clickOutside=癶ideSelectUl2”比;
& lt; span> {{issues2}} & lt;/span>
& lt; img src=" https://www.yisu.com/zixun/require(“. ./. ./资产/图片/支持/icon_xiala.png”)“alt="比;
& lt;/p>
& lt;过渡name=癱omponent-fade”模式=罢蕉贰北?
& lt; div类=" select-ul " v-show=? showIssues2”比;
& lt; p v=?项目、索引)childList”: class="{活跃:条目==issues2}”
:关键="指数" @click=" getSize (s2,项目。类,指数)”在{{item.class}} & lt;/p>
& lt;/div>
& lt;/transition>
& lt;过渡leave-active-class=" slideOutUp " enter-active-class=皊lideInUp”比;
类& lt; p=v=岸璭rrP形式。issueErr1”在{{form.issueMsg1}} & lt;/p>
& lt;/transition>
& lt;/div>
& lt;/div>
& lt; div class=" p-bts clearafter”比;
& lt;按钮@click="的形式。issueErr=! form.issueErr”祝辞p1
& lt;按钮@click="的形式。issueErr1=! form.issueErr1”祝辞p2
& lt;/div>
js代码如下:
从“模型/clickoutside.js”进口{clickOutside};
出口默认{
数据(){
返回{
catogery:“飞行”,
问题:“选择类别”,
issues2:“选择问题”,
showIssues:没错,
showIssues2:没错,
列表:(
{id: 0,类:“飞行”,节点:[
{类:“1.1 a1111111111111 11111111111111”,节点:[
{类:“问题a1 # 63; "},
{类:“问题a2 # 63; '}
)},
{类:1.2 a2,节点:[
{类:“问题a3 # 63; "},
{类:“问题a4 # 63; '}
)},
)},
{id: 1、类:“酒店”,节点:[
{类:1.1 b1,节点:[
{类:“问题b1 # 63; "},
{类:“问题b2 # 63; '}
)},
{类:1.2 b2,节点:[
{类:“问题b3 # 63; "},
{类:“问题b4 # 63; '}
)},
)},
),
childList: [],
形式:{
issueMsg:“请选择一个类别”,issueErr:没错,
issueMsg1:“请选择一个问题”,issueErr1:没错,
},
}
},
方法:{
hideSelectUl () {
这一点。showIssues=true;
},
hideSelectUl2 () {
这一点。showIssues2=true;
},
showSelectUl (s) {
如果(s==s1) {
这一点。showIssues=! this.showIssues;
这一点。showIssues2=true;
其他}{
这一点。showIssues=true;
这一点。showIssues2=! this.showIssues2;
}
},
getSize (val,指数,index2) {
如果(s==s1) {
这一点。问题=val;
这一点。showIssues=true;
这一点。catogery=this.list(指数). class;
这一点。(指数)childList=this.list .node [index2] .node;
这一点。issues2=把≡裎侍狻?
}else if (s==s2) {
这一点。issues2=val;
这一点。showIssues2=true;
}
},
},
指示:{
clickOutside,
}
}
