Vue练习三十六：05_01_模拟select控件

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>