[修改] 调整文档目录结构，修改Cell，NavBar

刘汉宸
1 parent 95417b87
Showing 9 changed files with 349 additions and 216 deletions Show diff stats
examples/router/routes.js
examples/views/docs/component/cell.md
examples/views/docs/component/specification.md
examples/views/docs/guide/specification.md
examples/views/layout/component.vue
packages/cell/index.css
packages/cell/index.vue
packages/navBar/index.css
packages/navBar/index.vue
@@ -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 },
 # 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
@@ -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
@@ -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
@@ -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: '',
@@ -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;
 <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>
 .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;
 <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>
1	# Cell 单元格	1	# Cell 单元格
2		2
3	-单元格	3	+常用单元格
4		4
5	## 基础用法	5	## 基础用法
6		6
7	-单元格说明	7	+基础单元格包括标题, 内容, 描述
8		8
9	-::: snippet 示例	9	+::: snippet 配置`title`属性显示标题, 配置`value`属性显示内容, 配置`label`属性显示描述
10		10
11	```html	11	```html
12	<template>	12	<template>
13	- <div class="list">
14	- <zui-cell title="单元格" value="内容" label="描述"></zui-cell>
15	- <zui-cell title="有图标" value="内容" icon="trendingup"></zui-cell>
16	- <zui-cell title="可点击" value="内容" label="描述" is-link>
17	- <zui-icon slot="icon" name="attachmoney" size="2rem" color="deepskyblue" />	13	+ <div class="demo-cell">
		14	+ <zui-cell title="选项一" value="内容一"></zui-cell>
		15	+ <zui-cell title="选项二" value="内容二" label="描述"></zui-cell>
		16	+ </div>
		17	+</template>
		18	+
		19	+<style>
		20	+.demo-cell {
		21	+ width: 400px;
		22	+}
		23	+</style>
		24	+```
		25	+
		26	+:::
		27	+
		28	+## 显示图标
		29	+
		30	+单元格支持显示左侧图标
		31	+
		32	+::: snippet 支持配置`icon`属性显示图标，也可通过`icon`插槽配置自定义内容
		33	+
		34	+```html
		35	+<template>
		36	+ <div class="demo-cell">
		37	+ <zui-cell title="显示图标" value="内容一" icon="message"></zui-cell>
		38	+ <zui-cell title="自定义图标" value="内容二">
		39	+ <zui-icon slot="icon" name="attachmoney" size="1.2rem" color="deepskyblue" />
18	</zui-cell>	40	</zui-cell>
19	- <zui-cell>
20	- <div slot="title">
21	- <div>开启微信通知</div>
22	- <div>关注微信公众号，可获取运单到账信息</div>
23	- </div>
24	- <div slot="right">
25	- icon
26	- </div>	41	+ </div>
		42	+</template>
		43	+
		44	+<style>
		45	+.demo-cell {
		46	+ width: 400px;
		47	+}
		48	+</style>
		49	+```
		50	+
		51	+:::
		52	+
		53	+## 点击效果
		54	+
		55	+支持配置`is-link`属性显示点击效果，配置`right-icon`属性改变右侧图标，配置`right`插槽自定义右侧内容
		56	+
		57	+::: snippet 配置`right-icon`属性改变右侧图标
		58	+
		59	+```html
		60	+<template>
		61	+ <div class="demo-cell">
		62	+ <zui-cell title="默认点击" value="内容" is-link></zui-cell>
		63	+ <zui-cell title="右侧图标" value="内容" right-icon="expandmore" is-link></zui-cell>
		64	+ <zui-cell title="自定义右侧内容" value="内容" is-link>
		65	+ <div slot="right">Right</div>
27	</zui-cell>	66	</zui-cell>
		67	+ </div>
		68	+</template>
		69	+
		70	+<style>
		71	+.demo-cell {
		72	+ width: 400px;
		73	+}
		74	+</style>
		75	+```
		76	+
		77	+:::
		78	+
		79	+## 综合示例
		80	+
		81	+一个常用的单元格示例
		82	+
		83	+::: snippet 综合示例
		84	+
		85	+```html
		86	+<template>
		87	+ <div class="demo-cell">
		88	+ <zui-cell title="单元格" value="内容" label="描述"></zui-cell>
		89	+ <zui-cell title="有图标" value="内容" icon="trendingup"></zui-cell>
