Javascript 使用target.event在Vuejs中单击外部时如何关闭下拉列表？

const-app=新的Vue({
el:“应用程序”，
名称：'aselect'，
数据：{
值：“选择一个水果”，
清单：[“橙子”、“苹果”、“猕猴桃”、“柠檬”、“菠萝”]，
可见：假
},
方法：{
切换（）{
this.visible=！this.visible；
},
选择（选项）{
该值=选项；
}
}
})

自定义选择下拉列表
{{value}}

{{item}

我找到了解决您问题的方法。遵循以下步骤 首先，将

box

类添加到切换下拉列表的框中的每个元素

<div id="app">  
  <h1>Custom Select Dropdown</h1>

  <div class="aselect" :data-value="value" :data-list="list">
        <div class="selector box" @click="toggle()">
            <div class="label box">
                    <span class="box">{{ value }}</span>
            </div>
            <div class="arrow box" :class="{ expanded : visible }"></div>
            <div :class="{ hidden : !visible, visible }">
                <ul>
                    <li :class="{ current : item === value }" v-for="item in list" @click="select(item)">{{ item }}</li>
                </ul>
            </div>
        </div>
    </div>
</div>

检查这支笔：

    const app = new Vue({
    el: "#app",
        name: 'aselect',
        data: {
            value: 'Select a Fruit',
            list: ["Orange","Apple","Kiwi", "Lemon", "Pineapple"],
            visible: false
        },
        methods: {
            toggle() {
                this.visible = !this.visible;
            },
            select(option) {
                this.value = option;
            },
            handleClick(e){
               const classname = e.target.className;
               if(this.visible && !classname.includes("box")){
                  this.visible = false;
               }
            }
        },
    created () {
      window.addEventListener('click', this.handleClick);
    },
    destroyed () {
      window.removeEventListener('click', this.handleClick);
    },
})