Javascript 单击菜单项后如何关闭下拉列表
我有一个使用NUXT JS和tailwind CSS的下拉菜单 但是nuxt js的问题是,由于它不使用SSR更改页面,所以下拉列表不会关闭 单击菜单项时如何关闭下拉列表 这是模板Javascript 单击菜单项后如何关闭下拉列表,javascript,vue.js,nuxt.js,tailwind-css,Javascript,Vue.js,Nuxt.js,Tailwind Css,我有一个使用NUXT JS和tailwind CSS的下拉菜单 但是nuxt js的问题是,由于它不使用SSR更改页面,所以下拉列表不会关闭 单击菜单项时如何关闭下拉列表 这是模板 <!-- dropdown --> <button class="mt-1 block px-2 py-1 text-white font-semibold rounded hover:bg-gray-800 sm:mt-0 sm:ml-2"
<!-- dropdown -->
<button class="mt-1 block px-2 py-1 text-white font-semibold rounded hover:bg-gray-800 sm:mt-0 sm:ml-2"
type="button" v-on:click="toggleDropdown()" ref="btnDropdownRef">
Applications
</button>
<div v-bind:class="{'hidden': !dropdownPopoverShow, 'block': dropdownPopoverShow}"
class="bg-gray-800 w-full md:w-1/5 text-white z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1"
ref="popoverDropdownRef">
<NuxtLink class="mt-1 font-semibold block px-2 py-1 text-white rounded hover:bg-gray-800 sm:mt-0 sm:ml-2" to="/applications/education">
education
</NuxtLink>
<NuxtLink class="mt-1 font-semibold block px-2 py-1 text-white rounded hover:bg-gray-800 sm:mt-0 sm:ml-2" to="/applications/lifescience">
life sciences
</NuxtLink>
<NuxtLink class="mt-1 font-semibold block px-2 py-1 text-white rounded hover:bg-gray-800 sm:mt-0 sm:ml-2" to="/applications/education">
media
</NuxtLink>
<NuxtLink class="mt-1 font-semibold block px-2 py-1 text-white rounded hover:bg-gray-800 sm:mt-0 sm:ml-2" to="/">
industries
</NuxtLink>
<NuxtLink class="mt-1 font-semibold block px-2 py-1 text-white rounded hover:bg-gray-800 sm:mt-0 sm:ml-2" to="/">
agriculture
</NuxtLink>
</div>
应用
教育
生命科学
媒体
行业
农业
这是剧本
<script>
import {
createPopper
} from "@popperjs/core";
export default {
data() {
return {
isOpen: false,
dropdownPopoverShow: false,
}
},
methods: {
toggleDropdown: function () {
if (this.dropdownPopoverShow) {
this.dropdownPopoverShow = false;
} else {
this.dropdownPopoverShow = true;
createPopper(this.$refs.btnDropdownRef, this.$refs.popoverDropdownRef, {
placement: "bottom-start"
});
}
}
}
}
</script>
进口{
createPopper
}来自“@popperjs/core”;
导出默认值{
数据(){
返回{
伊索彭:错,
dropdownPopoverShow:错误,
}
},
方法:{
toggleDropdown:函数(){
如果(此.dropdownPopoverShow){
this.dropdownPopoverShow=false;
}否则{
this.dropdownPopoverShow=true;
createPopper(this.$refs.btnDropdownRef,this.$refs.popOverdopDownRef{
位置:“底部开始”
});
}
}
}
}
您可以使用Vue路由器实例上的afterEach
挂钩,设置每次更改页面时运行的方法。我建议将其设置为Nuxt中的插件,并将dropdownPopoverShow从nav组件移动到商店中
methods: {
toggleDropdown() {
this.$store.commit('toggleDropdown')
}
}
将dropdownPopoverShow
移动到存储中,以便您可以在导航组件之外引用它
export const state = () => ({
dropdownPopoverShow: false
})
export const mutations = {
toggleDropdown(state) {
// no need for an 'if/then', just toggle the Boolean
state.dropdownPopoverShow = !state.dropdownPopoverShow
},
hideDropdown(state) {
state.dropdownPopoverShow = false
}
}
在导航组件中,调用存储中的变异
methods: {
toggleDropdown() {
this.$store.commit('toggleDropdown')
}
}
最后,创建一个插件,在每次路由更改后将dropdownPopoverShow设置为false
// plugins/hideDropdown.js:
export default async ({ app, store }) => {
app.router.afterEach((to, from) => {
store.commit('hideDropdown')
});
}
请记住将插件添加到nuxt配置中:
plugins: [ { src: '~/plugins/hideDropdown.js', mode: 'client' } ]
我最终使用了观察路线的方法
watch: {
'$route' () {
// this will close the dropdown
this.dropdownPopoverShow = false,
// this will close the mobile menu on page change
this.isOpen = false
}
如果我正确理解了您的问题,那么您可能正在寻找类似的
…