有没有办法通过单击外部来关闭 vue 组件？

Question

我正在寻找一种方法来关闭一个组件，当它在元素的外部单击时。

我尝试了一个addEventListener. 这会关闭组件，但在关闭后它不会再次打开。

window.addEventListener('click', function(e){

if (document.getElementById('shopcartpreview').contains(e.target)){
console.log("Clicked in Box");


} else{
console.log("Clicked outside Box");
$('#shopcartpreview').hide();
 }
 })

有没有办法做到这一点？

<template>
    <div id="shopcartpreview"  v-if="carthover">
        <div class="cartitem" v-for="item in cartitems">
            <div class="cartitempic"><img class="productImg" width="80px" height="80px" v-bind:src="'assets/products/' + item.image"></div>
            <div class="cartitemdetails">
                <div class="cartitemname">{{item.name}}</div>
                <div class="cartitemqty">1 X </div>
                <div class="cartitemprice">€{{item.unit_price}}</div>
            </div>
            <div class="cartitemdelete">
                <img src="assets/images/icon-bin.png" width="15px" height="15px">
            </div>
        </div>

        <div class="carttotal">
            <div class="carttotaltext">TOTAL:</div>
            <div class="carttotalprice">€2,860.00</div>
        </div>
        <div class="cartcheckouttbn">PROCEED TO CHECKOUT</div>
        <div class="viewcart">VIEW CART</div>



    </div>    
</template>
<script>
    module.exports = {
        data: function () {
                return{ 
                    cartitems: 0,
                    carthover: false,
                }
            },
            created(){
            EventBus.$on('addToCart', (payload) =>{
                this.cartitems = payload
            }),
            EventBus.$on('mouseover', (carthover) =>{
            this.carthover = carthover
            })
        }
    }
</script>

Answer 1

我在div组件的末尾创建了一个元素，如下所示：

<div v-if="isPopup" class="outside" v-on:click="away()"></div>

其中.outsideclass 在 CSS 中指定如下：

.outside {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0px;
  left: 0px;
}

并且away()是 Vue 实例中的一个方法：

away() {
 this.isPopup = false;
}

很简单，效果很好。

Answer 2

演示小提琴：https://jsfiddle.net/bq8m4fhe/

创建一个 clickoutside 指令... 检测点击外部元素

module.exports = {
    data: function() {
        return {
            cartitems: 0,
            carthover: false
        };
    },
    directives: {
        clickoutside: {
            bind: function(el, binding, vnode) {
                el.clickOutsideEvent = function(event) {
                    // here I check that click was outside the el and his childrens
                    if (!(el == event.target || el.contains(event.target))) {
                        // and if it did, call method provided in attribute value
                        vnode.context[binding.expression](event);
                    }
                };
                document.body.addEventListener("click", el.clickOutsideEvent);
                document.body.addEventListener("touchstart", el.clickOutsideEvent);
            },
            unbind: function(el) {
                document.body.removeEventListener("click", el.clickOutsideEvent);
                document.body.removeEventListener("touchstart", el.clickOutsideEvent);
            },
            stopProp(event) {
                event.stopPropagation();
            }
        }
    },
    created() {
        EventBus.$on("addToCart", payload => {
            this.cartitems = payload;
        }),
        EventBus.$on("mouseover", carthover => {
            this.carthover = carthover;
        });
    }
};

像这样使用该指令。

<div id="shopcartpreview"  v-if="carthover" v-clickoutside="SHOPPING_CART_HIDE_FUNCTION">