frontend / zui

Download as
Browse Code »

Commit c5aea77d3cbf408ebdeb38d26163fb29ad247e79

Authored by 刘汉宸
1 parent 95417b87
Exists in master

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

Showing 9 changed files with 349 additions and 216 deletions   Show diff stats
examples/router/routes.js
  Diff comments   View file @c5aea77
... ... @@ -16,13 +16,19 @@ const _guides = [
16 16 meta: { title: '安装' },
17 17 component: () => import('@/views/docs/guide/installation.md'),
18 18 },
  19 + {
  20 + path: 'specification',
  21 + name: 'specification',
  22 + meta: { title: '说明' },
  23 + component: () => import('@/views/docs/guide/specification.md'),
  24 + },
19 25 ];
20 26  
21 27 // 组件页面的文档
22 28  
23 29 const _components = [
24 30 {
25   - group: '通用',
  31 + group: '基础组件',
26 32 children: [
27 33 {
28 34 path: 'button',
... ... @@ -42,18 +48,39 @@ const _components = [
42 48 meta: { title: 'Icon 图标' },
43 49 component: () => import('@/views/docs/component/icon.md'),
44 50 },
  51 + ]
  52 + },
  53 + {
  54 + group: '展示组件',
  55 + children: [
  56 + {
  57 + path: 'steps',
  58 + name: 'steps',
  59 + meta: { title: 'Steps 步骤条' },
  60 + component: () => import('@/views/docs/component/steps.md'),
  61 + },
45 62 {
46 63 path: 'tag',
47 64 name: 'tag',
48 65 meta: { title: 'Tag 标签' },
49 66 component: () => import('@/views/docs/component/tag.md'),
50 67 },
  68 + ]
  69 + },
  70 + {
  71 + group: '反馈组件',
  72 + children: [
51 73 {
52 74 path: 'popup',
53 75 name: 'popup',
54 76 meta: { title: 'Popup 弹出框' },
55 77 component: () => import('@/views/docs/component/popup.md'),
56 78 },
  79 + ]
  80 + },
  81 + {
  82 + group: '导航组件',
  83 + children: [
57 84 {
58 85 path: 'nav-bar',
59 86 name: 'nav-bar',
... ... @@ -66,32 +93,18 @@ const _components = [
66 93 meta: { title: 'TabBar 标签栏' },
67 94 component: () => import('@/views/docs/component/tab-bar.md'),
68 95 },
69   - {
70   - path: 'steps',
71   - name: 'steps',
72   - meta: { title: 'Steps 步骤条' },
73   - component: () => import('@/views/docs/component/steps.md'),
74   - },
75 96 ]
76 97 },
  98 +];
  99 +
  100 +const _others = [
77 101 {
78   - group: '其它',
79   - children: [
80   - {
81   - path: 'specification',
82   - name: 'specification',
83   - meta: { title: 'Specification 说明' },
84   - component: () => import('@/views/docs/component/specification.md'),
85   - },
86   - {
87   - path: 'other',
88   - name: 'other',
89   - meta: { title: 'Other 其它' },
90   - component: () => import('@/views/page/other'),
91   - },
92   - ]
93   - }
94   -]
  102 + path: 'other',
  103 + name: 'other',
  104 + meta: { title: '其它' },
  105 + component: () => import('@/views/page/other'),
  106 + },
  107 +];
