本文实例为大家分享了vue仿写下拉菜单功能，带有过渡效果(移动端)，供大家参考，具体内容如下
效果图
clickOutside.js 点击目标之外的地方,下拉框隐藏
export const clickOutside = {
bind(el, binding, vnode) {
function documentHandler(e) {
if (el.contains(e.target)) {
return false;
}
if (binding.expression) {
binding.value(e);
}
}
el.__vueClickOutside__ = documentHandler;
document.addEventListener("click", documentHandler);
},
update() {},
unbind(el, binding) {
document.removeEventListener("click", el.__vueClickOutside__);
delete el.__vueClickOutside__;
}
};正文html如下:
<div class="info-select">
<div class="select">
<p class="select-p" @click="showSelectUl('s1')" v-clickOutside="hideSelectUl">
<span>{{issues}}</span>
<img :src="require('../../assets/images/support/icon_xiala.png')" alt="">
</p>
<transition name="slide-fade">
<div class="select-ul" v-show="!showIssues" >
<div v-for="(item, index) in list" :key="index" >
<div>{{item.class}}</div>
<div v-for="(item1, i) in item.node" :key="i" @click="getSize('s1', item1.class, index, i)">
<p :class="{active:item == issues}">{{item1.class}}</p>
</div>
</div>
</div>
</transition>
<transition leave-active-class="slideOutRight" enter-active-class="slideInRight">
<p class="animated errP" style="position: absolute;margin:0.2rem 0 0 -3%;" v-show="form.issueErr" >{{form.issueMsg}}</p>
</transition>
</div>
<div class="select">
<p class="select-p" @click="showSelectUl('s2')" v-clickOutside="hideSelectUl2">
<span>{{issues2}}</span>
<img :src="require('../../assets/images/support/icon_xiala.png')" alt="">
</p>
<transition name="component-fade" mode="out-in">
<div class="select-ul" v-show="!showIssues2">
<p v-for="(item, index) in childList" :class="{active:item == issues2}"
:key="index" @click="getSize('s2', item.class, index)">{{item.class}}</p>
</div>
</transition>
<transition leave-active-class="slideOutUp" enter-active-class="slideInUp">
<p class="animated errP" style="position:absolute;margin:0.2rem 0 0 -3%;" v-if="form.issueErr1" >{{form.issueMsg1}}</p>
</transition>
</div>
</div>
<div class="p-bts clearafter">
<button @click="form.issueErr = !form.issueErr">p1</button>
<button @click="form.issueErr1 = !form.issueErr1">p2</button>
