Vue.js có thể dễ dàng sử dụng để phát triển các ứng dụng giao diện người dùng tương tác.
Trong bài viết này, chúng ta sẽ xem xét cách các package tốt nhất để thêm calendars, overlays và xử lý local storage.
1. vue-fullcalendar
vue-fullcalendar cung cấp cho chúng ta một calendar component đơn giản để hiển thị các sự kiện.
Để sử dụng nó, trước tiên chúng ta cài đặt nó bằng cách chạy:
1 2 | npm i vue<span class="token operator">-</span>fullcalendar |
Sau đó, chúng ta sử dụng nó bằng cách viết như sau:
main.js
1 2 3 4 5 6 7 8 9 | import Vue from <span class="token double-quoted-string string">"vue"</span><span class="token punctuation">;</span> import App from <span class="token double-quoted-string string">"./App.vue"</span><span class="token punctuation">;</span> import fullCalendar from <span class="token double-quoted-string string">"vue-fullcalendar"</span><span class="token punctuation">;</span> Vue<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token double-quoted-string string">"full-calendar"</span><span class="token punctuation">,</span> fullCalendar<span class="token punctuation">)</span><span class="token punctuation">;</span> Vue<span class="token punctuation">.</span>config<span class="token punctuation">.</span>productionTip <span class="token operator">=</span> <span class="token boolean constant">false</span><span class="token punctuation">;</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span> render<span class="token punctuation">:</span> h <span class="token operator">=</span><span class="token operator">></span> <span class="token function">h</span><span class="token punctuation">(</span>App<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token variable">$mount</span><span class="token punctuation">(</span><span class="token double-quoted-string string">"#app"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
App.vue
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <span class="token operator"><</span>template<span class="token operator">></span> <span class="token operator"><</span>div id<span class="token operator">=</span><span class="token double-quoted-string string">"app"</span><span class="token operator">></span> <span class="token operator"><</span>full<span class="token operator">-</span>calendar <span class="token punctuation">:</span>events<span class="token operator">=</span><span class="token double-quoted-string string">"fcEvents"</span> lang<span class="token operator">=</span><span class="token double-quoted-string string">"en"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>full<span class="token operator">-</span>calendar<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">const</span> fcEvents <span class="token operator">=</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token double-quoted-string string">"eat"</span><span class="token punctuation">,</span> start<span class="token punctuation">:</span> <span class="token double-quoted-string string">"2020-05-25"</span><span class="token punctuation">,</span> end<span class="token punctuation">:</span> <span class="token double-quoted-string string">"2020-05-27"</span> <span class="token punctuation">}</span> <span class="token punctuation">]</span><span class="token punctuation">;</span> export <span class="token keyword">default</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> fcEvents <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> |
Chúng tôi đăng ký component. Sau đó, sử dụng nó trong App
component.
full-calendar
nhận mộtevents
prop, là một mảng các objects.
Objects có thuộc tính title
,start
và end
.
title
là tiêu đề sự kiện.
start
là chuỗi ngày bắt đầu. end
là chuỗi ngày kết thúc.
Nó tạo ra các sự kiện khi tháng được thay đổi và một sự kiện clicked.
2. v-calendar
v-calendar
là một calendar component khác.
Để cài đặt, chạy lệnh:
1 2 | npm i v<span class="token operator">-</span>calendar |
Bây giở sử dụng nó, ta viết code như sau:
main.js
1 2 3 4 5 6 7 8 9 10 11 | import Vue from <span class="token double-quoted-string string">"vue"</span><span class="token punctuation">;</span> import App from <span class="token double-quoted-string string">"./App.vue"</span><span class="token punctuation">;</span> import Calendar from <span class="token double-quoted-string string">"v-calendar/lib/components/calendar.umd"</span><span class="token punctuation">;</span> import DatePicker from <span class="token double-quoted-string string">"v-calendar/lib/components/date-picker.umd"</span><span class="token punctuation">;</span> Vue<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token double-quoted-string string">"calendar"</span><span class="token punctuation">,</span> Calendar<span class="token punctuation">)</span><span class="token punctuation">;</span> Vue<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token double-quoted-string string">"date-picker"</span><span class="token punctuation">,</span> DatePicker<span class="token punctuation">)</span><span class="token punctuation">;</span> Vue<span class="token punctuation">.</span>config<span class="token punctuation">.</span>productionTip <span class="token operator">=</span> <span class="token boolean constant">false</span><span class="token punctuation">;</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span> render<span class="token punctuation">:</span> h <span class="token operator">=</span><span class="token operator">></span> <span class="token function">h</span><span class="token punctuation">(</span>App<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token variable">$mount</span><span class="token punctuation">(</span><span class="token double-quoted-string string">"#app"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
App.vue
để add một date picker
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <span class="token operator"><</span>template<span class="token operator">></span> <span class="token operator"><</span>div id<span class="token operator">=</span><span class="token double-quoted-string string">"app"</span><span class="token operator">></span> <span class="token operator"><</span>date<span class="token operator">-</span>picker <span class="token punctuation">:</span>mode<span class="token operator">=</span><span class="token double-quoted-string string">"mode"</span> v<span class="token operator">-</span>model<span class="token operator">=</span><span class="token double-quoted-string string">"selectedDate"</span><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> export <span class="token keyword">default</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> mode<span class="token punctuation">:</span> <span class="token double-quoted-string string">"single"</span><span class="token punctuation">,</span> selectedDate<span class="token punctuation">:</span> <span class="token constant">null</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> |
để add calendar:
1 2 3 4 5 6 7 8 9 | <span class="token operator"><</span>template<span class="token operator">></span> <span class="token operator"><</span>div id<span class="token operator">=</span><span class="token double-quoted-string string">"app"</span><span class="token operator">></span> <span class="token operator"><</span>calendar<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>calendar<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> export <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 operator">/</span>script<span class="token operator">></span> |
3. VueLocalStorage
VueLocalStorage là một Vue plugin cho phép xử lý local storage trong ứng dụng Vue.
Để cài đặt, chạy lệnh:
1 2 | npm i vue<span class="token operator">-</span>localstorage |
Sau đó, để sử dụng nó, chúng ta viết code như sau:
main.js
1 2 3 4 5 6 7 8 9 | import Vue from <span class="token double-quoted-string string">"vue"</span><span class="token punctuation">;</span> import App from <span class="token double-quoted-string string">"./App.vue"</span><span class="token punctuation">;</span> import VueLocalStorage from <span class="token double-quoted-string string">"vue-localstorage"</span><span class="token punctuation">;</span> Vue<span class="token punctuation">.</span><span class="token keyword">use</span><span class="token punctuation">(</span>VueLocalStorage<span class="token punctuation">)</span><span class="token punctuation">;</span> Vue<span class="token punctuation">.</span>config<span class="token punctuation">.</span>productionTip <span class="token operator">=</span> <span class="token boolean constant">false</span><span class="token punctuation">;</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span> render<span class="token punctuation">:</span> h <span class="token operator">=</span><span class="token operator">></span> <span class="token function">h</span><span class="token punctuation">(</span>App<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token variable">$mount</span><span class="token punctuation">(</span><span class="token double-quoted-string string">"#app"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
App.vue
1 2 3 4 5 6 7 8 9 10 11 12 | <span class="token operator"><</span>template<span class="token operator">></span> <span class="token operator"><</span>div id<span class="token operator">=</span><span class="token double-quoted-string string">"app"</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> export <span class="token keyword">default</span> <span class="token punctuation">{</span> <span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> this<span class="token punctuation">.</span><span class="token variable">$localStorage</span><span class="token punctuation">.</span><span class="token function">set</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'foo'</span><span class="token punctuation">,</span> <span class="token single-quoted-string string">'bar'</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> |
Chúng ta đăng ký plugin.
Sau đó, chúng ta có thể thao tác lưu trữ cục bộ với thuộc tính this.$localStorage
.
Chúng ta có thể gọi get
để lấy một giá trị:
1 2 | this<span class="token punctuation">.</span><span class="token variable">$localStorage</span><span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'foo'</span><span class="token punctuation">)</span> |
Để xóa một mục nhập, chúng ta gọi remove
:
1 2 | this<span class="token punctuation">.</span><span class="token variable">$localStorage</span><span class="token punctuation">.</span><span class="token function">remove</span><span class="token punctuation">(</span><span class="token single-quoted-string string">'foo'</span><span class="token punctuation">)</span> |
4. vue-loading-overlay
vue-loading-overlay cung cấp cho chúng ta overlay để hiển thị khi một thứ gì đó được tải (load)
Để cài đặt, chạy lệnh:
1 2 | npm i vue<span class="token operator">-</span>loading<span class="token operator">-</span>overlay |
Sau đó, để sử dụng ta viết code như sau:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <span class="token operator"><</span>template<span class="token operator">></span> <span class="token operator"><</span>div<span class="token operator">></span> <span class="token operator"><</span>loading active can<span class="token operator">-</span>cancel <span class="token punctuation">:</span>on<span class="token operator">-</span>cancel<span class="token operator">=</span><span class="token double-quoted-string string">"onCancel"</span> is<span class="token operator">-</span>full<span class="token operator">-</span>page<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>loading<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> import Loading from <span class="token double-quoted-string string">"vue-loading-overlay"</span><span class="token punctuation">;</span> import <span class="token double-quoted-string string">"vue-loading-overlay/dist/vue-loading.css"</span><span class="token punctuation">;</span> export <span class="token keyword">default</span> <span class="token punctuation">{</span> components<span class="token punctuation">:</span> <span class="token punctuation">{</span> Loading <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">onCancel</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> |
Chúng ta sử dụng loading
component để thêm overlay để hiển thị khi dữ liệu được tải.
active
là một prop được set là true
nếu bạn muốn hiển thị overlay.
can-cancel
làm cho overlay có thể bị hủy.
Sau đó, khi chúng ta hủy bỏ phương thức onCancel
được gọi, bởi vì chúng ta đặt nó làm giá trị của on-cancel
prop.
Chúng ta có thể sử dụng nó như một plugin.
Ví dụ, chúng ta có thể viết:
main.js
1 2 3 4 5 6 7 8 9 10 | import Vue from <span class="token double-quoted-string string">"vue"</span><span class="token punctuation">;</span> import App from <span class="token double-quoted-string string">"./App.vue"</span><span class="token punctuation">;</span> import Loading from <span class="token double-quoted-string string">"vue-loading-overlay"</span><span class="token punctuation">;</span> import <span class="token double-quoted-string string">"vue-loading-overlay/dist/vue-loading.css"</span><span class="token punctuation">;</span> Vue<span class="token punctuation">.</span><span class="token keyword">use</span><span class="token punctuation">(</span>Loading<span class="token punctuation">)</span><span class="token punctuation">;</span> Vue<span class="token punctuation">.</span>config<span class="token punctuation">.</span>productionTip <span class="token operator">=</span> <span class="token boolean constant">false</span><span class="token punctuation">;</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{</span> render<span class="token punctuation">:</span> h <span class="token operator">=</span><span class="token operator">></span> <span class="token function">h</span><span class="token punctuation">(</span>App<span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token variable">$mount</span><span class="token punctuation">(</span><span class="token double-quoted-string string">"#app"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> |
App.vue
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <span class="token operator"><</span>template<span class="token operator">></span> <span class="token operator"><</span>div ref<span class="token operator">=</span><span class="token double-quoted-string string">"container"</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> export <span class="token keyword">default</span> <span class="token punctuation">{</span> <span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> this<span class="token punctuation">.</span><span class="token variable">$loading</span><span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">{</span> container<span class="token punctuation">:</span> this<span class="token punctuation">.</span><span class="token variable">$refs</span><span class="token punctuation">.</span>container<span class="token punctuation">,</span> canCancel<span class="token punctuation">:</span> <span class="token boolean constant">true</span><span class="token punctuation">,</span> onCancel<span class="token punctuation">:</span> this<span class="token punctuation">.</span>onCancel <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">onCancel</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> |
Chúng ta gọi phương thức this.$loading.show
để hiển thị overlay.
Thuộc tính container
được đặt thành ref (tham chiếu) của container mà chúng ta muốn hiển thị overlay.
onCancel
có phương thức để gọi khi nó bị hủy.
5. Kết luận
vue-fullcalendar là một component bộ chọn lịch và ngày.
vue-loading-overlay là một overlay component sử dụng khi load dữ liệu.
VueLocalStorage là một plugin để xử lý local storage trong ứng dụng Vue.