gitakachan / bootstrap-issues

0 stars 0 forks source link

按下navlink折疊navbar #5

Open gitakachan opened 3 years ago

gitakachan commented 3 years ago

參考:https://blog.csdn.net/function__/article/details/72843722

在vue裡寫法

//nav bar的漢堡按鈕新增ref="collapseBtn"
 <button
          ref="collapseBtn"
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarNavAltMarkup"
          aria-controls="navbarNavAltMarkup"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
//mixin
export default {
  methods: {
    collapse() {
      if (window.innerWidth < 768) { //折疊斷點設為768px
        this.$refs.collapseBtn.click();
      }
    },
  },
};

//使用時引入mixin
import navBarCollapse from "@/mixins/navBarCollapse.js";
export default {
  mixins: [navBarCollapse]
}