upd(searchBar): 支持点击按钮触发submit事件

src/packages/avatar/demo.vue

@@ -1,46 +1,56 @@
 <template>
-      <div class="demo-list">
-      <h4>默认用法,有三种尺寸</h4>
-        <div class="white-bg">
-          <nut-avatar size="large"></nut-avatar>
-          <nut-avatar size="normal"></nut-avatar>
-          <nut-avatar size="small"></nut-avatar>
-        </div>
-      <h4>可以修改头像的形状类型</h4>
-      <div class="white-bg">
-        <nut-avatar size="large" shape="square"></nut-avatar>
-        <nut-avatar size="normal" shape="square"></nut-avatar>
-        <nut-avatar size="small" shape="square"></nut-avatar>
-      </div>
-      <h4>可以修改头像的背景色</h4>
-      <div class="white-bg"><nut-avatar bgColor="#f0250f"></nut-avatar></div>
-      <h4>可以修改头像的内容</h4>
-      <div class="white-bg"><nut-avatar size="large" bgIcon="">U</nut-avatar></div>
-      <h4>可以修改头像背景图片</h4>
-      <div class="white-bg">
-        <nut-avatar bgIcon="" bgImage="http://img30.360buyimg.com/uba/jfs/t1/84318/29/2102/10483/5d0704c1Eb767fa74/fc456b03fdd6cbab.png"></nut-avatar>
-      </div>
-      <h4>可以修改头像icon图标</h4>
-      <div class="white-bg">
-        <nut-avatar bgIcon="http://img10.360buyimg.com/uba/jfs/t1/69001/30/2126/550/5d06f947Effd02898/95f18e668670e598.png"></nut-avatar>
-      </div>
-      <h4>点击头像有触发事件</h4>
-      <div class="white-bg"><nut-avatar @activeAvatar="activeAvatar"></nut-avatar></div>
+  <div class="demo-list">
+    <h4>默认用法</h4>
+    <p>内置"small","normal","large"三种尺寸规格</p>
+    <div class="white-bg">
+      <nut-avatar size="large"></nut-avatar>
+      <nut-avatar size="normal"></nut-avatar>
+      <nut-avatar size="small"></nut-avatar>
     </div>
+    <h4>修改形状类型</h4>
+    <div class="white-bg">
+      <nut-avatar size="large" shape="square"></nut-avatar>
+      <nut-avatar size="normal" shape="square"></nut-avatar>
+      <nut-avatar size="small" shape="square"></nut-avatar>
+    </div>
+    <h4>修改背景色</h4>
+    <div class="white-bg">
+      <nut-avatar bgcolor="#f0250f"></nut-avatar>
+    </div>
+    <h4>可以修改头像的内容</h4>
+    <div class="white-bg">
+      <nut-avatar size="large" bgIcon>U</nut-avatar>
+    </div>
+    <h4>修改背景图片</h4>
+    <div class="white-bg">
+      <nut-avatar
+        bgIcon
+        bgImage="http://img30.360buyimg.com/uba/jfs/t1/84318/29/2102/10483/5d0704c1Eb767fa74/fc456b03fdd6cbab.png"
+      ></nut-avatar>
+    </div>
+    <h4>修改头像ICON图标</h4>
+    <div class="white-bg">
+      <nut-avatar
+        bgIcon="http://img10.360buyimg.com/uba/jfs/t1/69001/30/2126/550/5d06f947Effd02898/95f18e668670e598.png"
+      ></nut-avatar>
+    </div>
+    <h4>点击头像有触发事件</h4>
+    <div class="white-bg">
+      <nut-avatar @activeAvatar="activeAvatar"></nut-avatar>
+    </div>
+  </div>
 </template>
 
 <script>
 export default {
-  components: {
-
-  },
+  components: {},
   data() {
     return {};
   },
   methods: {
-      activeAvatar(){
-        console.log('点击了头像');
-      }
+    activeAvatar() {
+      alert("点击了头像");
+    }
   }
 };
 </script>

src/packages/avatar/doc.md

@@ -11,12 +11,16 @@
 ## 设置背景色
 
 ```html
-<nut-avatar bgColor="#87d068"></nut-avatar>
+<nut-avatar 
+    bgColor="#87d068"
+></nut-avatar>
 ```
 
 
 ## 设置大小
 
+内置 **smal** / **normal** / **large** 三种尺寸规格
+
 ```html
 <nut-avatar size="large"></nut-avatar>
 <nut-avatar size="normal"></nut-avatar>
@@ -25,31 +29,42 @@
 
 ## 设置头像的形状类型
 ```html
