Bulma의 햄버거 메뉴는 Vue입니다.js로 실현

16767 단어 Bulma Vue.js

개시하다

안녕하세요, 저는 평소에 서버를 담당하는seki입니다.
현재는 개인 개발로 빌보드가 제작되고 있어 UI 프레임에 볼마를 적용했다.농담하다
처음에는 공식 참고에서 복제된 머리 햄버거 메뉴가 움직이지 않았다.

조사를 해도 일본어 기사가 해결책을 찾지 못했기 때문에 간단하게 해결책을 정리하고 싶습니다.유사한 보도는 이미 qita에 투고되었다

자바스크립트를 가져오지 않으면 움직이지 않을 것 같습니다.
이번에는 베입니다.js로 한번 돌려보고 싶어요

1. Starter template에 내비게이션 표시줄 표시하기

공식 참고빠른 시작 템플릿에 표시하고 싶습니다탐색 모음.
index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello Bulma!</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css">
    <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
  </head>
  <body>
  <nav class="navbar" role="navigation" aria-label="main navigation">
    <div class="navbar-brand">
      <a class="navbar-item" href="https://bulma.io">
        <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
      </a>

      <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
      </a>
    </div>

    <div id="navbarBasicExample" class="navbar-menu">
      <div class="navbar-start">
        <a class="navbar-item">
          Home
        </a>

        <a class="navbar-item">
          Documentation
        </a>

        <div class="navbar-item has-dropdown is-hoverable">
          <a class="navbar-link">
            More
          </a>

          <div class="navbar-dropdown">
            <a class="navbar-item">
              About
            </a>
            <a class="navbar-item">
              Jobs
            </a>
            <a class="navbar-item">
              Contact
            </a>
            <hr class="navbar-divider">
            <a class="navbar-item">
              Report an issue
            </a>
          </div>
        </div>
      </div>

      <div class="navbar-end">
        <div class="navbar-item">
          <div class="buttons">
            <a class="button is-primary">
              <strong>Sign up</strong>
            </a>
            <a class="button is-light">
              Log in
            </a>
          </div>
        </div>
      </div>
    </div>
  </nav>
  </body>
</html>

브라우저에서 확인하면 머리글이 표시됩니다!!

하지만 스펀지 초밥을 눌렀을 때 햄버거 메뉴를 눌러도'응'이라고 하지 않는다.
그럼 얼른 와.js로 햄버거 메뉴 이동하세요!

Vue.js로 햄버거 메뉴 이동

먼저 CDN은 Vue입니다.js를 읽습니다.
index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello Bulma!</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css">
    <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>   <!-- 追加する行 -->
  </head>
  <body>
                           ~省略~

이렇게 하면 Vue를 사용할 수 있습니다.
이어서 nav 요소를 div로 묶는다.
index.html

<body>
  <div id="app">　　　   <!-- 追加する行 -->
      <nav class="navbar" role="navigation" aria-label="main navigation">
        <div class="navbar-brand">
        <a class="navbar-item" href="https://bulma.io">
            <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
        </a>

                            ~省略~
    </nav>
  </div>            <!-- 追加する行 -->

다음 Vue 인스턴스 생성.
index.html

<script>
var app = new Vue({
    el: '#app',
    data: {
        isOpen: false
    }
})
</script>

햄버거 메뉴를 표시하는 데 사용되는 isOpen 정의입니다.
다음은 클릭 이벤트를 설정하고 실제로 햄버거 메뉴를 열어보자.
index.html

<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="https://bulma.io">
      <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
    </a>

    <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample" @click="isOpen = !isOpen" v-bind:class="{'is-active': isOpen}">  <!-- 変更する行 -->
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </div>

  <div id="navbarBasicExample" class="navbar-menu" v-bind:class="{'is-active': isOpen}">　　　　　<!-- 変更する行 -->
  <div class="navbar-start">

                            ~省略~

이렇게 햄버거 메뉴가 움직일 수 있어요!

마지막으로 변경된 두 곳에 대한 설명을 허락해 주십시오.

수정된 첫 번째 행

<a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample" @click="isOpen = !isOpen" v-bind:class="{'is-active': isOpen}">

이 행에는 @click="isOpen = !isOpen"과v-bind:class="{'is-active': isOpen}">가 추가됐다.@click="isOpen = !isOpen" 무슨 일이 일어났는지 설명한다.@click 클릭 탐지 후 실행isOpen = !isOpen.
햄버거 메뉴를 눌렀을 때@click isopen에 저장된 진리값을 반전 처리isOpen = !isOpen한 것이다.v-bind:class="{'is-active': isOpen}">에서는 isOpen이true였을 때class에is-active를 추가했다.

수정된 두 번째 행

<div id="navbarBasicExample" class="navbar-menu" v-bind:class="{'is-active': isOpen}">여기도 아까처럼 추가v-bind:class="{'is-active': isOpen}".
햄버거 메뉴를 클릭하면 이 요소의class에 추가is-active됩니다.

총결산

많이 썼지만 하는 일은 요소의class에 추가하거나 삭제하는 것is-active에 불과하다.
Bulma는 어떤 자바스크립트 환경에도 적응할 수 있고 유연하고 편리해요

Reference

이 문제에 관하여(Bulma의 햄버거 메뉴는 Vue입니다.js로 실현), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/seki19/items/649b317c10e84fb36e06

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

전단, 공장 모델 창설 대상, 구조 함수와 원형 모델

Vue.정보

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다