diff --git a/examples/router/routes.js b/examples/router/routes.js
index a0ff018..f1a0ff0 100644
--- a/examples/router/routes.js
+++ b/examples/router/routes.js
@@ -16,13 +16,19 @@ const _guides = [
     meta: { title: '安装' },
     component: () => import('@/views/docs/guide/installation.md'),
   },
+  {
+    path: 'specification',
+    name: 'specification',
+    meta: { title: '说明' },
+    component: () => import('@/views/docs/guide/specification.md'),
+  },
 ];
 
 // 组件页面的文档
 
 const _components = [
   {
-    group: '通用',
+    group: '基础组件',
     children: [
       {
         path: 'button',
@@ -42,18 +48,39 @@ const _components = [
         meta: { title: 'Icon 图标' },
         component: () => import('@/views/docs/component/icon.md'),
       },
+    ]
+  },
+  {
+    group: '展示组件',
+    children: [
+      {
+        path: 'steps',
+        name: 'steps',
+        meta: { title: 'Steps 步骤条' },
+        component: () => import('@/views/docs/component/steps.md'),
+      },
       {
         path: 'tag',
         name: 'tag',
         meta: { title: 'Tag 标签' },
         component: () => import('@/views/docs/component/tag.md'),
       },
+    ]
+  },
+  {
+    group: '反馈组件',
+    children: [
       {
         path: 'popup',
         name: 'popup',
         meta: { title: 'Popup 弹出框' },
         component: () => import('@/views/docs/component/popup.md'),
       },
+    ]
+  },
+  {
+    group: '导航组件',
+    children: [
       {
         path: 'nav-bar',
         name: 'nav-bar',
@@ -66,32 +93,18 @@ const _components = [
         meta: { title: 'TabBar 标签栏' },
         component: () => import('@/views/docs/component/tab-bar.md'),
       },
-      {
-        path: 'steps',
-        name: 'steps',
-        meta: { title: 'Steps 步骤条' },
-        component: () => import('@/views/docs/component/steps.md'),
-      },
     ]
   },
+];
+
+const _others = [
   {
-    group: '其它',
-    children: [
-      {
-        path: 'specification',
-        name: 'specification',
-        meta: { title: 'Specification 说明' },
-        component: () => import('@/views/docs/component/specification.md'),
-      },
-      {
-        path: 'other',
-        name: 'other',
-        meta: { title: 'Other 其它' },
-        component: () => import('@/views/page/other'),
-      },
-    ]
-  }
-]
+    path: 'other',
+    name: 'other',
+    meta: { title: '其它' },
+    component: () => import('@/views/page/other'),
+  },
+];
 
 let _components_children = [];
 _components.forEach(data => {
@@ -117,13 +130,14 @@ const _pages = [
     meta: { title: '组件', path: '/component' },
     component: ComponentLayout,
     redirect: `/component/${_guides[0].path || 'detail'}`,
-    children: [..._components_children, ..._guides]
+    children: [..._components_children, ..._guides, ..._others]
   }
 ]
 
 export const pages = _pages;
 export const guides = _guides;
 export const components = _components;
+export const others = _others;
 
 export default [
   { path: '*', redirect: '/404', hidden: true },
diff --git a/examples/views/docs/component/cell.md b/examples/views/docs/component/cell.md
index 115d37c..8c19cdc 100644
--- a/examples/views/docs/component/cell.md
+++ b/examples/views/docs/component/cell.md
@@ -1,58 +1,132 @@
 # Cell 单元格
 
-单元格
+常用单元格
 
 ## 基础用法
 
-单元格说明
+基础单元格包括**标题**, **内容**, **描述**
 
-::: snippet 示例
+::: snippet 配置`title`属性显示标题, 配置`value`属性显示内容, 配置`label`属性显示描述
 
 ```html
 <template>
-  <div class="list">
-    <zui-cell title="单元格" value="内容" label="描述"></zui-cell>
-    <zui-cell title="有图标" value="内容" icon="trendingup"></zui-cell>
-    <zui-cell title="可点击" value="内容" label="描述" is-link>
-      <zui-icon slot="icon" name="attachmoney" size="2rem" color="deepskyblue" />
+  <div class="demo-cell">
+    <zui-cell title="选项一" value="内容一"></zui-cell>
+    <zui-cell title="选项二" value="内容二" label="描述"></zui-cell>
+  </div>
+</template>
+
+<style>
+.demo-cell {
+  width: 400px;
+}
+</style>
+```
+
+:::
+
+## 显示图标
+
+单元格支持显示左侧图标
+
+::: snippet 支持配置`icon`属性显示图标，也可通过`icon`插槽配置自定义内容
+
+```html
+<template>
+  <div class="demo-cell">
+    <zui-cell title="显示图标" value="内容一" icon="message"></zui-cell>
+    <zui-cell title="自定义图标" value="内容二">
+      <zui-icon slot="icon" name="attachmoney" size="1.2rem" color="deepskyblue" />
     </zui-cell>
-    <zui-cell>
-      <div slot="title">
-        <div>开启微信通知</div>
-        <div>关注微信公众号，可获取运单到账信息</div>
-      </div>
-      <div slot="right">
-        icon
-      </div>
+  </div>
+</template>
+
+<style>
+.demo-cell {
+  width: 400px;
+}
+</style>
+```
+
+:::
+
+## 点击效果
+
+支持配置`is-link`属性显示点击效果，配置`right-icon`属性改变右侧图标，配置`right`插槽自定义右侧内容
+
+::: snippet 配置`right-icon`属性改变右侧图标
+
+```html
+<template>
+  <div class="demo-cell">
+    <zui-cell title="默认点击" value="内容" is-link></zui-cell>
+    <zui-cell title="右侧图标" value="内容" right-icon="expandmore" is-link></zui-cell>
+    <zui-cell title="自定义右侧内容" value="内容" is-link>
+      <div slot="right">Right</div>
     </zui-cell>
+  </div>
+</template>
+
+<style>
+.demo-cell {
+  width: 400px;
+}
+</style>
+```
+
+:::
+
+## 综合示例
+
+一个常用的单元格示例
+
+::: snippet 综合示例
+
+```html
+<template>
+  <div class="demo-cell">
+    <zui-cell title="单元格" value="内容" label="描述"></zui-cell>
+    <zui-cell title="有图标" value="内容" icon="trendingup"></zui-cell>
     <zui-cell is-link>
       <zui-icon slot="icon" name="error" size="2rem" color="deeppink" />
       <div slot="title">
         <div class="zui-cell__title">开启微信通知</div>
-        <div class="zui-cell__label">关注微信公众号，可获取运单到账信息</div>
+        <div class="zui-cell__label" style="overflow: hidden; text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;">
+          关注微信公众号，可获取运单到账信息关注微信公众号，可获取运单到账信息关注微信公众号，可获取运单到账信息关注微信公众号，可获取运单到账信息
+        </div>
       </div>
-      <div slot="right" style="text-align: right;">
+      <div slot="right" style="height: 100%; text-align: right; display: flex; flex-direction: column; justify-content: space-between;">
         <div style="font-size: 12px; color: grey;">2020-03-18</div>
-        <div><zui-tag size="tiny" shape="circle" type="fill" fill-color="red" font-color="#fff">2</zui-tag></div>
+        <div><zui-tag size="tiny" shape="dot" type="fill"></zui-tag></div>
       </div>
     </zui-cell>
   </div>
 </template>
 
-<script>
-export default {
-  data() {
-    return {
-    }
-  },
-}
-</script>
-
 <style>
-.list {
+.demo-cell {
   width: 400px;
 }
 </style>
 ```
 
-:::
\ No newline at end of file
+:::
+
+## API
+
+## Attribute 属性
+
+参数|说明|类型|可选值|默认值
+-|-|-|-|-
+icon | 图标 | String | - | -
+title | 标题 | String | - | -
+value | 内容 | String | - | -
+label | 标签 | String | - | -
+isLink | 是否显示点击效果 | Boolean | - | -
+rightIcon | 右侧图标 | String | - | enter
+
+## Events 事件
+
+事件名称|说明|回调参数
+-|-|-
+click | 按钮点击事件 | -
\ No newline at end of file
diff --git a/examples/views/docs/component/specification.md b/examples/views/docs/component/specification.md
deleted file mode 100644
index 7c6b5eb..0000000
--- a/examples/views/docs/component/specification.md
+++ /dev/null
@@ -1,105 +0,0 @@
-## 说明
-
-### 项目说明
-
-ZUI是则一针对APICloud开发的基于Vue的H5组件库。
-
-#### 项目结构
-
-```bash
-├── README.md                            # 说明文件
-├── babel.config.js
-├── examples                             # 项目展示，相当于正常Vue项目的src
-│   ├── App.vue
-│   ├── assets
-│   ├── components                       # 项目展示用到的组件
-│   ├── main.js
-│   ├── router
-│   │   ├── index.js
-│   │   └── routes.js                    # 静态路由配置文件
-│   ├── store.js
-│   ├── styles
-│   └── views                            # 视图文件
-│       ├── docs                         # markdown格式的页面目录
-│       │   ├── component
-│       │   │   ├── button.md
-│       │   │   ├── cell.md
-│       │   │   ├── icon.md
-│       │   │   ├── specification.md
-│       │   │   └── tag.md
-│       │   └── guide
-│       │       ├── installation.md
-│       │       └── introduce.md
-│       ├── layout                       # 项目的布局
-│       │   ├── component.vue
-│       │   ├── components
-│       │   │   └── header.vue
-│       │   └── default.vue
-│       └── page                         # 非markdown格式的页面
-│           ├── error
-│           │   └── 404.vue
-│           ├── index.vue
-│           └── other.vue
-├── package.json
-├── packages
-├── postcss.config.js
-├── public
-├── vue.config.js
-└── webpack
-    └── markdown-loader.js               # 对vue-cli进行markdown扩展
-```
-
-### 开发流程
-
-ZUI组件库的开发流程与基本Vue组件开发流程类似，但略有不同。
-
-> 需要注意
-> * 样式使用`CSS`编写，不使用任何预编译手段。
-> * 组件编写时，`禁止`出现`ES6`语法。
-
-#### 开发步骤
-
-新增一个组件的步骤如下：
-
-1. 在`packages`目录下创建组件文件
-2. 在`examples/views/docs/component`目录下创建对应的markdown文件
-3. 在`examples/router/routes.js`文件中的`_components`中创建对应组件的路由
-4. 编写步骤2已创建的markdown文件
-
-编写组件markdown文件的步骤如下：
-
-1. 编写对应组件名称，格式为 **[首字母大写的组件名] + [组件中文名]**
-2. 编写组件说明
-3. 编写组件不同状态下的使用方法
-4. 编写组件示例代码段，代码段以`::: snippet [代码段说明]`开头，以`:::`结尾
-
-### APICloud应用
-
-本组件库适用于默认的APICloud开发流程，即未经过编译的html文件通过script引入vue的方式。
-
-1. 在APICloud的`components`目录下(或其它组件目录，没有的话新建一个)新建一个组件名称对应的js文件。如：**components/zui/button.js**
-2. 编写js形式的Vue组件, 如：
-
-```js
-if (Vue) {
-  Vue.component(
-    'zui-button',
-    {
-      name: 'Button',
-      // ... 本项目中对应本组件的.vue文件中的方法，如data、computed、methods等
-      template: '<div class="zui-button" :style="style" @click="onClick">' +
-        '<slot></slot>' +
-      '</div>', // 把本项目中.vue文件中的template通过字符串拼接的形式拼接起来，注意引号兼容
-    }
-  )
-}
-
-```
-
-> 这里需要注意字符串拼接时，容易出现引号兼容问题，因此在编写.vue文件时，尽量注意不要直接在template中出现单引号
-
-3. 新建一个与.js文件同名的.css文件
-4. 将本项目中对应组件的css复制到新建的.css文件中
-5. 在需要引用组件的APICloud页面通过`<style>`和`<script>`的方式分别引入对应文件
-
-> 注意本组件不包含vue本身，在APICloud的文件中引入时，注意在组件js之前先引入vue对应的js文件
\ No newline at end of file
diff --git a/examples/views/docs/guide/specification.md b/examples/views/docs/guide/specification.md
new file mode 100644
index 0000000..7c6b5eb
--- /dev/null
+++ b/examples/views/docs/guide/specification.md
@@ -0,0 +1,105 @@
+## 说明
+
+### 项目说明
+
+ZUI是则一针对APICloud开发的基于Vue的H5组件库。
+
+#### 项目结构
+
+```bash
+├── README.md                            # 说明文件
+├── babel.config.js
+├── examples                             # 项目展示，相当于正常Vue项目的src
+│   ├── App.vue
+│   ├── assets
+│   ├── components                       # 项目展示用到的组件
+│   ├── main.js
+│   ├── router
+│   │   ├── index.js
+│   │   └── routes.js                    # 静态路由配置文件
+│   ├── store.js
+│   ├── styles
+│   └── views                            # 视图文件
+│       ├── docs                         # markdown格式的页面目录
+│       │   ├── component
+│       │   │   ├── button.md
+│       │   │   ├── cell.md
+│       │   │   ├── icon.md
+│       │   │   ├── specification.md
+│       │   │   └── tag.md
+│       │   └── guide
+│       │       ├── installation.md
+│       │       └── introduce.md
+│       ├── layout                       # 项目的布局
+│       │   ├── component.vue
+│       │   ├── components
+│       │   │   └── header.vue
+│       │   └── default.vue
+│       └── page                         # 非markdown格式的页面
+│           ├── error
+│           │   └── 404.vue
+│           ├── index.vue
+│           └── other.vue
+├── package.json
+├── packages
+├── postcss.config.js
+├── public
+├── vue.config.js
+└── webpack
+    └── markdown-loader.js               # 对vue-cli进行markdown扩展
+```
+
+### 开发流程
+
+ZUI组件库的开发流程与基本Vue组件开发流程类似，但略有不同。
+
+> 需要注意
+> * 样式使用`CSS`编写，不使用任何预编译手段。
+> * 组件编写时，`禁止`出现`ES6`语法。
+
+#### 开发步骤
+
+新增一个组件的步骤如下：
+
+1. 在`packages`目录下创建组件文件
+2. 在`examples/views/docs/component`目录下创建对应的markdown文件
+3. 在`examples/router/routes.js`文件中的`_components`中创建对应组件的路由
+4. 编写步骤2已创建的markdown文件
+
+编写组件markdown文件的步骤如下：
+
+1. 编写对应组件名称，格式为 **[首字母大写的组件名] + [组件中文名]**
+2. 编写组件说明
+3. 编写组件不同状态下的使用方法
+4. 编写组件示例代码段，代码段以`::: snippet [代码段说明]`开头，以`:::`结尾
+
+### APICloud应用
+
+本组件库适用于默认的APICloud开发流程，即未经过编译的html文件通过script引入vue的方式。
+
+1. 在APICloud的`components`目录下(或其它组件目录，没有的话新建一个)新建一个组件名称对应的js文件。如：**components/zui/button.js**
+2. 编写js形式的Vue组件, 如：
+
+```js
+if (Vue) {
+  Vue.component(
+    'zui-button',
+    {
+      name: 'Button',
+      // ... 本项目中对应本组件的.vue文件中的方法，如data、computed、methods等
+      template: '<div class="zui-button" :style="style" @click="onClick">' +
+        '<slot></slot>' +
+      '</div>', // 把本项目中.vue文件中的template通过字符串拼接的形式拼接起来，注意引号兼容
+    }
+  )
+}
+
+```
+
+> 这里需要注意字符串拼接时，容易出现引号兼容问题，因此在编写.vue文件时，尽量注意不要直接在template中出现单引号
+
+3. 新建一个与.js文件同名的.css文件
+4. 将本项目中对应组件的css复制到新建的.css文件中
+5. 在需要引用组件的APICloud页面通过`<style>`和`<script>`的方式分别引入对应文件
+
+> 注意本组件不包含vue本身，在APICloud的文件中引入时，注意在组件js之前先引入vue对应的js文件
\ No newline at end of file
diff --git a/examples/views/layout/component.vue b/examples/views/layout/component.vue
index c70cd42..98b983b 100644
--- a/examples/views/layout/component.vue
+++ b/examples/views/layout/component.vue
@@ -13,6 +13,8 @@
             <template slot="title">{{ component.group }}</template>
             <el-menu-item v-for="(data, index) in component.children" :key="index" :index="data.name">{{ data.meta.title }}</el-menu-item>
           </el-menu-item-group>
+          <h4 class="side-menu__group">其它</h4>
+          <el-menu-item v-for="(doc, index) in otherList" :key="`other-${index}`" :index="doc.name">{{ doc.meta.title }}</el-menu-item>
         </el-menu>
       </el-aside>
       <el-main class="layout-main__component">
@@ -27,7 +29,7 @@
 
 <script>
 import LayoutHeader from './components/header';
-import { guides, components } from '@/router/routes';
+import { guides, components, others } from '@/router/routes';
 
 const headerHeight = 80;
 
@@ -38,6 +40,7 @@ export default {
     return {
       activeMenu: 'introduce',
       guideList: guides,
+      otherList: others,
       componentList: components,
       anchorList: [],
       currentAnchor: '',
diff --git a/packages/cell/index.css b/packages/cell/index.css
index 643c718..85db941 100644
--- a/packages/cell/index.css
+++ b/packages/cell/index.css
@@ -3,7 +3,6 @@
   display: -webkit-box;
   display: -webkit-flex;
   display: flex;
-  align-items: center;
   box-sizing: border-box;
   width: 100%;
   padding: 10px 16px;
@@ -22,10 +21,14 @@
 }
 
 .zui-cell__left-icon {
+  display: flex;
+  align-items: center;
   margin-right: 5px;
 }
 
 .zui-cell__right-icon {
+  display: flex;
+  align-items: center;
   margin-left: 5px;
 }
 
@@ -53,6 +56,18 @@
   flex: 1;
 }
 
+.zui-cell__title {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.zui-cell__value {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
 .zui-cell__value {
   position: relative;
   overflow: hidden;
diff --git a/packages/cell/index.vue b/packages/cell/index.vue
index 97d5467..c22b34c 100644
--- a/packages/cell/index.vue
+++ b/packages/cell/index.vue
@@ -1,41 +1,41 @@
 <template>
   <div class="zui-cell" :class="classRender" @click="onClick">
-    <div v-if="$slots.icon" class="zui-cell__left-icon">
-      <slot name="icon"></slot>
+    <div v-if="$slots.icon || icon" class="zui-cell__left-icon">
+      <slot v-if="$slots.icon" name="icon"></slot>
+      <zui-icon v-else-if="icon" class="zui-cell__left-icon" :name="icon"></zui-icon>
     </div>
-    <zui-icon v-else-if="icon" class="zui-cell__left-icon" :name="icon"></zui-icon>
     <div v-if="$slots.title" class="zui-cell__title">
       <slot name="title"></slot>
       <div v-if="$slots.label" class="zui-cell__label">
         <slot name="label"></slot>
       </div>
       <div v-else-if="label" class="zui-cell__label">
-        {{ label }}
+        <span>{{ label }}</span>
       </div>
     </div>
     <div v-else-if="title" class="zui-cell__title">
-      {{ title }}
+      <span>{{ title }}</span>
       <div v-if="$slots.label" class="zui-cell__label">
         <slot name="label"></slot>
       </div>
       <div v-else-if="label" class="zui-cell__label">
-        {{ label }}
+        <span>{{ label }}</span>
       </div>
     </div>
     <div v-if="$slots.default" class="zui-cell__value">
       <slot></slot>
     </div>
     <div v-else-if="value" class="zui-cell__value">{{ value }}</div>
-    <div v-if="$slots.right" class="zui-cell__right-icon">
-      <slot name="right"></slot>
+    <div v-if="$slots.right || rightIcon" class="zui-cell__right-icon">
+      <slot v-if="$slots.right" name="right"></slot>
+      <zui-icon v-else-if="rightIcon && isLink" class="zui-cell__right-icon" :name="rightIcon"></zui-icon>
     </div>
-    <zui-icon v-else-if="rightIcon && isLink" class="zui-cell__right-icon" :name="rightIcon"></zui-icon>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'Cell',
+  name: "Cell",
   props: {
     icon: String,
     title: String,
@@ -44,24 +44,24 @@ export default {
     isLink: Boolean,
     rightIcon: {
       type: String,
-      default: 'enter'
-    },
+      default: "enter"
+    }
   },
   computed: {
     classRender: function() {
       return {
-        'zui-cell--clickable': this.isLink
-      }
+        "zui-cell--clickable": this.isLink
+      };
     }
   },
   methods: {
     onClick: function() {
-      if (this.$listeners['click']) {
-        this.$emit('click');
+      if (this.$listeners["click"]) {
+        this.$emit("click");
       }
     }
   }
-}
+};
 </script>
 
 <style>
diff --git a/packages/navBar/index.css b/packages/navBar/index.css
index 2f90015..284812f 100644
--- a/packages/navBar/index.css
+++ b/packages/navBar/index.css
@@ -1,7 +1,6 @@
 .zui-nav-bar {
   min-height: 2.25rem;
   display: flex;
-  align-items: center;
   position: relative;
   text-align: center;
   justify-content: space-between;
@@ -9,7 +8,6 @@
   background-color: #f5f5f5;
   color: #000;
   transition: all 300ms;
-  padding: 10px;
 }
 .zui-nav-bar--primary {
   background-color: #FCD404;
@@ -29,21 +27,34 @@
 }
 .zui-nav-bar__title {
   max-width: 60%;
-  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  flex: auto;
   font-size: 18px;
   font-weight: 700;
 }
 .zui-nav-bar__left,
 .zui-nav-bar__right {
+  flex: 1;
   font-size: 16px;
   display: flex;
   align-items: center;
 }
 .zui-nav-bar__left {
   justify-content: flex-start;
+  padding-left: 10px;
 }
 .zui-nav-bar__right {
   justify-content: flex-end;
+  padding-right: 10px;
+}
+.zui-nav-bar__left,
+.zui-nav-bar__right,
+.zui-nav-bar__title {
+  padding-top: 9px;
+  padding-bottom: 9px;
 }
 .zui-nav-bar__text {
   display: inline-block;
diff --git a/packages/navBar/index.vue b/packages/navBar/index.vue
index b89966f..eae1702 100644
--- a/packages/navBar/index.vue
+++ b/packages/navBar/index.vue
@@ -1,54 +1,65 @@
 <template>
   <div class="zui-nav-bar" :class="classRender" :style="styleRender">
-    <div class="zui-nav-bar__left" @click="clickLeft">
-      <slot v-if="$scopedSlots[leftSlot] || $slots[leftSlot]" :name="leftSlot"></slot>
-      <template v-else>
-        <zui-icon v-if="leftArrow" :name="leftIcon" size="1.3rem"></zui-icon>
-        <div class="zui-nav-bar__text" v-if="leftText">{{ leftText }}</div>
-      </template>
+    <div class="zui-nav-bar__left">
+      <span @click="clickLeft">
+        <slot v-if="$scopedSlots[leftSlot] || $slots[leftSlot]" :name="leftSlot"></slot>
+        <template v-else>
+          <zui-icon v-if="leftArrow" :name="leftIcon" size="1.3rem"></zui-icon>
+          <div class="zui-nav-bar__text" v-if="leftText">{{ leftText }}</div>
+        </template>
+      </span>
     </div>
     <div class="zui-nav-bar__title md-ellipsis">
       <slot v-if="$scopedSlots[titleSlot] || $slots[titleSlot]" :name="titleSlot"></slot>
       <template v-else>{{ title }}</template>
     </div>
-    <div class="zui-nav-bar__right" @click="clickRight">
-      <slot v-if="$scopedSlots[rightSlot] || $slots[rightSlot]" :name="rightSlot"></slot>
-      <template v-else>
-        <div class="zui-nav-bar__text" v-if="rightText">{{ rightText }}</div>
-      </template>
+    <div class="zui-nav-bar__right">
+      <span @click="clickRight">
+        <slot v-if="$scopedSlots[rightSlot] || $slots[rightSlot]" :name="rightSlot"></slot>
+        <template v-else>
+          <div class="zui-nav-bar__text" v-if="rightText">{{ rightText }}</div>
+        </template>
+      </span>
     </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: 'NavBar',
+  name: "NavBar",
   props: {
-    title: { // 标题
+    title: {
+      // 标题
       type: String,
-      default: ''
+      default: ""
     },
-    leftIcon: { // 左侧图标
+    leftIcon: {
+      // 左侧图标
       type: String,
-      default: 'return'
+      default: "return"
     },
-    leftText: { // 左侧文案
+    leftText: {
+      // 左侧文案
       type: String,
-      default: ''
+      default: ""
     },
-    rightText: { // 右侧文案
+    rightText: {
+      // 右侧文案
       type: String,
-      default: ''
+      default: ""
     },
-    leftArrow: { // 是否显示左侧箭头
+    leftArrow: {
+      // 是否显示左侧箭头
       type: Boolean,
       default: false
     },
-    fixed: { // 是否固定在顶部
+    fixed: {
+      // 是否固定在顶部
       type: Boolean,
       default: false
     },
-    border: { // 是否显示下边框
+    border: {
+      // 是否显示下边框
       type: Boolean,
       default: false
     },
@@ -56,30 +67,35 @@ export default {
       type: [Number, String],
       default: 1
     },
-    primary: { // 是否为品牌色主题
+    primary: {
+      // 是否为品牌色主题
       type: Boolean,
       default: false
     }
   },
   data: function() {
     return {
-      leftSlot: 'left',
-      rightSlot: 'right',
-      titleSlot: 'title'
-    }
+      leftSlot: "left",
+      rightSlot: "right",
+      titleSlot: "title"
+    };
   },
   computed: {
     classRender: function() {
-      return { 'zui-nav-bar--border-bottom': this.border, 'zui-nav-bar--fixed': this.fixed, 'zui-nav-bar--primary': this.primary };
+      return {
+        "zui-nav-bar--border-bottom": this.border,
+        "zui-nav-bar--fixed": this.fixed,
+        "zui-nav-bar--primary": this.primary
+      };
     },
     styleRender: function() {
-      return { 'z-index': this.zIndex };
+      return { "z-index": this.zIndex };
     }
   },
   methods: {
     clickLeft: function() {
-      if (this.$listeners['click-left']) {
-        this.$emit('click-left');
+      if (this.$listeners["click-left"]) {
+        this.$emit("click-left");
       } else {
         if (window.api) {
           api.closeWin();
@@ -87,10 +103,10 @@ export default {
       }
     },
     clickRight: function() {
-      this.$emit('click-right');
+      this.$emit("click-right");
     }
   }
-}
+};
 </script>
 
 <style>
--
libgit2 0.21.0