Demo 在线地址：
https://sx00xs.github.io/test/36/index.html
---------------------------------------------------------------
ide: vscode
文件格式：.vue
解析：（待补）
<template>
<div class="search">
<div class="box" v-clickoutside="handleClose">
<form>
<span class="select" @click.prevent="handleClick">{{message}}</span>
<a href="#">搜索</a>
</form>
</div>
<ul class="sub" v-show="show">
<li v-for="item in lists" :key="item.mes" :class="{hover:item.isActive}"
@mouseover="handleOver(item)"
@mouseout="handleOut(item)"
@click="handleSubClick(item)"
>
{{item.mes}}
</li>
</ul>
</div>
</template>
<script>
export default {
data(){
return{
message:'请选择游戏名称',
show:false,
lists:[
{
mes:'地下城与勇士',
isActive:false
},
{
mes:'魔兽世界（国服）',
isActive:false
},
{
mes:'魔兽世界（台服）',
isActive:false
},
{
mes:'热血江湖',
isActive:false
},
{
mes:'神鬼传奇',
isActive:false
},
{
mes:'大话西游II',
isActive:false
},
{
mes:'QQ幻想世界',
isActive:false
},
]
}
},
methods:{
handleClose(){
this.show=false
},
handleClick(){
this.show=this.show===false ? true : false
},
handleOver(item){
item.isActive=true
},
handleOut(item){
item.isActive=false
},
handleSubClick(item){
this.message=item.mes;
this.show=false
},
},
directives:{
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);
},
unbind(el,binding){
document.removeEventListener('click',el.__vueClickOutside__);
delete el.__vueClickOutside__;
}
}
}
}
</script>