前言
這是一套直面產品的【練習題】
這是一套可以直接用的【面試題】
對于求職者,這是一道可以讓你的八股文付諸于實踐的題,讓你寫的代碼都有用。
對于公司,你可以用它來測出求職者的真實水平。
關于本題
應用場景:通用類型組件,絕大場景下都能使用
涉及到的知識:FLEX布局Fixed定位鼠標事件樹形結構樹形組件碰撞檢測
限制:不能使用任何UI組件,JS庫,如JQUERY,可使用CSS插件或庫,樣式與設計圖貼近
等級任務
初階
1-1*:控制臺,不能有任何警告和報錯,不能清空控制臺
1-2:建議元素之間的間距為8px,不做強制約束,文本是彈性空間,可長可短
1-3:文字左側灰色色塊為ICON,需要預留空間,可以用任意背景色代替
1-4*:鼠標移動到菜單,對應的一行,需要用淺藍色 #d9ebff 高亮,圖標顏色變成白色
1-5*:灰色文字代表禁用,鼠標不能點擊
1-6*:任意一行菜單都有對應的事件
1-7*:禁用瀏覽器原生菜單,進入頁面時,菜單處于隱藏狀態,鼠標右鍵事件后顯示
1-8*:根據JSON渲染菜單
設計圖如下

中階
2-1:基于上面的所有條件,完成下面任務
2-2:如果有子菜單,則顯示箭頭圖標,否則不顯示
2-3:可以在任意菜單下方配置分割線.
2-4:點擊【菜單】外部隱藏菜單
2-5:支持多級菜單
2-6:頁面樣式穩定
2-7:像素必須與原型圖保持一致【可選】
設計圖如下

高階
3-1:基于進階任務完成下述功能
3-2*:將上述功能封裝成 [Vue,React,js]或其他框架的組件,可高復用,對空值等異常需要做優化處理
3-3*:任意菜單都能配置子菜單,任何子菜單都能配置圖標
3-4*:在靠近窗口點擊時(右,下方),所有DOM都不能超出窗口,需要將子菜單移至左側顯示,如有三級菜單,則移至二級菜單左側
3-5*:能結合業務邏輯使用,如:在表格數據中,右鍵點擊任意一項數據,彈出菜單,能正確的對其進行增刪改查等基本操作
3-6:能將該組件發布到NPM
3-7:能在各大主流瀏覽器中運行,組件不能有副作用
設計圖如下

資源
獲取圖標
原設計圖
示例效果
暫無鏈接
如有意愿可提交倉庫地址給我,將會展示在這兒
浙公網安備 33010602011771號