95 108  
96 109 let _components_children = [];
97 110 _components.forEach(data => {
... ... @@ -117,13 +130,14 @@ const _pages = [
117 130 meta: { title: '组件', path: '/component' },
118 131 component: ComponentLayout,
119 132 redirect: `/component/${_guides[0].path || 'detail'}`,
120   - children: [..._components_children, ..._guides]
  133 + children: [..._components_children, ..._guides, ..._others]
121 134 }
122 135 ]
123 136  
124 137 export const pages = _pages;
125 138 export const guides = _guides;
126 139 export const components = _components;
  140 +export const others = _others;
127 141  
128 142 export default [
129 143 { path: '*', redirect: '/404', hidden: true },
... ...
examples/views/docs/component/cell.md
  Diff comments   View file @c5aea77
1 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 11 ```html
12 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 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 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 90 <zui-cell is-link>
29 91 <zui-icon slot="icon" name="error" size="2rem" color="deeppink" />
30 92 <div slot="title">
31 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 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 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 101 </div>
38 102 </zui-cell>
39 103 </div>
40 104 </template>
41 105  
42   -<script>
43   -export default {
44   - data() {
45   - return {
46   - }
47   - },
48   -}
49   -</script>
50   -
51 106 <style>
52   -.list {
  107 +.demo-cell {
53 108 width: 400px;
54 109 }
55 110 </style>
56 111 ```
57 112  
58   -:::
59 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 134 \ No newline at end of file
... ...
examples/views/docs/component/specification.md
View file @95417b8
... ... @@ -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 0 \ No newline at end of file
examples/views/docs/guide/specification.md 0 → 100644
  Diff comments   View file @c5aea77
... ... @@ -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 106 \ No newline at end of file
... ...
examples/views/layout/component.vue
  Diff comments   View file @c5aea77
... ... @@ -13,6 +13,8 @@
13 13 <template slot="title">{{ component.group }}</template>
14 14 <el-menu-item v-for="(data, index) in component.children" :key="index" :index="data.name">{{ data.meta.title }}</el-menu-item>
15 15 </el-menu-item-group>
  16 + <h4 class="side-menu__group">其它</h4>
  17 + <el-menu-item v-for="(doc, index) in otherList" :key="`other-${index}`" :index="doc.name">{{ doc.meta.title }}</el-menu-item>
16 18 </el-menu>
17 19 </el-aside>
18 20 <el-main class="layout-main__component">
... ... @@ -27,7 +29,7 @@
27 29  
28 30 <script>
29 31 import LayoutHeader from './components/header';
30   -import { guides, components } from '@/router/routes';
  32 +import { guides, components, others } from '@/router/routes';
31 33  
32 34 const headerHeight = 80;
33 35  
... ... @@ -38,6 +40,7 @@ export default {
38 40 return {
39 41 activeMenu: 'introduce',
40 42 guideList: guides,
  43 + otherList: others,
41 44 componentList: components,
42 45 anchorList: [],
43 46 currentAnchor: '',
... ...
packages/cell/index.css
  Diff comments   View file @c5aea77
... ... @@ -3,7 +3,6 @@
3 3 display: -webkit-box;
4 4 display: -webkit-flex;
5 5 display: flex;
6   - align-items: center;
7 6 box-sizing: border-box;
8 7 width: 100%;
9 8 padding: 10px 16px;
... ... @@ -22,10 +21,14 @@
22 21 }
23 22  
24 23 .zui-cell__left-icon {
  24 + display: flex;
  25 + align-items: center;
25 26 margin-right: 5px;
26 27 }
27 28  
28 29 .zui-cell__right-icon {
  30 + display: flex;
  31 + align-items: center;
29 32 margin-left: 5px;
30 33 }
31 34  
... ... @@ -53,6 +56,18 @@
53 56 flex: 1;
54 57 }
55 58  
  59 +.zui-cell__title {
  60 + display: flex;
  61 + flex-direction: column;
  62 + justify-content: center;
  63 +}
  64 +
  65 +.zui-cell__value {
  66 + display: flex;
  67 + align-items: center;
  68 + justify-content: flex-end;
  69 +}
  70 +
56 71 .zui-cell__value {
57 72 position: relative;
58 73 overflow: hidden;
... ...
packages/cell/index.vue
  Diff comments   View file @c5aea77
1 1 <template>
2 2 <div class="zui-cell" :class="classRender" @click="onClick">
3   - <div v-if="$slots.icon" class="zui-cell__left-icon">
4   - <slot name="icon"></slot>
  3 + <div v-if="$slots.icon || icon" class="zui-cell__left-icon">
  4 + <slot v-if="$slots.icon" name="icon"></slot>
  5 + <zui-icon v-else-if="icon" class="zui-cell__left-icon" :name="icon"></zui-icon>
5 6 </div>
6   - <zui-icon v-else-if="icon" class="zui-cell__left-icon" :name="icon"></zui-icon>
7 7 <div v-if="$slots.title" class="zui-cell__title">
8 8 <slot name="title"></slot>
9 9 <div v-if="$slots.label" class="zui-cell__label">
10 10 <slot name="label"></slot>
11 11 </div>
12 12 <div v-else-if="label" class="zui-cell__label">
13   - {{ label }}
  13 + <span>{{ label }}</span>
14 14 </div>
15 15 </div>
16 16 <div v-else-if="title" class="zui-cell__title">
17   - {{ title }}
  17 + <span>{{ title }}</span>
18 18 <div v-if="$slots.label" class="zui-cell__label">
19 19 <slot name="label"></slot>
20 20 </div>
21 21 <div v-else-if="label" class="zui-cell__label">
22   - {{ label }}
  22 + <span>{{ label }}</span>
23 23 </div>
24 24 </div>
25 25 <div v-if="$slots.default" class="zui-cell__value">
26 26 <slot></slot>
27 27 </div>
28 28 <div v-else-if="value" class="zui-cell__value">{{ value }}</div>
29   - <div v-if="$slots.right" class="zui-cell__right-icon">
30   - <slot name="right"></slot>
  29 + <div v-if="$slots.right || rightIcon" class="zui-cell__right-icon">
  30 + <slot v-if="$slots.right" name="right"></slot>
  31 + <zui-icon v-else-if="rightIcon && isLink" class="zui-cell__right-icon" :name="rightIcon"></zui-icon>
31 32 </div>
32   - <zui-icon v-else-if="rightIcon && isLink" class="zui-cell__right-icon" :name="rightIcon"></zui-icon>
33 33 </div>
34 34 </template>
35 35  
36 36 <script>
37 37 export default {
38   - name: 'Cell',
  38 + name: "Cell",
39 39 props: {
40 40 icon: String,
41 41 title: String,
... ... @@ -44,24 +44,24 @@ export default {
44 44 isLink: Boolean,
45 45 rightIcon: {
46 46 type: String,
47   - default: 'enter'
48   - },
  47 + default: "enter"
  48 + }
49 49 },
50 50 computed: {
51 51 classRender: function() {
52 52 return {
53   - 'zui-cell--clickable': this.isLink
54   - }
  53 + "zui-cell--clickable": this.isLink
  54 + };
55 55 }
56 56 },
57 57 methods: {
58 58 onClick: function() {
59   - if (this.$listeners['click']) {
60   - this.$emit('click');
  59 + if (this.$listeners["click"]) {
  60 + this.$emit("click");
61 61 }
62 62 }
63 63 }
64   -}
  64 +};
65 65 </script>
66 66  
67 67 <style>
... ...
packages/navBar/index.css
  Diff comments   View file @c5aea77
1 1 .zui-nav-bar {
2 2 min-height: 2.25rem;
3 3 display: flex;
4   - align-items: center;
5 4 position: relative;
6 5 text-align: center;
7 6 justify-content: space-between;
... ... @@ -9,7 +8,6 @@
9 8 background-color: #f5f5f5;
10 9 color: #000;
11 10 transition: all 300ms;
12   - padding: 10px;
13 11 }
14 12 .zui-nav-bar--primary {
15 13 background-color: #FCD404;
... ... @@ -29,21 +27,34 @@
29 27 }
30 28 .zui-nav-bar__title {
31 29 max-width: 60%;
32   - margin: 0 auto;
  30 + display: flex;
  31 + align-items: center;
  32 + justify-content: center;
  33 + text-align: center;
  34 + flex: auto;
33 35 font-size: 18px;
34 36 font-weight: 700;
35 37 }
36 38 .zui-nav-bar__left,
37 39 .zui-nav-bar__right {
  40 + flex: 1;
38 41 font-size: 16px;
39 42 display: flex;
40 43 align-items: center;
41 44 }
42 45 .zui-nav-bar__left {
43 46 justify-content: flex-start;
  47 + padding-left: 10px;
44 48 }
45 49 .zui-nav-bar__right {
46 50 justify-content: flex-end;
  51 + padding-right: 10px;
  52 +}
  53 +.zui-nav-bar__left,
  54 +.zui-nav-bar__right,
  55 +.zui-nav-bar__title {
  56 + padding-top: 9px;
  57 + padding-bottom: 9px;
47 58 }
48 59 .zui-nav-bar__text {
49 60 display: inline-block;
... ...
packages/navBar/index.vue
  Diff comments   View file @c5aea77
1 1 <template>
2 2 <div class="zui-nav-bar" :class="classRender" :style="styleRender">
3   - <div class="zui-nav-bar__left" @click="clickLeft">
4   - <slot v-if="$scopedSlots[leftSlot] || $slots[leftSlot]" :name="leftSlot"></slot>
5   - <template v-else>
6   - <zui-icon v-if="leftArrow" :name="leftIcon" size="1.3rem"></zui-icon>
7   - <div class="zui-nav-bar__text" v-if="leftText">{{ leftText }}</div>
8   - </template>
  3 + <div class="zui-nav-bar__left">
  4 + <span @click="clickLeft">
  5 + <slot v-if="$scopedSlots[leftSlot] || $slots[leftSlot]" :name="leftSlot"></slot>
  6 + <template v-else>
  7 + <zui-icon v-if="leftArrow" :name="leftIcon" size="1.3rem"></zui-icon>
  8 + <div class="zui-nav-bar__text" v-if="leftText">{{ leftText }}</div>
  9 + </template>
  10 + </span>
9 11 </div>
10 12 <div class="zui-nav-bar__title md-ellipsis">
11 13 <slot v-if="$scopedSlots[titleSlot] || $slots[titleSlot]" :name="titleSlot"></slot>
12 14 <template v-else>{{ title }}</template>
13 15 </div>
14   - <div class="zui-nav-bar__right" @click="clickRight">
15   - <slot v-if="$scopedSlots[rightSlot] || $slots[rightSlot]" :name="rightSlot"></slot>
16   - <template v-else>
17   - <div class="zui-nav-bar__text" v-if="rightText">{{ rightText }}</div>
18   - </template>
  16 + <div class="zui-nav-bar__right">
  17 + <span @click="clickRight">
  18 + <slot v-if="$scopedSlots[rightSlot] || $slots[rightSlot]" :name="rightSlot"></slot>
  19 + <template v-else>
  20 + <div class="zui-nav-bar__text" v-if="rightText">{{ rightText }}</div>
  21 + </template>
  22 + </span>
19 23 </div>
20 24 </div>
21 25 </template>
22 26  
23 27 <script>
24 28 export default {
25   - name: 'NavBar',
  29 + name: "NavBar",
26 30 props: {
27   - title: { // 标题
  31 + title: {
  32 + // 标题
28 33 type: String,
29   - default: ''
  34 + default: ""
30 35 },
31   - leftIcon: { // 左侧图标
  36 + leftIcon: {
  37 + // 左侧图标
32 38 type: String,
33   - default: 'return'
  39 + default: "return"
34 40 },
35   - leftText: { // 左侧文案
  41 + leftText: {
  42 + // 左侧文案
36 43 type: String,
37   - default: ''
  44 + default: ""
38 45 },
39   - rightText: { // 右侧文案
  46 + rightText: {
  47 + // 右侧文案
40 48 type: String,
41   - default: ''
  49 + default: ""
42 50 },
43   - leftArrow: { // 是否显示左侧箭头
  51 + leftArrow: {
  52 + // 是否显示左侧箭头
44 53 type: Boolean,
45 54 default: false
46 55 },
47   - fixed: { // 是否固定在顶部
  56 + fixed: {
  57 + // 是否固定在顶部
48 58 type: Boolean,
49 59 default: false
50 60 },
51   - border: { // 是否显示下边框
  61 + border: {
  62 + // 是否显示下边框
52 63 type: Boolean,
53 64 default: false
54 65 },
... ... @@ -56,30 +67,35 @@ export default {
56 67 type: [Number, String],
57 68 default: 1
58 69 },
59   - primary: { // 是否为品牌色主题
  70 + primary: {
  71 + // 是否为品牌色主题
60 72 type: Boolean,
61 73 default: false
62 74 }
63 75 },
64 76 data: function() {
65 77 return {
66   - leftSlot: 'left',
67   - rightSlot: 'right',
68   - titleSlot: 'title'
69   - }
  78 + leftSlot: "left",
  79 + rightSlot: "right",
  80 + titleSlot: "title"
  81 + };
70 82 },
71 83 computed: {
72 84 classRender: function() {
73   - return { 'zui-nav-bar--border-bottom': this.border, 'zui-nav-bar--fixed': this.fixed, 'zui-nav-bar--primary': this.primary };
  85 + return {
  86 + "zui-nav-bar--border-bottom": this.border,
  87 + "zui-nav-bar--fixed": this.fixed,
  88 + "zui-nav-bar--primary": this.primary
  89 + };
74 90 },
75 91 styleRender: function() {
76   - return { 'z-index': this.zIndex };
  92 + return { "z-index": this.zIndex };
77 93 }
78 94 },
79 95 methods: {
80 96 clickLeft: function() {
81   - if (this.$listeners['click-left']) {
82   - this.$emit('click-left');
  97 + if (this.$listeners["click-left"]) {
  98 + this.$emit("click-left");
83 99 } else {
84 100 if (window.api) {
85 101 api.closeWin();
... ... @@ -87,10 +103,10 @@ export default {
87 103 }
88 104 },
89 105 clickRight: function() {
90   - this.$emit('click-right');
  106 + this.$emit("click-right");
91 107 }
92 108 }
93   -}
  109 +};
94 110 </script>
95 111  
96 112 <style>
... ...