View

Cú pháp

<zmp-view>

View là container chứa các Page, nằm bên trong App, App có thể có 1 hoặc nhiều View, mặc định mỗi View sẽ kế thừa các routes từ App, tuy nhiên có thể tuỳ chỉnh với mỗi View cụ thể.

View Properties

Prop	Type	Default	Description
init	boolean	true	Tự động khởi tạo view instance
name	string		View name. Giúp truy xuất view instance thông qua zmp.views.[name]
main	boolean	false	Đặt view trở thành view chính
router	boolean	true	Set false để vô hiệu hóa view router
url	string		View's url mặc định. Nếu không chỉ định, sẽ sử dụng document url
load-initial-page	boolean	true	Khi được bật và không có trang con nào bên trong View. Sẽ tải trang đầu tiên khớp với URL khởi tạo
stack-pages	boolean	false	Nếu được bật thì tất cả các trang trước đó trong navigation sẽ không bị xóa khỏi DOM khi chuyển trang.
allow-duplicate-urls	boolean	false	Có thể bật tham số này để cho phép tải các trang mới có cùng url với trang "đang hoạt động" trong view.
animate	boolean	true	Bật hiệu ứng chuyên trang
preload-previous-page	boolean	true	Bật/tắt tải trước các trang trước khi truy cập sâu navigation. Nếu sử dụng tính năng "swipe back page" cần bật preloadPreviousPage.
reload-pages	boolean	false	View sẽ luôn tải lại trang hiện đang hoạt động mà không cần tải trang mới
restore-scroll-top-on-back	boolean	true	khi được kích hoạt, sẽ cuộn lê đầu trang khi bạn quay lại trang này
ios-page-load-delay	number	0	Độ trễ (tính bằng ms) sau khi trang mới sẽ được tải và chèn vào DOM và trước khi nó được chuyển đổi. Có thể tăng lên một chút để cải thiện hiệu suất. Sẽ chỉ có hiệu lực với theme iOS
md-page-load-delay	number	0	Độ trễ (tính bằng ms) sau khi trang mới sẽ được tải và chèn vào DOM và trước khi nó được chuyển đổi. Có thể tăng lên một chút để cải thiện hiệu suất. Sẽ chỉ có hiệu lực với theme MD
aurora-page-load-delay	number	0	Độ trễ (tính bằng ms) sau khi trang mới sẽ được tải và chèn vào DOM và trước khi nó được chuyển đổi. Có thể tăng lên một chút để cải thiện hiệu suất. Sẽ chỉ có hiệu lực với theme Aurora
routes-before-enter	function(context) |array		Function (hoặc mảng các functions) sẽ được thực thi trước mỗi route được tải/truy cập. Để tiến hành tải route thì cần gọi resolve. Trường hợp array tất cả function trong mảng cần được resolved.Tương tự route beforeEnter nhưng sẽ hoạt động trên tất cả route
routes-before-leave	function(context) |array		Function (hoặc mảng các functions) sẽ được thực thi trước mỗi route khi ngừng tải/thoát. Để tiến hành tải route thì cần gọi resolve. Trường hợp array tất cả function trong mảng cần được resolved.Tương tự route beforeLeave nhưng sẽ hoạt động trên tất cả route
Elements Removal
remove-elements	boolean	true	Trong quá trình chuyển trang Router có thể xóa các Page và Navbar elements không sử dụng khỏi DOM.
remove-elements-with-timeout	boolean	false	Khi bật router sẽ xóa elements sau timeout
remove-elements-timeout	number	0	Timeout để xóa elements (trường hợp removeElementsWithTimeout: true)
iOS Dynamic Navbar
ios-dynamic-navbar	boolean	false	Bật hiệu ứng dynamic navbar trên iOS theme
ios-animate-navbar-back-icon	boolean	true	Khi bật back icon sẽ có animation giống với native. Chỉ sử dụng trên dynamic navbar với back-link icon mặc định phía bên trái set với "sliding".
Swipe back
ios-swipe-back	boolean	true	Bật/tắt khả năng vuốt về bên trái để trở về trang trước. Trên iOS theme
ios-swipe-back-threshold	number	0	Giá trị tính theo px. Swipe back action sẽ bắt đàu nếu "touch distance" lớn hơn giá trị này. Trên iOS theme
ios-swipe-back-active-area	number	30	Giá trị tính bằng px. Chiều rộng của cạnh trái màn hình sẽ triggers swipe back action. Trên iOS theme
ios-swipe-back-animate-shadow	boolean	true	Bật/tắt box-shadow animation khi thao tác swipe back thưc thiện. Có thể tắt nó để cải thiện hiệu suất. Trên iOS theme
ios-swipe-back-animate-opacity	boolean	true	Bật/tắt opacity animation khi thực hiện swipe back action. Có thể tắt nó để cải thiện hiệu suất. Trên iOS theme
md-swipe-back	boolean	false	Bật/tắt khả năng vuốt về bên trái để trở về trang trước. Trên MD theme
md-swipe-back-threshold	number	0	Giá trị tính theo px. Swipe back action sẽ bắt đàu nếu "touch distance" lớn hơn giá trị này. Trên MD theme
md-swipe-back-active-area	number	30	Giá trị tính bằng px. Chiều rộng của cạnh trái màn hình sẽ triggers swipe back action. Trên MD theme
md-swipe-back-animate-shadow	boolean	true	Bật/tắt box-shadow animation khi thao tác swipe back thưc thiện. Có thể tắt nó để cải thiện hiệu suất. Trên MD theme
md-swipe-back-animate-opacity	boolean	false	Bật/tắt opacity animation khi thực hiện swipe back action. Có thể tắt nó để cải thiện hiệu suất. Trên MD theme
aurora-swipe-back	boolean	true	Bật/tắt khả năng vuốt về bên trái để trở về trang trước. Trên Aurora theme
aurora-swipe-back-threshold	number	0	Giá trị tính theo px. Swipe back action sẽ bắt đàu nếu "touch distance" lớn hơn giá trị này. Trên Aurora theme
aurora-swipe-back-active-area	number	30	Giá trị tính bằng px. Chiều rộng của cạnh trái màn hình sẽ triggers swipe back action. Trên Aurora theme
aurora-swipe-back-animate-shadow	boolean	false	Bật/tắt box-shadow animation khi thao tác swipe back thưc thiện. Có thể tắt nó để cải thiện hiệu suất. Trên Aurora theme
aurora-swipe-back-animate-opacity	boolean	true	Bật/tắt opacity animation khi thực hiện swipe back action. Có thể tắt nó để cải thiện hiệu suất. Trên Aurora theme
Browser History
browser-history	boolean	true	Người dùng có thể chuyển trang thông qua lịch sử ứng dụng bằng cách sử dụng nút back/forward mặc định của trình duyệt.
browser-history-animate	boolean	false	Bật/tắt hiệu ứng chuyển trang khi lịch sử trình duyệt thay đổi
browser-history-on-load	boolean	true	Tắt để bỏ qua phân tích cú pháp URL lịch sử trình duyệt và tải trang khi tải ứng dụng

