I. Chuẩn bị:
Tạo mới 1 vue-app:
1 2 | vue create authen-with-vue-router |
Config cơ bản:
- Babel.
- Esint.
Oke. Run web nào:
1 2 | yarn serve |
II.Ý tưởng:
Về cơ bản, mình sẽ viết 1 cái dropdown-menu, khá giống với của bootstrap (vì không chú trọng UI nên mình chỉ làm đầy đủ chức năng thôi nha, các bạn có thời gian thì cố gắng hoàn thiện nhé):
Check Document Dropdown Menu of Bootstrap Here!
Vấn đề ở đây là, mình không sử dụng 1 Library thứ 3 bên ngoài.
Okey, make some noises!
II. Thực hiện:
1. Cây thư mục:
Vì chỉ tạo thêm component DropdownMenu theo dạng List-Item, cấu trúc thư mục của mình về cơ bản sẽ giống Vue CLI, nên mình sẽ hiển thị phần thay đổi:
1 2 3 4 5 6 | - src/ |---components |---DropdownMenu |--- index.vue |--- Item.vue |
2. UI:
Mình sẽ làm nhanh phần CSS, các bạn có thể sử dụng CSS có sẵn của Bootstrap nạp vào nếu không muốn làm phần UI.
File app.vue:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <span class="token selector">#app </span><span class="token punctuation">{</span> <span class="token property">font-family</span><span class="token punctuation">:</span> Avenir, Helvetica, Arial, sans-serif<span class="token punctuation">;</span> <span class="token property">-webkit-font-smoothing</span><span class="token punctuation">:</span> antialiased<span class="token punctuation">;</span> <span class="token property">-moz-osx-font-smoothing</span><span class="token punctuation">:</span> grayscale<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> #2c3e50<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#nav </span><span class="token punctuation">{</span> <span class="token property">padding</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span> <span class="token selector">a </span><span class="token punctuation">{</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> #2c3e50<span class="token punctuation">;</span> <span class="token selector"><span class="token parent important">&</span>.router-link-exact-active </span><span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> #42b983<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token selector">* </span><span class="token punctuation">{</span> <span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">a </span><span class="token punctuation">{</span> <span class="token selector"><span class="token parent important">&</span>:visited </span><span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> #2c3e50<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token selector">.spacing </span><span class="token punctuation">{</span> <span class="token property">padding</span><span class="token punctuation">:</span> 100px 0<span class="token punctuation">;</span> <span class="token punctuation">}</span> |
File DropdownMenu/index.vue:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <span class="token selector">button </span><span class="token punctuation">{</span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 10px 20px<span class="token punctuation">;</span> <span class="token property">background-color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> 1px solid black<span class="token punctuation">;</span> <span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span> <span class="token property">transition</span><span class="token punctuation">:</span> 0.3s<span class="token punctuation">;</span> <span class="token selector"><span class="token parent important">&</span>:focus </span><span class="token punctuation">{</span> <span class="token property">outline</span><span class="token punctuation">:</span> 0px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector"><span class="token parent important">&</span>:hover </span><span class="token punctuation">{</span> <span class="token property">background</span><span class="token punctuation">:</span> #000<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector"><span class="token parent important">&</span>.isActive </span><span class="token punctuation">{</span> <span class="token property">background</span><span class="token punctuation">:</span> #000<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token selector">.dropdown </span><span class="token punctuation">{</span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> fit-content<span class="token punctuation">;</span> <span class="token selector"><span class="token parent important">&</span>-list </span><span class="token punctuation">{</span> <span class="token property">background</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token property">margin-top</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> <span class="token property">z-index</span><span class="token punctuation">:</span> 10<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token property">border</span><span class="token punctuation">:</span> 1px solid black<span class="token punctuation">;</span> <span class="token property">border-radius</span><span class="token punctuation">:</span> 4px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
File DropdownMenu/Item.vue:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <span class="token selector">.item </span><span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 5px 10px<span class="token punctuation">;</span> <span class="token property">transition</span><span class="token punctuation">:</span> 0.3s<span class="token punctuation">;</span> <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> <span class="token selector"><span class="token parent important">&</span>:hover </span><span class="token punctuation">{</span> <span class="token property">background</span><span class="token punctuation">:</span> black<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> white<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> |
3. Code logic:
Ở DropdownMenu/index.vue mình sẽ có các props:
- Sử dụng 1
idđược truyền vào để hỗ trợ DOM và phân biệt giữamulti dropdown-menu. - Có
proparraysđể truyền vào cácitemchodropdown-menu.
File Home.vue:
1 2 3 4 5 6 7 8 9 10 | <span class="token operator"><</span>template<span class="token operator">></span> <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"home"</span><span class="token operator">></span> <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"spacing"</span><span class="token operator">></span> <span class="token operator"><</span>DropdownMenu id<span class="token operator">=</span><span class="token string">"dropdownmenu1"</span> <span class="token punctuation">:</span>arrays<span class="token operator">=</span><span class="token string">"arrays"</span><span class="token operator">></span> DropdownMenu <span class="token number">1</span> <span class="token operator"><</span><span class="token operator">/</span>DropdownMenu<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>template<span class="token operator">></span> |
Bên trong DropdownMenu/index.vue:
- Có biến
isOpenchính là công tắc đóng mởDropdown-menu(truelà mở,falselà đóng). - Truyền vào
Item.vue1function:closeDropdownthực hiện việc đóngDropdown-menucủa chúng ta từItembên trong.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | <span class="token operator"><</span>template<span class="token operator">></span> <span class="token operator"><</span>div <span class="token punctuation">:</span>id<span class="token operator">=</span><span class="token string">"id"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"dropdown"</span><span class="token operator">></span> <span class="token operator"><</span>button @click<span class="token operator">=</span><span class="token string">"isOpen = !isOpen"</span> <span class="token punctuation">:</span><span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"{ isActive: isOpen }"</span><span class="token operator">></span> <span class="token operator"><</span>slot <span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>button<span class="token operator">></span> <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"dropdown-list"</span> v<span class="token operator">-</span><span class="token keyword">if</span><span class="token operator">=</span><span class="token string">"isOpen"</span><span class="token operator">></span> <span class="token operator"><</span>Item v<span class="token operator">-</span><span class="token keyword">for</span><span class="token operator">=</span><span class="token string">"(item, index) in arrays"</span> <span class="token punctuation">:</span>key<span class="token operator">=</span><span class="token string">"index"</span> <span class="token punctuation">:</span>item<span class="token operator">=</span><span class="token string">"item"</span> <span class="token punctuation">:</span>closeDropdown<span class="token operator">=</span><span class="token string">"callToClose"</span> <span class="token operator">></span> <span class="token punctuation">{</span><span class="token punctuation">{</span> item<span class="token punctuation">.</span>text <span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token operator"><</span><span class="token operator">/</span>Item<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>template<span class="token operator">></span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'DropdownMenu'</span><span class="token punctuation">,</span> components<span class="token punctuation">:</span> <span class="token punctuation">{</span> Item<span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token punctuation">{</span> isOpen<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> props<span class="token punctuation">:</span> <span class="token punctuation">{</span> arrays<span class="token punctuation">:</span> <span class="token punctuation">{</span> type<span class="token punctuation">:</span> Array<span class="token punctuation">,</span> <span class="token keyword">default</span><span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> id<span class="token punctuation">:</span> <span class="token punctuation">{</span> type<span class="token punctuation">:</span> String<span class="token punctuation">,</span> required<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> methods<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token function">callToClose</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>isOpen <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> |
File DropdownMenu/Item.vue:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <span class="token operator"><</span>template<span class="token operator">></span> <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"item"</span> @click<span class="token operator">=</span><span class="token string">"doFunc"</span><span class="token operator">></span> <span class="token operator"><</span>slot <span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>template<span class="token operator">></span> <span class="token operator"><</span>script<span class="token operator">></span> <span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span> name<span class="token punctuation">:</span> <span class="token string">'Item'</span><span class="token punctuation">,</span> props<span class="token punctuation">:</span> <span class="token punctuation">{</span> item<span class="token punctuation">:</span> <span class="token punctuation">{</span> type<span class="token punctuation">:</span> Object<span class="token punctuation">,</span> required<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> closeDropdown<span class="token punctuation">:</span> <span class="token punctuation">{</span> type<span class="token punctuation">:</span> Function<span class="token punctuation">,</span> <span class="token keyword">default</span><span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> methods<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token function">doFunc</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>item<span class="token punctuation">.</span>link<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">closeDropdown</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> |
Theo lý thuyết, click button sẽ đóng mở DropdownMenu của chúng ta, ngoài ra khi click từng Item, cũng sẽ đóng Dropdown. Nếu muốn thực hiện 1 công việc nào đó ở Item, mình truyền function cho các item trong arrays và sử dụng methods tại Item.vue để gọi lại công việc đó là xong.
Ngoài ra, DropdownMenu còn phải đóng khi chúng ta click ra bên ngoài của nó nữa. Lúc này, mình sử dụng window.addEventListener('click', ...) để phát hiện từng click và kiểm tra xem đang click vào DropdownMenu hay không?
Lúc này, mình sẽ sử dụng hook:
createdđểaddEventListener.beforeDestroyđểremoveEventListener.
File DropdownMenu/index.vue:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <span class="token function">created</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> window<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>checkClickOn<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token function">beforeDestroy</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> window<span class="token punctuation">.</span><span class="token function">removeEventListener</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>checkClickOn<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> methods<span class="token punctuation">:</span> <span class="token punctuation">{</span> <span class="token function">checkClickOn</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>id<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">contains</span><span class="token punctuation">(</span>event<span class="token punctuation">.</span>target<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span><span class="token punctuation">.</span>isOpen <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> |
Đoạn code document.getElementById('your-id).contains(event.target) sẽ trả về true nếu chúng ta click vào 1 đối tượng HTML là con của your-id (prop) mà chúng ta đã truyền ở phía trên.
Giờ, mình sẽ tạo thêm 1 DropdownMenu bên cạnh để kiểm tra trường hợp multi dropdown-menu:
File Home.vue:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <span class="token operator"><</span>template<span class="token operator">></span> <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"home"</span><span class="token operator">></span> <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"spacing"</span><span class="token operator">></span> <span class="token operator"><</span>DropdownMenu id<span class="token operator">=</span><span class="token string">"dropdownmenu1"</span> <span class="token punctuation">:</span>arrays<span class="token operator">=</span><span class="token string">"arrays"</span><span class="token operator">></span> DropdownMenu <span class="token number">1</span> <span class="token operator"><</span><span class="token operator">/</span>DropdownMenu<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span>div <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"spacing"</span><span class="token operator">></span> <span class="token operator"><</span>DropdownMenu id<span class="token operator">=</span><span class="token string">"dropdownmenu2"</span> <span class="token punctuation">:</span>arrays<span class="token operator">=</span><span class="token string">"arrays"</span><span class="token operator">></span> DropdownMenu <span class="token number">2</span> <span class="token operator"><</span><span class="token operator">/</span>DropdownMenu<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>template<span class="token operator">></span> |
It worked, perfectly!
Mình xin phép share repos của mình, mọi người hãy clone về và nhận xét giúp mình nhé.
Link github: Here!
Cảm ơn anh Trần Đại Sơn đã góp ý cho em về phần eventListener. Cảm ơn mọi người đã đọc bài viết của mình.