Vue中渲染到其他页面时如何关闭下拉菜单

Question

我有一个购物车下拉菜单，如下所示：

所以我的问题是每当我转到下一页或做某事时，它都会保持打开状态。但是当我转到另一个页面时，我希望它关闭。为此，我的组件在这里：

<template>
    <div class="custom-select" :tabindex="tabindex" @blur="open = false">
        <div class="selected" :class="{ open: open }" @click="open = !open">
            {{ selected.name }}
        </div>
        <div class="items" :class="{ selectHide: !open }">
            <div v-if="defaultValue != ''">{{ defaultValue }}</div>
            <div v-for="(option, i) of options" :key="i"
                 @click=" selected = option; open = false; $emit('input', option);">
                {{ option.name }}
            </div>
        </div>
    </div>
</template>


<script>

export default {
    props: {
        options: {
            type: Array,
            required: true,
        },
        defaultValue: {
            type: String,
            required: false,
            default: "Choose an option",
        },
        tabindex: {
            type: Number,
            required: false,
            default: 0,
        },
    },
    data() {
        return {
            open: false,
            selected: this.setDefaultValue(),
        };
    },
    mounted() {
        this.$emit("input", this.selected);
    },
    methods: {
        setDefaultValue() {
            if (this.defaultValue == '' && this.options.length > 0) {
                return this.options[0];
            }
            return {name: this.defaultValue};
        }
    }
};
</script>

我愿意接受任何形式的解决方案来解决这个问题。

Answer 1

您可以创建一个“点击外部”指令，只要您在菜单外部点击，它就会执行关闭菜单功能。然后，当单击菜单中的任何操作时，您也会调用关闭菜单函数。

main.js 中的示例指令：

Vue.directive('click-outside', {
  bind: function (el, binding, vnode) {
    el.clickOutsideEvent = function (event) {
      // Check that click was outside the el and its children
      if (!(el === event.target || el.contains(event.target))) {
        // Call the specified method
        vnode.context[binding.expression](event)
      }
    }
    document.body.addEventListener('click', el.clickOutsideEvent)
    document.body.addEventListener('touchend', el.clickOutsideEvent)
  },
  unbind: function (el) {
    document.body.removeEventListener('click', el.clickOutsideEvent)
    document.body.removeEventListener('touchend', el.clickOutsideEvent)
  }
})

在您的菜单中：

<div v-click-outside="closeMenu"></div>