vue封裝左側導航欄元件demo

2021-09-25 02:23:13 字數 753 閱讀 2947

示例demo的樣式:

然後說一下布局元件的呼叫邏輯

這裡我使用覆蓋element的樣式的方式,達到專案需求,這裡學到了很多如何定位dom元素的樣式,使用css陰影,如何覆蓋樣式,如何使用css3的偽類,如何通過滑鼠移動事件找到dom元素等

首先使用layout元件並設定樣式,其作為左側元件的容器,在專案中layout用來載入整個頁面的布局,這裡做的demo只做了左側布局。

layout**如下:

這裡使用的是用prop傳入引數的方式,遞迴遍歷json資料展示選單欄的方法,在sidebar 中使用陰影,這裡列出陰影引數

h-shadow

v-shadow

blur

spread

color

inset

水平陰影

垂直陰影

模糊尺寸

顏色內外

sidebar**如下

sidemenu中主要是使用了element的樣式,調整選單欄的位置

最後是menuitem,主要的邏輯**和樣式覆蓋**

}

}

總結:學到了很多css知識

vue左側導航欄

1.在element官網找到模板 2.新增和 click topage helloworld 如下 login tac 4 我的系統 h5 default active 2 class el menu vertical demo open handleopen close handleclose b...

vue封裝導航元件

剛開始學習vue.js,寫了個頁面練手,在封裝頭部元件的時候一直出問題,研究了老半天。下面貼上 這是目錄結構,header元件內包含輪播圖,logo條,頭像和導航。其中輪播圖使用的是swiper元件。header.vue 元件 class swiper slide v for sliderimg i...

jquery網頁左側導航選單欄

1.首先在之間新增 2.然後,在之中寫入如下 根據您的實際情況修改 審批結果 維護中的車輛 返回oa主頁 退出oa系統 3.最後就是.js和.css檔案了 menu.js檔案 如下 function getelementsbyclassname searchclass,node,tag else v...