feat: 修改navbar

package.json

@@ -17,7 +17,7 @@
     "build:site": "nutui-cli build-site",
     "clean": "nutui-cli clean",
     "add": "nutui-cli add",
-    "test": "cross-env NODE_ENV=test nyc mocha-webpack --webpack-config node_modules/@nutui/cli/dist_cli/webpack/test.config.js  --require node_modules/@nutui/cli/dist_cli/test/setup.js src/packages/sidenavbar/__test__/sidenavbar.spec.js",
+    "test": "cross-env NODE_ENV=test nyc mocha-webpack --webpack-config node_modules/@nutui/cli/dist_cli/webpack/test.config.js  --require node_modules/@nutui/cli/dist_cli/test/setup.js src/packages/navbar/__test__/**.spec.js",
     "coveralls": "cat ./coverage/lcov.info | coveralls",
     "test:watch": "npm run test --watch",
     "prettier:fix": "prettier --write src/**/*.{js,vue,scss}",

src/packages/navbar/__test__/navbar.spec.js

@@ -0,0 +1,46 @@
+import { shallowMount, mount } from '@vue/test-utils'
+import Navbar from '../navbar.vue';
+import Vue from 'vue';
+
+
+describe('Navbar.vue', () => {
+    const wrapper = shallowMount(Navbar, {
+        
+    });
+    
+    it('主标题文案展示', () => {
+        wrapper.setProps({ title: '测试title'});
+        return Vue.nextTick().then(function () {
+            expect(wrapper.find('.nav-title span').text()).toBe('测试title');
+        })
+    });
+
+    it('左侧返回按钮是否展示', () => {
+        wrapper.setProps({ backShow: true});
+        return Vue.nextTick().then(function () {
+            expect(wrapper.find('.back').contains('.back-icon')).toBe(true); 
+        })
+    });
+    
+    it('左侧关闭按钮是否展示', () => {
+        wrapper.setProps({ backShow: true});
+        return Vue.nextTick().then(function () {
+            expect(wrapper.find('.close').contains('.close-icon')).toBe(true); 
+        })
+    });
+
+    it('右侧搜索按钮是否展示', () => {
+        wrapper.setProps({ backShow: true});
+        return Vue.nextTick().then(function () {
+            expect(wrapper.find('.search').contains('.search-icon')).toBe(true); 
+        })
+    });
+
+    it('右侧更多按钮是否展示', () => {
+        wrapper.setProps({ backShow: true});
+        return Vue.nextTick().then(function () {
+            expect(wrapper.find('.more').contains('.more-icon')).toBe(true); 
+        })
+    });
+    
+});

src/packages/navbar/demo.vue

@@ -1,35 +1,22 @@
 <template>
   <div>
-    <h4>默认用法</h4>
-    <nut-navbar @on-click-back="back" @on-click-title="title" :leftShow="false" :rightShow="false" @on-click-more="more"></nut-navbar>
-    <h4>增加左侧按钮</h4>
-    <nut-navbar @on-click-back="back" @on-click-title="title" @on-click-more="more"
-      >NavBar1
-      <a slot="left" @click="close">关闭</a>
+    <h4>基础样式</h4>
+    <nut-navbar :close-show="false" :more-show="false"></nut-navbar>
+    <h4>右侧增加折叠菜单</h4>
+    <nut-navbar :close-show="false"></nut-navbar>
+    <h4>右侧文案样式</h4>
+    <nut-navbar :close-show="false" :more-show="false" title="自定义标题">
+      <a slot="search-icon">新建</a>
     </nut-navbar>
-    <h4>增加右侧按钮</h4>
-    <nut-navbar @on-click-back="back" @on-click-title="title" @on-click-more="more"
-      >NavBar2
-      <a slot="right" @click="edit">编辑</a>
-    </nut-navbar>
-    <h4>更改左侧图标</h4>
-    <nut-navbar @on-click-back="back" @on-click-title="title" @on-click-more="more"
-      >NavBar3
-      <a slot="back-icon">返回</a>
-    </nut-navbar>
-    <h4>更改右侧图标</h4>
-    <nut-navbar @on-click-back="back" @on-click-title="title" @on-click-more="more"
-      >NavBar4
-      <a slot="more-icon">更多</a>
-    </nut-navbar>
-    <h4>更改样式</h4>
-    <nut-navbar
-      @on-click-back="back"
-      @on-click-title="title"
+    <h4>H5样式</h4>
+    <nut-navbar 
+      @on-click-back="back" 
+      @on-click-close="close" 
+      @on-click-title="title" 
+      @on-click-search="search" 
       @on-click-more="more"
-      style="background-color: #000; color: #fff; height: 60px; line-height: 60px;"
-      >NavBar5</nut-navbar
     >
+    </nut-navbar>
   </div>
 </template>
 
