鍍金池/ 問答/HTML/ vue 怎么實現(xiàn)點擊出現(xiàn)側(cè)邊欄之后，再點擊空白地方側(cè)邊欄消失？

vue 怎么實現(xiàn)點擊出現(xiàn)側(cè)邊欄之后，再點擊空白地方側(cè)邊欄消失？

圖片描述

<div class="scan" v-on:click="show">
    <svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xiangji_"></use>
    </svg>
</div>

<div id="cam" v-show="flag">
    <button @click="back">返回</button>
    相機頁面
</div>

js代碼

var vm=new Vue({
        el:'#app',
        data:{
            flag:false,
        },
        methods:{
            show(){
                var sp=document.getElementById("cam");
                if(sp){
                    if(!sp.contains(event.target)){
                        this.flag=!this.flag
                    }
                }
            },
            back(){
                this.flag=!this.flag
            }
        }
    })

在網(wǎng)上找的這個方法似乎不行，只對當前按鈕有效。求大神指導

    var sp=document.getElementById("cam");
                if(sp){
                    if(!sp.contains(event.target)){
                        this.flag=!this.flag
                    }
                }
回答
編輯回答
傲寒
<div class="scan" @click.stop="show">
    <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-xiangji_"></use>
    </svg>
</div>

<div id="cam" v-show="flag">
    <button @click="back">返回</button>
    相機頁面
</div>
mounted() {
    $('#cam').on('click', (event) => event.stopPropagation());
    $(document).on('click', () => {
        this.back();
    });
},
methods: {
    show() {
        this.flag = true;
    },
    back(){
        this.flag = false;
    }
}
2017年1月27日 11:55