我正在尝试使引导导航栏折叠在移动设备上工作,因为它根本不起作用。请不要在代码中提供其他依赖项,例如 vue-bootstrap 或实现 jquery。我正在尝试通过这种方式达到结果:
<template>
<nav class="navbar navbar-expand-lg navbar-light bg-light" v-bind:class=" { 'navbarOpen': show }">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"
v-on:click="toggleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent"
v-bind:class="{ in: show }"
>
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
</template>
<script>
export default {
name: 'Header',
props: {
msg: String,
},
methods: {
toggleNavbar() {
this.navbarOpen = !this.navbarOpen;
}
},
computed: {
}
</script>
我已经添加了
toggleNavbar() {
this.navbarOpen = !this.navbarOpen;
}
这个函数,但我认为 HTML 中的上述绑定是它不起作用的原因。如何修复它以及我应该在哪里添加 navbarOpen = false;默认模式?
我没有看到
show
变量在任何地方定义。切换 show
的值,或者引用名为 navbarOpen
... 的数据变量
props: {
msg: String
},
data() {
return {
show: true
}
},
methods: {
toggleNavbar() {
this.show = !this.show;
}
}
在 bootstrap 4 和 5 中,
collapse
class 是切换导航栏的关键。
因此,切换机制可以通过以下方式实现:
// Inside Vue script tag with Vue 2 Options API
<script>
export default {
data() {
return {
navbarOpen: false,
}
},
methods: {
toggleNavbar() {
this.navbarOpen = !this.navbarOpen;
}
}
}
</script>
// Inside Vue script tag with Vue 3 Composition API
<script>
import { ref } from 'vue';
export default {
setup() {
const navbarOpen = ref(false);
const toggleNavbar = () => {
navbarOpen.value = !navbarOpen.value
}
return {
navbarOpen,
toggleNavbar
}
}
}
</script>
并在模板中,绑定您想要折叠的容器元素:
// Template binding dynamically the 'collapse' class
<div
class="navbar-collapse"
:class="navbarOpen ? 'null' : 'collapse'"
>
</div>
最后,将以下内容添加到需要切换导航栏的 HTML 元素中,例如
<button>
、<a>
链接或 <router-link>
:
// Template elements aiming to toggle the collapse data property
<li class="nav-item">
<a class="nav-link" href="#" v-on:click="toggleNavbar">Link</a>
</li>
请注意,当遵循使用 方法 + CSS 折叠内容的策略时,与 Bootstrap
相关的
data-bs-toggle
和
data-bs-target
属性应被删除。
否则 data-bs-toggle
的行为将与添加到 Vue 脚本中的 toggleNavbar
方法冲突,导致应用程序切换两次并产生其他奇怪的行为。