從無到有構建vue實戰專案(六)

啃土豆的菜鳥發表於2019-07-21

十、徒手擼一個vue下拉左側二級導航

  1. 先附上最終效果圖:

    從無到有構建vue實戰專案(六)

  2. vue程式碼:

    <div
                          class="dropdown-menu-explore"
                          v-on:mouseover="addDropdownContent(this)"
                          v-on:mouseout="removeDropdownContent(this)"
                        >
                          <span class="dropdown-menu">探索</span>
                          <span class="dropdown-menu-arrow"></span>
                          <div class="dropdown-content" v-bind:style="{display:activeDisplay}">
                            <div class="dropdown-menu-content" id="dropdown-menu-content">
                              <ul>
                                <li
                                  v-for="(list,index) in lists"
                                  v-bind:key="index"
                                  v-on:mouseover="addListContent(index)"
                                  v-on:mouseout="removeListContent(this)"
                                >
                                  <router-link to>{{list.message}}</router-link>
                                  <ul class="dropdown-menu-content-list" v-show="index===isShow">
                                    <li v-for="(item,index) in list.childs" v-bind:key="index">
                                      <router-link to>{{item.subTitle}}</router-link>
                                    </li>
                                  </ul>
                                </li>
                              </ul>
                            </div>
                          </div>
                        </div>
  3. 事件:

    methods: {
        handleSelect: function() {},
        //滑鼠覆蓋顯示下拉內容
        addDropdownContent: function() {
          this.activeDisplay = "block";
          return this.activeDisplay;
        },
        //滑鼠移出隱藏內容
        removeDropdownContent: function() {
          this.activeDisplay = "none";
          return this.activeDisplay;
        },
        addListContent: function(index) {
          this.isShow = index;
        },
        removeListContent: function() {
          this.isShow = !this.isShow;
        }
      },
      mounted: function() {
        this.isShow = -1;
      }
  4. 資料

    activeDisplay: "none",
          isShow: 0,
          lists: [
            {
              id: 1,
              message: "理學",
              childs: [{ subTitle: "1", subMessage: "這是子選單資訊" }]
            },
            {
              id: 2,
              message: "工學",
              childs: [{ subTitle: "2", subMessage: "這是子選單資訊" }]
            },
            { id: 3, message: "計算機" },
            { id: 4, message: "管理" },
            { id: 5, message: "經濟學" },
            { id: 6, message: "外語" },
            { id: 7, message: "四六級" },
            { id: 8, message: "期末衝刺" },
            { id: 9, message: "考研" },
            { id: 10, message: "更多" }
          ]

十一、引入基於vue的支援markdown語法的編輯器---mavon-editor

  1. 基於mavon-editor的絲滑和簡潔,我選擇引入它作為我專案的一部分,先附上官網地址:https://www.zhystar.com/

  2. 接下來一步步將其引入我的專案中:

    1. 首先通過npm安裝:

      npm install mavon-editor --save
    2. 全域性註冊:

十二、錯誤總結(二)

  1. 當我將mavon-editor引入元件中後,出現了一個莫名其妙的錯誤:

    從無到有構建vue實戰專案(六)

    經過排查,是因為我將元件name值與import引入的元件重名了,只需要對name值做出修改即可:

    從無到有構建vue實戰專案(六)

從無到有構建vue實戰專案(六)

十三、與後端的第一次資料互動測試

  1. 登入頁面基本完成後,開始進行前後端資料互動測試,專案中使用了axios,後端用了PHP,前端發出請求後,後端返回資料,一度報錯,原因是內有解析json資料,解析了json資料後,成功解決問題。

  2. 當我在測試時,我有這樣一個需求,即通過element的el-input當Enter鍵按下時,可以觸發事件,但是沒有任何效果,原因是el-input是封裝好的元件,在它外層還有一層div包裹著,所以必須使用.native修飾符,來監聽根元素的原生事件,即做出以下修改:

    從無到有構建vue實戰專案(六)

    改為:

    從無到有構建vue實戰專案(六)

相關文章