@@ -42,17 +29,17 @@ export default {
     back() {
       alert('header头部， 点击返回');
     },
+    close() {
+      alert('header头部， 点击关闭');
+    },
     title() {
       alert('header头部， 点击title');
+    },  
+    search() {
+      alert('header头部， 点击搜索');
     },
     more() {
       alert('header头部， 点击更多');
-    },
-    close() {
-      alert('header头部， 点击关闭');
-    },
-    edit() {
-      alert('header头部， 点击编辑');
     }
   }
 };

src/packages/navbar/doc.md

@@ -1,121 +1,83 @@
 # NavBar 头部导航
 
-## 基本用法
+> 依赖 Icon 组件，渲染左右两侧的图标
+
+## 基础样式
 
 ```html
-<nut-navbar 
-    @on-click-back="back" 
-    @on-click-title="title" 
-    @on-click-more="more" 
-    :leftShow="false" 
-    :rightShow="false"
->title</nut-navbar>
+<nut-navbar :close-show="false" :more-show="false"></nut-navbar>
 ```
 
-```javascript
-export default {
-    methods: {
-        back(){
-            alert('header头部， 点击返回')
-        },
-        title(){
-            alert('header头部， 点击title')
-        },
-        more(){
-            alert('header头部， 点击更多')
-        }
-    }
-};
+## 右侧增加折叠菜单
+
+```html
+<nut-navbar :close-show="false"></nut-navbar>
 ```
-> 两侧按钮不显示状态下，on-click-back，on-click-more事件不触发
 
-## 自定义样式
+## 右侧文案样式
 
-内置默认为白色，所有样式可自定义
+通过slot **back-icon**，**close-icon**,**search-icon**,**more-icon** 修改左右两侧图标；
 
 ```html
-<nut-navbar 
-    style="background-color:#000; color: #fff; height:60px; line-height: 60px;"
->
-    NavBar5
+<nut-navbar :close-show="false" :more-show="false" title="自定义标题">
+    <a slot="search-icon">新建</a>
 </nut-navbar>
 ```
 
-## 事件
+## H5样式
 
-内置 **on-click-back**，**on-click-title**，**on-click-more** 三种监听事件。
+内置 `on-click-back`，`on-click-close`，`on-click-title`，`on-click-search`，`on-click-more` 监听事件。
 
 ```html
 <nut-navbar 
     @on-click-back="back" 
+    @on-click-close="close" 
     @on-click-title="title" 