Lưu ý

Tất cả các parameters trên có thể được khai báo trong view property của App để set mặc định cho tất cả views. Ví dụ:

<template>
  <zmp-app :v-bind="appParams">
    ...
  </zmp-app>
</template>

<script setup>
const appParams = {
  view: {
    iosDynamicNavbar: false,
    ...
  }
};
</script>

View Methods & Properties

const view = zmp.views[name];

Sau khi đã có view instance, view instance cung cấp các methods và properties:

| Properties | | ------------------------- | ------------------------------------------------ | | view.app | liên kết đến global app instance | | view.el | View HTML element | | view.$el | ZMP dom instance với view HTML element | | view.name | View name đã được khai báo | | view.main | có phải view chính hay không | | view.routes | Mảng chứa các routes | | view.history | Mảng chứa lịch sử của view | | view.params | Object chứa các parameters khởi tạo | | view.router | Router instance được khởi tạo trong view | | Methods | | view.destroy() | Hủy view instance | | view.on(event, handler) | Thêm event handler. Danh sách các event được hỗ trợ: View Events | | view.once(event, handler) | Thêm event handler và xóa đi sau khi fired | | view.off(event, handler) | Xóa event handler | | view.off(event) | Xóa tất cả event handler của event được chỉ định | | view.emit(event, ...args) | Fire event trên instance |

View Events

Có hai cách để handle event trên view:

• Sử dụng method on trên view instance: view.on(event, handler)
• Sử dụng v-on directive của Vue.js trên View component: <zmp-view v-on:[event]="handler">

Swipe-back chỉ khả dụng trên iOS theme.

Event	Prop	Description
view-init	@view:init	Event sẽ được triggered khi khởi tạo view
view-resize	@view:resize	Event sẽ được triggered khi thay đổi kích thước Master (khi masterDetailResizable enabled)
swipeback-move	@swipeback:move	Event sẽ được triggered trong quá trình swipe back di chuyển
swipe-back-before-change	@swipeback:beforechange	Event sẽ được triggered ngay trước swipe back animation tới trang trước khi người dùng thả ra
swipe-back-after-change	@swipeback:afterchange	Event sẽ được triggered ngay sau swipe back animation tới trang trước khi người dùng thả ra
swipe-back-before-reset	@swipeback:beforereset	Event sẽ được triggered ngay trước swipe back animation tới trang hiện tại khi người dùng thả ra
swipe-back-after-reset	@swipeback:afterreset	Event sẽ được triggered ngay sau swipe back animation tới trang hiện tại khi người dùng thả ra

Truy cập View Instance

Nếu khởi tạo tự động view instance <zmp-view init>, có thể truy cập instance thông qua:

• Qua tên của view. Ví dụ đối với <zmp-view name="left">, có thể lấy instance bằng cú pháp zmp.views.left
• Nếu là main view <zmp-view main>, có thể truy xuất instance thông qua zmp.views.main

Ví dụ

Layout tối giản nhất

<zmp-view main>...</zmp-view>;

{
  /* Renders to: */
}

<div className='view view-main'>...</div>;

Với parameters

<zmp-view
  main
  url='/'
  browser-history
  :animate="false"
  :ios-dynamic-navbar="false"
>
  ...
</zmp-view>