@gmcb/uv-ui 0.2.26 → 0.3.0

package/docs/components/loadingIcon.md

@@ -0,0 +1,144 @@
+## LoadingIcon 加载动画 <to-api/>
+
+<demo-model url="/pages/componentsD/loading-icon/loading-icon"></demo-model>
+
+::: tip ✈
+
+**组件名：uv-loading-icon**
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uv-loading-icon)
+
+:::
+
+此组件为一个小动画，目前用在uv-ui的[loadMore加载更多](https://www.uvui.cn/components/loadMore.html)等组件的正在加载状态场景。
+
+### 平台兼容性
+
+|App（vue）|App（nvue）|H5|小程序|VUE2|VUE3|
+|:-:|:-:|:-:|:-:|:-:|:-:|
+|√|√|√|√|√|√|
+
+### 基本使用
+
+默认`mode="spinner"`为经典类似花朵的形状
+
+```vue
+<template>
+	<uv-loading-icon></uv-loading-icon>
+</template>
+```
+
+### 动画文字
+
+`text`可以指定文字内容，`textSize`可以指定文字大小
+
+```vue
+<template>
+	<uv-loading-icon text="加载中" textSize="30rpx"></uv-loading-icon>
+</template>
+```
+
+### 模式类型
+
+通过`mode`设定动画的类型，`circle`为圆圈的形状，`semicircle`为半圆圈的形状，`spinner`为经典类似花朵的形状，默认`spinner`
+
+:::warning 注意
+`mode="spinner"`在`nvue`中使用的是`<loading-indicator>`，所以在`nvue`中不是花朵的效果，而是`weex`中默认的动画效果。
+:::
+
+```vue
+<template>
+	<view>
+		<uv-loading-icon mode="spinner" text="花朵形"></uv-loading-icon>
+		<uv-loading-icon mode="semicircle" text="半圆"></uv-loading-icon>
+		<uv-loading-icon mode="circle" text="圆型"></uv-loading-icon>
+	</view>
+</template>
+```
+
+### 排列类型
+
+`vertical`可以指定文字和图标是否垂直排列，默认`false`
+
+```vue
+<template>
+	<view>
+		<uv-loading-icon :vertical="true" text="加载中"></uv-loading-icon>
+	</view>
+</template>
+```
+
+### 动画模式
+
+`timing-function`可以指定`mode`为`semicircle`或`circle`时动画里css中`animation-timing-function`的属性，默认为`ease-in-out`，[更多详见](https://www.runoob.com/cssref/css3-pr-animation-timing-function.html)
+
+```vue
+<uv-loading-icon timing-function="linear"></uv-loading-icon>
+```
+
+### 动画运行时间
+
+`duration`可以指定动画的运行周期时间
+
+```vue
+<uv-loading-icon duration="2000"></uv-loading-icon>
+```
+
+### 图标颜色
+
+`color`可以指定动画活动区域的颜色, `inactive-color`可以制定`mode`为`circle`时的暗边颜色
+
+```vue
+<template>
+	<view>
+		<uv-loading-icon color="red"></uv-loading-icon>
+		<uv-loading-icon mode="circle" inactive-color="red"></uv-loading-icon>
+	</view>
+</template>
+```
+
+### 图标尺寸
+
+通过`size`设定尺寸，单位rpx，组件内把`size`值体现为组件的宽和高
+
+```vue
+<uv-loading-icon size="36rpx"></uv-loading-icon>
+```
+
+### 显示或隐藏动画
+
+通过`show`设置为`true`或`false`，来显示或隐藏动画
+
+```vue
+<uv-loading-icon :show="true"></uv-loading-icon>
+
+/* 等价于 */
+<uv-loading-icon show></uv-loading-icon>
+```
+
+::: tip 完整示例下载地址
+
+[https://ext.dcloud.net.cn/plugin?name=uv-ui](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+:::
+
+### API
+
+### LoadingIcon Props
+
+| 参数			| 说明																					| 类型					| 默认值					| 可选值				|
+| :-			| :-																					| :-					| :-					| :-					|
+| show			| 是否显示动画																			| Boolean				| true					| true &#124; false					|
+| color			| 图标颜色																				| String				| #909193	| -						|
+| textColor			| 提示文本颜色																				| String				| #909193	| -						|
+| vertical		| 图标和文字是否垂直排列																	| Boolean				| false					| true	&#124; false				|
+| mode			| 模式选择，见上方[模式类型](/components/loadingIcon.html#模式类型)							| String				| circle 				| spinner &#124; circle &#124; semicircle	|
+| size			| 加载图标的大小，默认单位px																	| String &#124; Number	| 24					| -						|
+| textSize		| 加载文字的大小，默认单位px																	| String &#124; Number	| 15					| -						|
+| text			| 文字内容 | String | -	 | - |
+| textStyle			| 文字样式 | Object | -	 | - |
+| timingFunction| 指定`animation-timing-function`的css属性，但只支持`mode`为`circle`或`semicircle`才有效	| String				| ease-in-out<br>[更多详见](https://www.runoob.com/cssref/css3-pr-animation-timing-function.html)			| -						|
+| duration		| 动画执行周期时间，单位ms																	| string &#124; Number	| 1200					| -						|
+| inactiveColor	| 图标的暗边颜色, `mode`为`circle` 模式有效												| String				| transparent			| -						|
+
+

package/docs/components/loadingPage.md

@@ -0,0 +1,92 @@
+## LoadingPage 加载页 <to-api/>
+
+<demo-model url="/pages/componentsD/loading-page/loading-page"></demo-model>
+
+::: tip ✈
+
+**组件名：uv-loading-page**
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uv-loading-page)
+
+:::
+
+该组件是一个页面级的加载效果，可以在页面初始化数据等场景使用，与[骨架屏](/components/skeleton.html)有相似之处。
+
+### 平台兼容性
+
+|App（vue）|App（nvue）|H5|小程序|VUE2|VUE3|
+|:-:|:-:|:-:|:-:|:-:|:-:|
+|√|√|√|√|√|√|
+
+### 基本使用
+
+- `loading`属性为`true`或`false`，设置组件的显示或隐藏
+- `loading-text`属性，设置提示文字
+- `font-size`属性，设置提示大小
+
+```vue
+<template>
+	<uv-loading-page :loading="true" loading-text="加载中..." font-size="24rpx"></uv-loading-page>
+</template>
+```
+
+### 动画模式
+
+`loading-mode`可以指定加载动画的模式，`circle`为圆圈的形状，`semicircle`为半圆圈的形状，`spinner`为经典类似花朵的形状， 默认为`circle`
+
+```vue
+<template>
+	<uv-loading-page :loading="true" loading-mode="spinner"></uv-loading-page>
+</template>
+```
+```vue
+<template>
+	<uv-loading-page :loading="true" loading-mode="semicircle"></uv-loading-page>
+</template>
+```
+
+### 动画图片
+
+`image`可以指定文字上方用于替换loading动画的图片
+
+```vue
+<template>
+	<uv-loading-page :loading="true" image="https://www.uvui.cn/common/logo.png"></uv-loading-page>
+</template>
+```
+
+### 图标大小
+
+`icon-size`可以指定图标大小
+
+```vue
+<template>
+	<uv-loading-page :loading="true" icon-size="50rpx"></uv-loading-page>
+</template>
+```
+
+::: tip 完整示例下载地址
+
+[https://ext.dcloud.net.cn/plugin?name=uv-ui](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+:::
+
+### API
+---
+
+### LoadingPage Props
+
+| 参数			| 说明								| 类型					| 默认值		| 可选值					|
+| :-			| :-								| :-					| :-		| :-					|
+| loadingText	| 提示内容							| String &#124; Number	| ''	| -						|
+| image			| 文字上方用于替换loading动画的图片	| String				| -			| -						|
+| loadingMode	| 加载动画的模式						| String		| circle	| circle &#124; spinner &#124; semicircle	|
+| loading		| 是否加载中							| boolean				| false		| true &#124; false				|
+| bgColor		| 背景颜色							| String				| #ffffff	| -						|
+| color			| 文字颜色							| String				| #C8C8C8	| -						|
+| fontSize		| 文字大小							| String &#124; Number	| 19		| -						|
+| iconSize	| 图标大小							| String &#124; Number	| 28		| -						|
+| loadingColor	| 加载中图标的颜色					| String				| #C8C8C8	| -						|
+
+
+

package/docs/components/modal.md

@@ -0,0 +1,230 @@
+## Modal 模态框 <to-api/>
+
+<demo-model url="/pages/componentsC/modal/modal"></demo-model>
+
+::: tip ✈
+
+**组件名：uv-modal**
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uv-modal)
+
+:::
+
+弹出模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作。类似于`uniapp`官方API `uni.showModal(OBJECT)`。
+
+### 平台兼容性
+
+|App（vue）|App（nvue）|H5|小程序|VUE2|VUE3|
+|:-:|:-:|:-:|:-:|:-:|:-:|
+|√|√|√|√|√|√|
+
+### 基本使用
+
+
+默认情况下，模态框只有一个`确认`按钮：
+- 请至少要配置弹框的内容参数`content`。
+- 通过`ref`调用`open()`控制组件的打开。
+
+```vue
+<template>
+	<view>
+		<uv-modal ref="modal" title="标题" content='不知天上宫阙，今夕是何年' @confirm="confirm"></uv-modal>
+		<button @click="openModal">打开</button>
+	</view>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const modal = ref(null);
+function openModal() {
+  modal.value.open();
+}
+function confirm() {
+  console.log('点击确认按钮');
+}
+
+</script>
+```
+
+### 传入富文本内容
+
+有时候我们需要给模态框的内容，不一定是纯文本的字符串，可能会需要换行，嵌入其他元素等。这时候我们可以使用`slot`功能，再结合`uni`官方提供的`rictText`组件，
+就能传入富文本内容了，如下：
+
+```vue
+<template>
+	<view>
+		<uv-modal ref="modal" title="标题" @confirm="confirm">
+			<view class="slot-content">
+				<rich-text :nodes="content"></rich-text>
+			</view>
+		</uv-modal>
+		<button @click="openModal">打开</button>
+	</view>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const modal = ref(null);
+const content = ref(`<p style="max-height:30px;overflow:auto;">空山新雨后<br>天气晚来秋空山</p>`);
+function openModal() {
+  modal.value.open();
+}
+function confirm() {
+  console.log('点击确认按钮');
+}
+
+</script>
+```
+:::warning 温馨提示
+如果想要在模态框中设置滚动内容，可以配合上述富文本使用，设置最大高度和允许滚动属性即可
+:::
+
+### 自定义确定按钮
+
+- 一般用于在微信小程序弹窗通过按钮授权等场景。
+- 使用`ref`调用`close`方法手动关闭弹窗。
+
+```vue
+<template>
+	<view>
+		<uv-modal ref="modal" title="水调歌头" content='不知天上宫阙，今夕是何年' @confirm="confirm">
+			<template v-slot:confirmButton>
+				<button type="default" @click="closeModal">自定义按钮</button>
+			</template>
+		</uv-modal>
+		<button @click="openModal">打开</button>
+	</view>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const modal = ref(null);
+function openModal() {
+  modal.value.open();
+}
+function closeModal() {
+  modal.value.close();
+}
+function confirm() {
+  console.log('点击确认按钮');
+}
+
+</script>
+```
+
+### 异步关闭
+
+异步关闭只对“确定”按钮起作用，需要设置`asyncClose`为`true`，当点击确定按钮的时候，按钮的文字变成一个loading动画，此动画的颜色为
+`confirm-color`参数的颜色，同时Modal不会自动关闭，可以使用`ref`调用`close`方法手动关闭弹窗，也可以使用`ref`调用`closeLoading`方法关闭loading动画。
+
+```vue
+<template>
+	<view>
+		<uv-modal ref="modal" title="水调歌头" content='不知天上宫阙，今夕是何年' :asyncClose="true" @confirm="confirm"></uv-modal>
+		<button @click="openModal">打开</button>
+	</view>
+</template>
+<script setup>
+import { ref } from 'vue';
+
+const modal = ref(null);
+function openModal() {
+  modal.value.open();
+}
+function confirm() {
+  console.log('点击确认按钮');
+  setTimeout(() => {
+    modal.value.close();
+  }, 2000);
+}
+
+</script>
+```
+
+### 控制模态框宽度
+
+可以通过`width`属性设置模态框的宽度，不支持百分比，单位`px（rpx）`
+
+```vue
+<uv-modal ref="modal" content="不知天上宫阙，今夕是何年" width="500rpx"></uv-modal>
+```
+
+
+### 缩放效果
+
+默认开启缩放效果，在打开和收起模态框的时候，会带有缩放效果，具体效果请见示例，通过`zoom`属性配置
+
+```vue
+<uv-modal ref="modal" content="不知天上宫阙，今夕是何年" :zoom="false"></uv-modal>
+```
+
+### 完整示例
+
+::: tip 完整示例下载地址
+
+[https://ext.dcloud.net.cn/plugin?name=uv-ui](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+:::
+
+### API
+---
+
+### Modal Props
+
+| 参数				| 说明																						| 类型					| 默认值		|  可选值							|
+|:-					|:-																							|:-						|:-			|:-									|
+| title				| 标题内容																					| String				| -			| -									|
+| content			| 模态框内容，如传入`slot`内容，则此参数无效													| String				| -			| -									|
+| confirmText		| 确认按钮的文字																				| String				| 确认		| -									|
+| cancelText		| 取消按钮的文字																				| String				| 取消		| -									|
+| showConfirmButton	| 是否显示确认按钮																			| Boolean				| true		| true &#124; false								|
+| showCancelButton	| 是否显示取消按钮																			| Boolean				| false		| true &#124; false							|
+| confirmColor		| 确认按钮的颜色																				| String				| #2979ff	| -									|
+| cancelColor		| 取消按钮的颜色																				| String				| #606266	| -									|
+| buttonReverse		| 对调确认和取消的位置																		| Boolean				| false		| true &#124; false								|
+| zoom				| 是否开启缩放模式																			| Boolean				| true		| true	&#124; false							|
+| asyncClose		| 是否异步关闭，只对确定按钮有效，见[异步关闭](/components/modal.html#异步关闭)														| Boolean				| false		| true &#124; false								|
+| closeOnClickOverlay| 是否允许点击遮罩关闭该组件	| Boolean				| true		| true	&#124; false							|
+| negativeTop		| 往上偏移的值，给一个负的margin-top，往上偏移，避免和键盘重合的情况，单位任意，数值则默认为rpx单位	| String &#124; Number	| 0			| -									|
+| width				| modal宽度，不支持百分比，可以数值，单位`px(rpx)`												| String &#124; Number	| 650rpx	| -					|
+| zIndex	 | 弹出层的层级 | Number &#124; String	| 10075	| - |
+| align	<badge text="1.0.7"/>	 | 文本对齐方式	 | String	| left	| left &#124; center &#124;	right	|
+| textStyle	<badge text="1.0.7"/> | 文本扩展样式	| Object	| -	| -					|
+
+### Modal Methods
+
+| 事件名 | 说明		|
+| :- | :-		|
+| open	| 弹出模态框组件 | 
+| close	| 关闭模态框组件 | 
+| closeLoading | `:asyncClose="true"`异步关闭场景，验证通过则关闭，验证不通过不关闭且按钮恢复加载前的状态等场景，可以调用此方法关闭加载状态 |
+
+### Modal Events
+
+|事件名		|说明			|回调参数	    |
+|:-			|:-				|:-			   |
+| @confirm	| 点击确认按钮时触发		| -	|
+| @cancel	| 点击取消按钮时触发		| -	|
+| @close		| 关闭模态框组件时触发	        | - |
+
+### Modal Slots
+
+| 名称									| 说明													|
+|:-										|:-														|
+| default								| 传入自定义内容，一般为富文本，见上方说明					|
+| confirmButton | 传入自定义按钮，用于在微信小程序弹窗通过按钮授权的场景		|
+
+
+<style scoped>
+h3[id=modal-events] + table thead tr th:nth-child(2){
+	width: 50%;
+}
+
+h3[id=modal-methods] + table thead tr th:nth-child(2){
+	width: 70%;
+}
+h3[id=modal-slots] + table thead tr th:nth-child(2){
+	width: 70%;
+}
+</style>

package/docs/components/more.md

@@ -0,0 +1,13 @@
+## 其他小组件 <to-api/>
+
+### 平台兼容性
+
+|App（vue）|App（nvue）|H5|小程序|VUE2|VUE3|
+|:-:|:-:|:-:|:-:|:-:|:-:|
+|√|√|√|√|√|√|
+
+| 组件名	| 下载地址 | 说明 |
+|:-|:-|:-|
+| uv-status-bar | [https://ext.dcloud.net.cn/plugin?id=12290](https://ext.dcloud.net.cn/plugin?id=12290) | 状态栏占位，在uv-navbar、uv-popup、uv-notify等组件有复用该组件 |
+| uv-safe-bottom | [https://ext.dcloud.net.cn/plugin?id=12292](https://ext.dcloud.net.cn/plugin?id=12292) | 底部安全区，在uv-popup、uv-tabbar等组件有复用该组件 |
+| uv-toolbar | [https://ext.dcloud.net.cn/plugin?id=13896](https://ext.dcloud.net.cn/plugin?id=13896) | 工具条，在uv-picker、uv-pick-color等组件有复用该组件 |

package/docs/components/navbar.md

@@ -0,0 +1,192 @@
+### Navbar 自定义导航栏 <to-api/>
+
+<demo-model url="/pages/componentsD/navbar/navbar"></demo-model>
+
+::: tip ✈
+
+**组件名：uv-navbar**
+
+[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uv-navbar)
+
+:::
+
+该组件一般用于在特殊情况下，需要自定义导航栏的时候用到，一般建议使用`uni-app`带的导航栏。
+
+### 平台兼容性
+
+|App（vue）|App（nvue）|H5|小程序|VUE2|VUE3|
+|:-:|:-:|:-:|:-:|:-:|:-:|
+|√|√|√|√|√|√|
+
+### 基本使用
+
+默认情况下，该组件只有向左的箭头，**点击**可以返回上一页，如果您想将自定义导航栏用在tabbar(不存在要返回的逻辑)页面，
+这样会隐藏左边的返回图标区域。
+
+- 如果想在返回箭头的右边自定义类似“返回”字样，可以将`left-text`设置为“返回”
+- 通过`title`参数传入需要显示的标题，通过`title-width`(rpx)设置标题区域的宽度，文字超出会通过省略号隐藏
+- 通过`fixed`配置是否将导航栏固定在顶部
+
+:::tip 说明
+- 在小程序中，导航栏会自动适配导航栏右侧的胶囊位置，避开该区域
+- 组件底部默认有一条下边框，如您不需要，可以设置`border`为`false`即可
+:::
+
+```vue
+<template>
+	<view>
+		<uv-navbar title="个人中心" @leftClick="leftClick"></uv-navbar>
+	</view>
+</template>
+<script setup>
+function leftClick() {
+  console.log('leftClick');
+}
+
+</script>
+```
+
+### 注意事项
+
+- 既然是要自定义导航栏，那么首先就要取消系统自带的导航栏，需要在`uni-app`目的根目录的"pages.json"中设置，同时在此设置状态栏字体的颜色(H5无效)。
+- 自定义导航栏后，如果想通过`uni.setNavigationBarColor`动态设置导航栏颜色相关参数，是可能会出问题的，请勿使用此方式。
+
+```js
+// pages.json
+"pages": [
+	// navbar-自定义导航栏
+	{
+		"path": "/pages/navbar/index",
+		"style": {
+			"navigationStyle": "custom" ,// 隐藏系统导航栏
+			"navigationBarTextStyle": "white" // 状态栏字体为白色，只能为 white-白色，black-黑色 二选一
+		}
+	}
+]
+```
+
+### 导航栏高度
+
+可以通过`height`(单位`px`，默认44，和`uni-app`统导航栏高度一致)配置导航栏的高度，此高度为导航栏内容的高度，不含状态栏的高度，组件内部会自动加上状态栏的高度，并填充状态栏的占位区域。
+
+### 自定义导航栏内容
+
+通过自定义`slot`传入的内容
+
+```vue
+<template>
+	<view>
+		<uv-navbar leftText="返回" :fixed="false" title="个人中心" :safeAreaInsetTop="false">
+			<template v-slot:left>
+				<view class="uv-nav-slot">
+					<uv-icon name="arrow-left" size="19"></uv-icon>
+					<uv-line direction="column" :hairline="false" length="16" margin="0 8px"></uv-line>
+					<uv-icon name="home" size="20"></uv-icon>
+				</view>
+			</template>
+		</uv-navbar>
+	</view>
+</template>
+<style scoped lang="scss">
+	@mixin flex($direction: row) {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: $direction;
+	}
+	.uv-nav-slot {
+		@include flex;
+		align-items: center;
+		justify-content: space-between;
+		border-width: 0.5px;
+		border-radius: 100px;
+		border-color: #dadbde;
+		padding: 3px 7px;
+		opacity: 0.8;
+	}
+</style>
+```
+
+### 导航栏背景颜色
+
+`uv-ui`提供了一个`bgColor`参数，可以自定义导航栏的背景颜色，支持如下：
+
+- 普通颜色值
+- 透明度
+- 渐变色
+
+```vue
+<template>
+	<view>
+		<!-- 普通颜色 -->
+		<uv-navbar title="个人中心" bgColor="#c0c4cc"></uv-navbar>
+		<!-- 透明色 -->
+		<uv-navbar title="个人中心" bg-color="rgba(0,0,0,.5)"></uv-navbar>
+		<!-- 渐变色 -->
+		<uv-navbar 
+			title="个人中心" 
+			bg-color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))">
+		</uv-navbar>
+		<!-- 背景图片 -->
+		<uv-navbar 
+			title="个人中心" 
+			bg-color="https://via.placeholder.com/400x200.png/3c9cff/fff" 
+			imgMode="aspectFit">
+		</uv-navbar>
+	</view>
+</template>
+```
+
+### 完整示例
+
+::: tip 完整示例下载地址
+
+[https://ext.dcloud.net.cn/plugin?name=uv-ui](https://ext.dcloud.net.cn/plugin?name=uv-ui)
+
+:::
+
+### API
+---
+
+### NavBar Props
+
+| 参数			| 说明												| 类型					| 默认值		| 可选值	|
+| :-			| :-												| :-					| :-		| :-	|
+| title			| 导航栏标题，如设置为空字符，将会隐藏标题占位区域		| String				| -			| -		|
+| safeAreaInsetTop	| 是否开启顶部安全区适配								| Boolean				| true		| true &#124; false	|
+| placeholder	| 固定在顶部时，是否生成一个等高元素，以防止塌陷			| Boolean				| false		| true &#124; false	|
+| fixed			| 导航栏是否固定在顶部								| Boolean				| true		| true &#124; false	|
+| border		| 导航栏底部是否显示下边框								| Boolean				| false		| true &#124; false	|
+| leftIcon		| 左边返回图标的名称，只能为`uv-ui`自带的图标				| String				| arrow-left| -		|
+| leftText		| 左边的提示文字										| String				| -			| -		|
+| rightText		| 右边的提示文字										| String				| -			| -		|
+| rightIcon		| 右边返回图标的名称，只能为`uv-ui`自带的图标				| String				| -			| -		|
+| bgColor		| 导航栏背景设置，支持渐变色，支持图片背景		| String				| #ffffff	| -		|
+| imgMode		| `bgColor`为图片时，可以通过此属性设置裁剪模式		| String				| aspectFill	| 更多模式参考[image](https://uniapp.dcloud.net.cn/component/image.html) |
+| titleWidth	| 导航栏标题的最大宽度，内容超出会以省略号隐藏，单位`px(rpx)`	| String &#124; Number	| 400rpx	| -		|
+| height		| 导航栏高度(不包括状态栏高度在内，内部自动加上)，单位`px(rpx)`	| String &#124; Number	| 44px		| -		|
+| leftIconSize	| 左侧返回图标的大小	                    | String &#124; Number	| 20px		| -		| 
+| leftIconColor	| 左侧返回图标的颜色                 | String	| #303133		| -		| 
+| autoBack		| 点击左侧区域(返回图标)，是否自动返回上一页			| Boolean				| false		| true &#124; false	|
+| titleStyle 	| 标题的样式，对象或字符串形式			| String &#124; Object				| -		| -	|
+
+### NavBar Events
+
+| 名称		| 参数		| 说明			|
+| :-		| :-			| :-		|
+| @leftClick	| -	| 点击左侧区域	|
+| @rightClick| -	| 点击右侧区域	|
+
+### NavBar Slots
+
+| 名称	| 说明			|
+| :-	| :-			|
+| left	| 自定义左侧部分内容	|
+| right	| 自定义右侧部分内容	|
+| center	| 自定义中部内容	|
+
+<style scoped>
+h3[id=navbar-slots] + table thead tr th:nth-child(2){
+	width: 70%;
+}
+</style>