從無到有構建vue實戰項目（六）

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

0. 先附上最終效果圖：

   

1. 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>
   

2. 事件：

   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;
     }
   

3. 數據

   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引入組件中后，出現了一個莫名其妙的錯誤：

   

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

   

​

十三、與后端的第一次數據交互測試

1. 登錄頁面基本完成后，開始進行前后端數據交互測試，項目中使用了axios，后端用了PHP，前端發出請求后，后端返回數據，一度報錯，原因是內有解析json數據，解析了json數據后，成功解決問題。

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

   

   改為：