-<nut-avatar shape="square"></nut-avatar>
+<nut-avatar 
+  shape="square"
+></nut-avatar>
 ```
 
 
 ## 设置头像的文本内容
 ```html
-<nut-avatar :size="30" bgIcon="">U</nut-avatar>
+<nut-avatar 
+  :size="30"
+  bgIcon=""
+>U</nut-avatar>
 ```
 
 ## 设置头像背景图片
 ```html
 <nut-avatar 
-bgIcon="" bgImage="http://img30.360buyimg.com/uba/jfs/t1/84318/29/2102/10483/5d0704c1Eb767fa74/fc456b03fdd6cbab.png">
+  bgIcon="" 
+  bgImage="http://img30.360buyimg.com/uba/jfs/t1/84318/29/2102/10483/5d0704c1Eb767fa74/fc456b03fdd6cbab.png"
+>
 </nut-avatar>
 ```
 
-## 设置头像icon图标
+## 设置头像Icon图标
 ```html
-<nut-avatar bgIcon="http://img10.360buyimg.com/uba/jfs/t1/69001/30/2126/550/5d06f947Effd02898/95f18e668670e598.png">
+<nut-avatar
+  bgIcon="http://img10.360buyimg.com/uba/jfs/t1/69001/30/2126/550/5d06f947Effd02898/95f18e668670e598.png"
+>
 </nut-avatar>
 ```
 
 ## 点击头像有触发事件
 ```html
-<nut-avatar @activeAvatar="activeAvatar">
+<nut-avatar 
+  @activeAvatar="activeAvatar"
+>
 </nut-avatar>
 ```
 
@@ -69,4 +84,4 @@ bgIcon="" bgImage="http://img30.360buyimg.com/uba/jfs/t1/84318/29/2102/10483/5d0
 
 | 字段 | 说明 | 回调参数 
 |----- | ----- | ----- 
-| activeAvatar | 点击头像有触发事件 | -- 
+| activeAvatar | 点击头像触发事件 | -- 

src/packages/searchbar/doc.md

@@ -1,5 +1,7 @@
 # SearchBar 搜索栏
 
+> 依赖 **Icon** 组件
+
 ## 基本用法
 
 ```html
@@ -87,4 +89,4 @@ export default {
 | focus | 输入框获取焦点时触发事件 | 无
 | input | 输入框输入内容时触发事件 | 无
 | blur | 输入框失去焦点时触发事件 | 无
-| submit | 默认提交事件 | 无
+| submit | 默认提交事件，点击右侧Icon或文字也会触发 | 无

src/packages/searchbar/searchbar.scss

@@ -13,7 +13,7 @@
 	    	margin-right: 10px;
 	    	.nut-icon {
 	    		float: left;
-	    		margin: 10px 0 0 10px;
+	    		margin: 8px 0 0 10px;
 	    	}
 	    	.close-icon {
 	    		display: none;
@@ -47,9 +47,9 @@
         }
 	}
 	.btn-search {
-		display: inline-block;
-		line-height: 2;
-		text-align: center;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
 		color: $title-color;
 	}
 	a {

src/packages/searchbar/searchbar.vue

@@ -16,7 +16,7 @@
 	    		</span>
 	    	</form>
     	</div>
-    	<a href="javascript:;" class="btn-search" v-if="hasSearchButton">
+    	<a href="javascript:;" class="btn-search" v-if="hasSearchButton" @click="submitFun">
     		<span v-if="hasTextButton">{{textInfo || nutTranslate('lang.searchbar.textInfo')}}</span>
     		<nut-icon type="search" v-else width="20" height="20"></nut-icon>
     	</a>
@@ -72,23 +72,23 @@ export default {
     },
     methods: {
     	//清空 input 输入
-    	clearInput: function() {
+    	clearInput() {
     		this.value = '';
     		this.hasCloseIcon = false;
     	},
-    	focusFun: function() {
+    	focusFun() {
     		this.inputFocusAnimation = true;
     		this.$emit('focus');
     	},
-    	inputFun: function() {
+    	inputFun() {
     		this.hasCloseIcon = this.value ? true:false;
     		this.$emit('input', this.value);
     	},
-    	blurFun: function() {
+    	blurFun() {
     		this.inputFocusAnimation = false;
     		this.$emit('blur', this.value);
     	},
-        submitFun: function() {
+        submitFun() {
             this.$emit('submit', this.value);
         }
     }