本组件适用于Vue3版本

1. 起步

在main.js中添加如下代码， 以下代码为此库依赖的第三方库：

import nui from "native-app-ui-vue3"
import "native-app-ui-vue3/lib/style.css"

Vue.use(nui);

2. 组件使用

2.1 nau-window

<nau-window 
	 :status-bar="true" 
	 :title-bar="true" 
	 :min-btn="true" 
	 :max-restore-btn="true" 
	 :close-btn="true"
	 icon="" 
	 title="" >
    <hello-world></hello-world>
</nau-window>

/* 属性说明
status-bar：是否显示状态栏，默认为true，状态栏支持窗口大小调整
title-bar：是否显示标题栏，默认为true，标题栏包含图标、标题、最小化、最大化/还原、关闭按钮

min-btn：是否显示最小化按钮，默认为true
max-restore-btn：是否显示最大化和还原按钮，默认为true
close-btn：是否显示关闭按钮，默认为true
以上三个按钮的控制必须在title-bar=true时才能生效

icon：窗体左上角的图标
title：窗体的标题
以上两个参数的必须在title-bar=true时才能生效

插槽：
icon：位于标题栏左上角，优先级低于属性icon，用于自定义图标
status：自定义状态栏内容，必须在属性statusBar=true时才能生效
默认：窗体内容
controls：用于自定义按钮，位于默认最小化、最大化、关闭按钮之后
*/

2.2. nau-title-bar

<nau-title-bar  :close-btn="true" 
        :max-restore-btn="true" 
        :min-btn="true"
        icon="icon-img-url" 
        title="title">
	<slot></slot>
</nau-title-bar>

/* 属性说明
min-btn：是否显示最小化按钮，默认为true
max-restore-btn：是否显示最大化和还原按钮，默认为true
close-btn：是否显示关闭按钮，默认为true

icon：窗体左上角的图标
title：窗体的标题

插槽：
默认插槽：用于自定义图标，位于标题前方，和icon属性只能二选一，优先级低于icon属性
controls：用于自定义按钮，位于默认最小化、最大化、关闭按钮之后
*/

2.3. nau-status-bar

<nau-status-bar>
	<slot></slot>
</nau-status-bar>

/* 属性说明
默认插槽位于左侧
*/

3. 注意事项

vue2版本请使用 npm i native-app-ui