javascript - 如何使用 Tailwind 和 Vue.js 动态显示移动菜单？

Question

我正在尝试使用 Tailwind CSS 和 Vue.js 构建响应式菜单。目前我有这个模板:

<template>
<nav class="flex items-center justify-between flex-wrap bg-pink-100 p-6">
    <div class="flex items-center flex-shrink-0  mr-6">
        <span class="font-semibold text-xl tracking-tight">Pixie</span>
    </div>
    <div class="block md:hidden" >
        <button @click='clickMenu' class="flex items-center px-3 py-2 border rounded" >
        <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
        </button>
    </div>
    <div class="w-full flex-grow md:flex md:items-center md:w-auto" v-if="menuVisible">
        <div class="text-sm md:flex-grow">
        <a href="#responsive-header" class="block mt-4 md:inline-block md:mt-0 hover:text-white mr-4">
            Features
        </a>
        <a href="#responsive-header" class="block mt-4 md:inline-block md:mt-0  hover:text-white mr-4">
            Pricing
        </a>
        <a href="#responsive-header" class="block mt-4 md:inline-block md:mt-0  hover:text-white">
            Blog
        </a>
        </div>
        <div>
        <a href="#" class="inline-block text-sm px-4 py-2 leading-none border rounded  text-white bg-blue-500 hover:border-transparent mt-4 md:mt-0">Sign Up</a>
        <a href="#" class="inline-block text-sm px-4 py-2 leading-none border rounded  hover:border-transparent mt-4m d:mt-0">Log In</a>
        </div>
    </div>
</nav>
</template>

使用这个 Javascript:

<script>
export default {
    data: function() {
        return {
            menuVisible: true
        }
    },
    methods: {
        clickMenu: function() {
            this.menuVisible = !this.menuVisible
        }
    }

}
</script>

我只想在断点到达 Tailwind 上的“sm”时隐藏移动菜单。这意味着用户必须单击菜单按钮才能看到菜单，我认为这是移动设备上的预期行为。

我不想构建 2 个在不同断点上显示的单独菜单，因为我想避免重复代码。有没有办法在 Vue.js 中访问 Tailwind 的当前断点？这意味着我可以将 menuVisible 设置为计算属性，该属性仅在断点为桌面或平板电脑或用户单击菜单时才允许它可见。

或者还有其他更好的方法吗？

感谢您的帮助!

Answer 1

你可以在你的应用程序中为它写一个插件并导入它，我使用的是 nuxt，这对我有用

export default (context, inject) => {
  const burger = () => {
    const menu = document.querySelector("#menu");

    if (menu.classList.contains("hidden")) {
      menu.classList.remove("hidden");
    } else {
      menu.classList.add("hidden");
    }
  };
  inject("burger", burger);
  context.$burger = burger;
};