native-app-ui v1.0.20

1. 起步

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

import nui from "native-app-ui"
import "native-app-ui/lib/native-app-ui.css";
import "native-app-ui/lib/styles/default.css";

Vue.use(nui);

2. 代码中的C#和Javascript交互

2.1 在Vue代码中按如下方式给C#提供功能

this.$jsFeature.register(xxx,this,"xxx");// 注册js功能供c#端调用
this.$jsFeature.cancel(xxx,"xxx");// 取消js功能方法

//等效写法1，可以应用于任何js中
import {jsFeature} from "native-app-ui";

jsFeature.register(xxx,this,"xxx");// 注册js功能供c#端调用
jsFeature.cancel(xxx,"xxx");// 取消js功能方法

//等效写法2，在浏览器中可以不用引入任何东西直接使用
window.$jsFeature.register(xxx,this,"xxx");// 注册js功能供c#端调用
window.$jsFeature.cancel(xxx,"xxx");// 取消js功能方法

2.2 在Vue代码中按如下方式调用c#提供的功能

this.$csFeatureProxy.proxy().xxClass.xxMethod(xxx);// 调用xxClass下的xxMethod方法

//等效写法1，可以应用于任何js中
import { csFeatureProxy } from "native-app-ui";

csFeatureProxy.proxy().xxClass.xxMethod(xxx);// 调用xxClass下的xxMethod方法

//等效写法2，在浏览器中可以不用引入任何东西直接使用
window.$csFeatureProxy.proxy().xxClass.xxMethod(xxx);// 调用xxClass下的xxMethod方法

3. 组件使用

3.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：用于自定义按钮，位于默认最小化、最大化、关闭按钮之后
*/

3.2. nau-title-bar

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

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

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

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

3.3. status-bar

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

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

4. 本地文件请求

local-file://文件详细路径

支持参数 contentType 用于设定返回内容的 content-type
不设置该参数则为默认的 application/octet-stream
content-type 映射参考：https://tool.oschina.net/commons

5. 注意事项

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