<template>
    <div>
        <ul>
            <li v-for="(item,index) in data1" :key="item.id">
                <span @click.stop="toggle(index)"></span>
                <span>{{item.id}}</span>--
                <span>{{item.name}}</span>
                <div v-show="(cIndex == index) && dialog" class="modalDiaLog">dialog</div>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: '',
        data() {
            return {
                dialog:false,
                cIndex: -1,
                data1: [
                    { id: 1, name: "a" },
                    { id: 2, name: "b" },
                    { id: 3, name: "c" },
                    { id: 4, name: "d" },
                ]
            }
        },
        methods:{
            toggle(index){
                console.log(index)
                    this.cIndex = index;
                    this.dialog = !this.dialog;
                    console.log(this.dialog)
                }
        },
        created(){
            
        },
        mounted(){
        //重点
                document.addEventListener('click', (e)=> {
                    console.log(e.target)
                    if (e.target.className != 'modalDiaLog') {
                        this.dialog = false;
                    }
                })
                //如果有报错可以写
                // this.$nextTick(()=>{
                //         document.addEventListener('click', (e)=> {
                //         console.log(e.target)
                //         if (e.target.className != 'modalDiaLog') {
                //             this.dialog = false;
                //         }
                //     })
                // })
        }
    }
</script>

<style lang="scss" scoped>
    ul,
    li {
        list-style: none;
    }

    li {
        position: relative;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #000;
    }

    li span:first-child {
        display: inline-block;
        width: 10px;
        height: 10px;
        background-color: #000;
    }
    li div{
        position: absolute;
        left: 20px;
        top: 0;
        z-index: 1000;
        width: 100px;
        height: 100px;
        border: 1px solid red;
        background-color: #fff;
    }
</style>