+    @on-click-search="search" 
     @on-click-more="more"
 >
 </nut-navbar>
 ```
+
 ```javascript
 export default {
     methods: {
-        back(){
-            alert('header头部， 点击返回')
+        back() {
+        alert('header头部， 点击返回');
         },
-        title(){
-            alert('header头部， 点击title')
+        close() {
+        alert('header头部， 点击关闭');
         },
-        more(){
-            alert('header头部， 点击更多')
-        }
-    }
-};
-```
-
-## 新增图标
-
-通过slot **left**，**right** 增加左右两侧图标
-
-```html
-<nut-navbar>NavBar1
-    <a slot="left" @click="close">关闭</a>
-    <a slot="right" @click="edit">编辑</a>
-</nut-navbar>
-```
-
-```javascript
-export default {
-    methods: {
-        close(){
-            alert('header头部， 点击关闭')
+        title() {
+        alert('header头部， 点击title');
+        },  
+        search() {
+        alert('header头部， 点击搜索');
         },
-        edit(){
-            alert('header头部， 点击编辑')
+        more() {
+        alert('header头部， 点击更多');
         }
     }
 };
 ```
 
-## 修改默认图标
-
-通过slot **back-icon**，**more-icon** 来修改组件两侧默认图标
-
-```html
-<nut-navbar>NavBar1
-    <a slot="back-icon">返回</a>
-    <a slot="more-icon">更多</a>
-</nut-navbar>
-```
-
-## 自定义Class
-```html
-<nut-navbar 
-    class="my-nav"
->title</nut-navbar>
-```
-
-
 ## Prop
 
 | 字段 | 说明 | 类型 | 默认值
 |----- | ----- | ----- | ----- 
-| leftShow | 是否显示左侧按钮 | Boolean | true
-| title | 中间显示文字内容 | String | NavBar
-| rightShow | 是否显示右侧按钮 | Boolean | true
+| back-show | 是否显示左侧返回按钮 | Boolean | true
+| close-show | 是否显示左侧关闭按钮 | Boolean | true
+| title | 中间显示文字内容 | String | 导航标题栏
+| search-show | 是否显示右侧搜索按钮 | Boolean | true
+| more-show | 是否显示右侧更多按钮 | Boolean | true
+
+
+## slot
+
+| 字段 | 说明 | 
+|----- | ----- |  
+| back-icon | 渲染左侧返回按钮 |
+| close-icon | 渲染左侧关闭按钮|
+| title | 渲染中间标题区域 |
+| search-icon |渲染右侧搜索按钮|
+| more-icon |渲染右侧更多按钮|

src/packages/navbar/navbar.scss

@@ -1,9 +1,8 @@
 .nut-navbar {
-	height: 40px;
-	line-height: 40px;
+	height: 44px;
+	line-height: 44px;
 	background-color: #fff;
 	position: relative;
-
 	.nav-left {
 		position: absolute;
 		left: 15px;
@@ -12,21 +11,19 @@
 		line-height: 40px;
 		margin-top: -20px;
 		font-size: 14px;
-
 		.back {
 			float: left;
 			margin-right: 8px;
-
-			.back-icon {
-				display: inline-block;
-				width: 20px;
-				height: 20px;
-				background:
-					url("data:image/svg+xml, %3Csvg width='19' height='36' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.552 35.569a1.5 1.5 0 0 1-2.121-.017c-5.952-6.05-9.905-10.1-15.857-16.15a2 2 0 0 1 0-2.804c5.952-6.05 9.905-10.1 15.857-16.15a1.5 1.5 0 1 1 2.138 2.104C12.847 8.368 9.125 12.184 3.403 18c5.722 5.816 9.444 9.632 15.166 15.448a1.5 1.5 0 0 1-.017 2.121z' fill='rgb(158,158,158)' fill-rule='evenodd'/%3E%3C/svg%3E")
-					no-repeat;
-				background-size: contain;
-				vertical-align: middle;
-			}
+		}
+		.back-icon,.close-icon {
+			display: inline-block;
+			width: 22px;
+			height: 22px;
+			background-size: contain;
+			vertical-align: middle;
+		}
+		.close{
+			display: inline-block;
 		}
 	}
 
@@ -38,6 +35,9 @@
 			text-overflow: ellipsis;
 			white-space: nowrap;
 			text-align: center;
+			color:#323232FF;
+			font-size: 18px;
+			font-weight: normal;
 		}
 	}
 
@@ -49,17 +49,17 @@
 		line-height: 40px;
 		margin-top: -20px;
 		font-size: 14px;
-
+		display: flex;
+		align-items: center;
+		.search-icon{
+			display: flex;
+			align-items: center;
+		}
 		.more {
 			float: right;
 			margin-left: 8px;
-
-			.more-icon {
-				&::after {
-					content: '•••';
-					font-size: 16px;
-				}
-			}
+			display: flex;
+			align-items: center;
 		}
 	}
 }

src/packages/navbar/navbar.vue

@@ -1,12 +1,16 @@
 <template>
   <div class="nut-navbar">
-    <div class="nav-left" v-show="leftShow">
-      <div class="back" @click="$emit('on-click-back')">
+    <div class="nav-left">
+      <div class="back" v-if="backShow" @click="$emit('on-click-back')">
         <slot name="back-icon">
-          <i class="back-icon"></i>
+          <nut-icon class="back-icon" type="self" color="#323232FF" size="18px" :url="require('../../assets/svg/arrow_right.svg')"></nut-icon>
+        </slot>
+      </div>
+      <div class="close" @click="$emit('on-click-close')">
+        <slot name="close-icon" v-if="closeShow">
+            <nut-icon class="close-icon" type="self" color="#323232FF" size="16px" :url="require('../../assets/svg/cross.svg')"></nut-icon>
         </slot>
       </div>
-      <slot name="left"></slot>
     </div>
     <div class="nav-center">
       <h3 class="nav-title" @click="$emit('on-click-title')">
@@ -15,31 +19,48 @@
         </slot>
       </h3>
     </div>
-    <div class="nav-right" v-show="rightShow">
-      <slot name="right"></slot>
-      <div class="more" @click="$emit('on-click-more')">
+    <div class="nav-right">
+      <div class="search" @click="$emit('on-click-search')">
+        <slot name="search-icon" v-show="rightShow">
+            <nut-icon class="search-icon" type="search" color="#646464FF" size="18px"></nut-icon>
+        </slot>
+      </div>
+      <div class="more" @click="$emit('on-click-more')" v-if="moreShow">
         <slot name="more-icon">
-          <i class="more-icon"></i>
+          <nut-icon class="more-icon" type="self" color="#323232FF" size="20px" :url="require('../../assets/svg/ellipsis.svg')"></nut-icon>
         </slot>
       </div>
     </div>
   </div>
 </template>
 <script>
+import Icon from '../icon/icon.vue';
+
 export default {
   name: 'nut-navbar',
+  components: {
+    'nut-icon': Icon
+  },
   props: {
     title: {
       type: String,
-      default: 'NavBar'
+      default: '导航标题栏'
     },
-    leftShow: {
+    backShow: {
       type: Boolean,
       default: true
     },
     rightShow: {
       type: Boolean,
       default: true
+    },
+    closeShow:{
+      type: Boolean,
+      default: true
+    },
+    moreShow:{
+      type: Boolean,
+      default: true
     }
   },
   data() {
@@ -47,8 +68,7 @@ export default {
   },
   methods: {
     onClickBack() {
-      // this.$emit('on-click-back');
-      this.$router ? this.$router.back() : window.history.back();
+      //this.$router ? this.$router.back() : window.history.back();
     }
   }
 };