從無到有構建vue實戰專案（六）
阿新 • • 發佈：2019-07-21
十、徒手擼一個vue下拉左側二級導航
先附上最終效果圖：
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>事件：
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; }資料
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
基於mavon-editor的絲滑和簡潔，我選擇引入它作為我專案的一部分，先附上官網地址：https://www.zhystar.com/
接下來一步步將其引入我的專案中：
首先通過npm安裝：
npm install mavon-editor --save全域性註冊：
十二、錯誤總結（二）
當我將mavon-editor引入元件中後，出現了一個莫名其妙的錯誤：
經過排查，是因為我將元件name值與import引入的元件重名了，只需要對name值做出修改即可：
十三、與後端的第一次資料互動測試
登入頁面基本完成後，開始進行前後端資料互動測試，專案中使用了axios，後端用了PHP，前端發出請求後，後端返回資料，一度報錯，原因是內有解析json資料，解析了json資料後，成功解決問題。
當我在測試時，我有這樣一個需求，即通過element的el-input當Enter鍵按下時，可以觸發事件，但是沒有任何效果，原因是el-input是封裝好的元件，在它外層還有一層div包裹著，所以必須使用.native修飾符，來監聽根元素的原生事件，即做出以下修改：
改為：