28	<zui-cell is-link>	90	<zui-cell is-link>
29	<zui-icon slot="icon" name="error" size="2rem" color="deeppink" />	91	<zui-icon slot="icon" name="error" size="2rem" color="deeppink" />
30	<div slot="title">	92	<div slot="title">
31	<div class="zui-cell__title">开启微信通知</div>	93	<div class="zui-cell__title">开启微信通知</div>
32	- <div class="zui-cell__label">关注微信公众号，可获取运单到账信息</div>	94	+ <div class="zui-cell__label" style="overflow: hidden; text-overflow: ellipsis; display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;">
		95	+ 关注微信公众号，可获取运单到账信息关注微信公众号，可获取运单到账信息关注微信公众号，可获取运单到账信息关注微信公众号，可获取运单到账信息
		96	+ </div>
33	</div>	97	</div>
34	- <div slot="right" style="text-align: right;">	98	+ <div slot="right" style="height: 100%; text-align: right; display: flex; flex-direction: column; justify-content: space-between;">
35	<div style="font-size: 12px; color: grey;">2020-03-18</div>	99	<div style="font-size: 12px; color: grey;">2020-03-18</div>
36	- <div><zui-tag size="tiny" shape="circle" type="fill" fill-color="red" font-color="#fff">2</zui-tag></div>	100	+ <div><zui-tag size="tiny" shape="dot" type="fill"></zui-tag></div>
37	</div>	101	</div>
38	</zui-cell>	102	</zui-cell>
39	</div>	103	</div>
40	</template>	104	</template>
41		105
42	-<script>
43	-export default {
44	- data() {
45	- return {
46	- }
47	- },
48	-}
49	-</script>
50	-
51	<style>	106	<style>
52	-.list {	107	+.demo-cell {
53	width: 400px;	108	width: 400px;
54	}	109	}
55	</style>	110	</style>
56	```	111	```
57		112
58	-:::
59	\ No newline at end of file	113	\ No newline at end of file
		114	+:::
		115	+
		116	+## API
		117	+
		118	+## Attribute 属性
		119	+
		120	+参数\|说明\|类型\|可选值\|默认值
		121	+-\|-\|-\|-\|-
		122	+icon \| 图标 \| String \| - \| -
		123	+title \| 标题 \| String \| - \| -
		124	+value \| 内容 \| String \| - \| -
		125	+label \| 标签 \| String \| - \| -
		126	+isLink \| 是否显示点击效果 \| Boolean \| - \| -
		127	+rightIcon \| 右侧图标 \| String \| - \| enter
		128	+
		129	+## Events 事件
		130	+
		131	+事件名称\|说明\|回调参数
		132	+-\|-\|-
		133	+click \| 按钮点击事件 \| -
60	\ No newline at end of file	134	\ No newline at end of file
	@@ -1,105 +0,0 @@		@@ -1,105 +0,0 @@
1	-## 说明
2	-
3	-### 项目说明
4	-
5	-ZUI是则一针对APICloud开发的基于Vue的H5组件库。
6	-
7	-#### 项目结构
8	-
9	-```bash
10	-├── README.md # 说明文件
11	-├── babel.config.js
12	-├── examples # 项目展示，相当于正常Vue项目的src
13	-│ ├── App.vue
14	-│ ├── assets
15	-│ ├── components # 项目展示用到的组件
16	-│ ├── main.js
17	-│ ├── router
18	-│ │ ├── index.js
19	-│ │ └── routes.js # 静态路由配置文件
20	-│ ├── store.js
21	-│ ├── styles
22	-│ └── views # 视图文件
23	-│ ├── docs # markdown格式的页面目录
24	-│ │ ├── component
25	-│ │ │ ├── button.md
26	-│ │ │ ├── cell.md
27	-│ │ │ ├── icon.md
28	-│ │ │ ├── specification.md
29	-│ │ │ └── tag.md
30	-│ │ └── guide
31	-│ │ ├── installation.md
32	-│ │ └── introduce.md
33	-│ ├── layout # 项目的布局
34	-│ │ ├── component.vue
35	-│ │ ├── components
36	-│ │ │ └── header.vue
37	-│ │ └── default.vue
38	-│ └── page # 非markdown格式的页面
39	-│ ├── error
40	-│ │ └── 404.vue
41	-│ ├── index.vue
42	-│ └── other.vue
43	-├── package.json
44	-├── packages
45	-├── postcss.config.js
46	-├── public
47	-├── vue.config.js
48	-└── webpack
49	- └── markdown-loader.js # 对vue-cli进行markdown扩展
50	-```
51	-
52	-### 开发流程
53	-
54	-ZUI组件库的开发流程与基本Vue组件开发流程类似，但略有不同。
55	-
56	-> 需要注意
57	-> * 样式使用`CSS`编写，不使用任何预编译手段。
58	-> * 组件编写时，`禁止`出现`ES6`语法。
59	-
60	-#### 开发步骤
61	-
62	-新增一个组件的步骤如下：
63	-
64	-1. 在`packages`目录下创建组件文件
65	-2. 在`examples/views/docs/component`目录下创建对应的markdown文件
66	-3. 在`examples/router/routes.js`文件中的`_components`中创建对应组件的路由
67	-4. 编写步骤2已创建的markdown文件
68	-
69	-编写组件markdown文件的步骤如下：
70	-
71	-1. 编写对应组件名称，格式为 [首字母大写的组件名] + [组件中文名]
72	-2. 编写组件说明
73	-3. 编写组件不同状态下的使用方法
74	-4. 编写组件示例代码段，代码段以`::: snippet [代码段说明]`开头，以`:::`结尾
75	-
76	-### APICloud应用
77	-
78	-本组件库适用于默认的APICloud开发流程，即未经过编译的html文件通过script引入vue的方式。
79	-
80	-1. 在APICloud的`components`目录下(或其它组件目录，没有的话新建一个)新建一个组件名称对应的js文件。如：components/zui/button.js
81	-2. 编写js形式的Vue组件, 如：
82	-
83	-```js
84	-if (Vue) {
85	- Vue.component(
86	- 'zui-button',
87	- {
88	- name: 'Button',
89	- // ... 本项目中对应本组件的.vue文件中的方法，如data、computed、methods等
90	- template: '<div class="zui-button" :style="style" @click="onClick">' +
91	- '<slot></slot>' +
92	- '</div>', // 把本项目中.vue文件中的template通过字符串拼接的形式拼接起来，注意引号兼容
93	- }
94	- )
95	-}
96	-
97	-```
98	-
99	-> 这里需要注意字符串拼接时，容易出现引号兼容问题，因此在编写.vue文件时，尽量注意不要直接在template中出现单引号
100	-
101	-3. 新建一个与.js文件同名的.css文件
102	-4. 将本项目中对应组件的css复制到新建的.css文件中
103	-5. 在需要引用组件的APICloud页面通过`<style>`和`<script>`的方式分别引入对应文件
104	-
105	-> 注意本组件不包含vue本身，在APICloud的文件中引入时，注意在组件js之前先引入vue对应的js文件
106	\ No newline at end of file	0	\ No newline at end of file
	@@ -0,0 +1,105 @@		@@ -0,0 +1,105 @@
		1	+## 说明
		2	+
		3	+### 项目说明
		4	+
		5	+ZUI是则一针对APICloud开发的基于Vue的H5组件库。
		6	+
		7	+#### 项目结构
		8	+
		9	+```bash
		10	+├── README.md # 说明文件
		11	+├── babel.config.js
		12	+├── examples # 项目展示，相当于正常Vue项目的src
		13	+│ ├── App.vue
		14	+│ ├── assets
		15	+│ ├── components # 项目展示用到的组件
		16	+│ ├── main.js
		17	+│ ├── router
		18	+│ │ ├── index.js
		19	+│ │ └── routes.js # 静态路由配置文件
		20	+│ ├── store.js
		21	+│ ├── styles
		22	+│ └── views # 视图文件
		23	+│ ├── docs # markdown格式的页面目录
		24	+│ │ ├── component
		25	+│ │ │ ├── button.md
		26	+│ │ │ ├── cell.md
		27	+│ │ │ ├── icon.md
		28	+│ │ │ ├── specification.md
		29	+│ │ │ └── tag.md
		30	+│ │ └── guide
		31	+│ │ ├── installation.md
		32	+│ │ └── introduce.md
		33	+│ ├── layout # 项目的布局
		34	+│ │ ├── component.vue
		35	+│ │ ├── components
		36	+│ │ │ └── header.vue
		37	+│ │ └── default.vue
		38	+│ └── page # 非markdown格式的页面
		39	+│ ├── error
		40	+│ │ └── 404.vue
		41	+│ ├── index.vue
		42	+│ └── other.vue
		43	+├── package.json
		44	+├── packages
		45	+├── postcss.config.js
		46	+├── public
		47	+├── vue.config.js
		48	+└── webpack
		49	+ └── markdown-loader.js # 对vue-cli进行markdown扩展
		50	+```
		51	+
		52	+### 开发流程
		53	+
		54	+ZUI组件库的开发流程与基本Vue组件开发流程类似，但略有不同。
		55	+
		56	+> 需要注意
		57	+> * 样式使用`CSS`编写，不使用任何预编译手段。
		58	+> * 组件编写时，`禁止`出现`ES6`语法。
		59	+
		60	+#### 开发步骤
		61	+
		62	+新增一个组件的步骤如下：
		63	+
		64	+1. 在`packages`目录下创建组件文件
		65	+2. 在`examples/views/docs/component`目录下创建对应的markdown文件
		66	+3. 在`examples/router/routes.js`文件中的`_components`中创建对应组件的路由
		67	+4. 编写步骤2已创建的markdown文件
		68	+
		69	+编写组件markdown文件的步骤如下：
		70	+
		71	+1. 编写对应组件名称，格式为 [首字母大写的组件名] + [组件中文名]
		72	+2. 编写组件说明
		73	+3. 编写组件不同状态下的使用方法
		74	+4. 编写组件示例代码段，代码段以`::: snippet [代码段说明]`开头，以`:::`结尾
		75	+
		76	+### APICloud应用
		77	+
		78	+本组件库适用于默认的APICloud开发流程，即未经过编译的html文件通过script引入vue的方式。
		79	+
		80	+1. 在APICloud的`components`目录下(或其它组件目录，没有的话新建一个)新建一个组件名称对应的js文件。如：components/zui/button.js
		81	+2. 编写js形式的Vue组件, 如：
		82	+
		83	+```js
		84	+if (Vue) {
		85	+ Vue.component(
		86	+ 'zui-button',
		87	+ {
		88	+ name: 'Button',
		89	+ // ... 本项目中对应本组件的.vue文件中的方法，如data、computed、methods等
		90	+ template: '<div class="zui-button" :style="style" @click="onClick">' +
		91	+ '<slot></slot>' +
		92	+ '</div>', // 把本项目中.vue文件中的template通过字符串拼接的形式拼接起来，注意引号兼容
		93	+ }
		94	+ )
		95	+}
		96	+
		97	+```
		98	+
		99	+> 这里需要注意字符串拼接时，容易出现引号兼容问题，因此在编写.vue文件时，尽量注意不要直接在template中出现单引号
		100	+
		101	+3. 新建一个与.js文件同名的.css文件
		102	+4. 将本项目中对应组件的css复制到新建的.css文件中
		103	+5. 在需要引用组件的APICloud页面通过`<style>`和`<script>`的方式分别引入对应文件
		104	+
		105	+> 注意本组件不包含vue本身，在APICloud的文件中引入时，注意在组件js之前先引入vue对应的js文件
0	\ No newline at end of file	106	\ No newline at end of file