upd(SearchBar): 增加props控制内部Icon尺寸和颜色

CHANGELOG.md

@@ -1,3 +1,13 @@
+## 2.1.4
+
+`2019-7-10`
+
+* :sparkles: upd(SearchBar): 增加props控制内部Icon尺寸和颜色
+* :bug: fix(Skeleton): 修复文档无法查看的问题
+* :bug: fix: 修复国际化语言包一处错误
+* :zap: chore: 优化服务端渲染
+* :zap: doc: 新增加入我们页面
+
 ## 2.1.3
 
 `2019-6-26`

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nutui/nutui",
-  "version": "2.1.3",
+  "version": "2.1.4",
   "description": "一套轻量级移动端Vue组件库",
   "typings": "dist/types/index.d.ts",
   "main": "dist/nutui.js",

src/locales/lang/en-US.js

@@ -2,8 +2,6 @@ import Vue from 'vue'
 
 const lang = {
     lang: {
-        okBtnTxt: 'Ok',
-        cancelBtnTxt: 'Cancel',
         calendar: {
             loadPrevMonth: 'Load the last month',
             noMoreMonth: 'No earlier month~',
@@ -34,7 +32,8 @@ const lang = {
             limitError: 'File size exceeded the limit'
         }
         okBtnTxt: 'Ok',
-        cancelText: 'Cancel'
+        cancelText: 'Cancel',
+        cancelBtnTxt: 'Cancel',
     }
 }
 

src/packages/searchbar/doc.md

@@ -80,7 +80,13 @@ export default {
 | hasTextButton | 右侧搜索按钮是否为文字按钮 | Boolean | false
 | textInfo | 右侧文字搜索按钮文案 | String | '搜索'
 | animation | 是否需要默认的搜索框显示动画 | Boolean | true
-| customClass | 自定义 class | String | ' '
+| customClass | 自定义 class | String | ''
+| searchIconSize | Search 图标的尺寸 | String | '20px'
+| searchIconColor | Search 图标的颜色 | String | '#2e2d2d'
+| searchBtnIconSize | 搜索按钮图标的尺寸 | String | '20px'
+| searchBtnIconColor | 搜索按钮图标的颜色 | String | '#2e2d2d'
+| clearIconSize | 清空按钮图标的尺寸 | String | '15px'
+| clearIconColor | 清空按钮图标的颜色 | String | '#2e2d2d'
 
 ## Event
 

src/packages/searchbar/searchbar.scss

@@ -9,23 +9,16 @@
 	    background-color: $light-color;
 	    border-radius: 20px;
 	    form {
+			display:flex;
+			align-items:center;
 	    	position: relative;
 	    	margin-right: 10px;
-	    	.nut-icon {
-	    		float: left;
-	    		margin: 8px 0 0 10px;
-	    	}
 	    	.close-icon {
 	    		display: none;
 	    		&.show {
-	    			display: inline-block;
+	    			display: inline-flex;
 	    		}
 	    	}
-	    	.nut-icon-circle-cross {
-	    		position: absolute;
-	    		right: 5px;
-	    		top: 0;
-	    	}
 	    }
 	    i {
 	    	display: inline-block;

src/packages/searchbar/searchbar.vue

@@ -2,7 +2,7 @@
     <div :class="['nut-searchbar',customClass ? customClass : '']">
     	<div class="search-input" :class="[animation ? 'nut-search-ani':'',inputFocusAnimation?'focus':'']">
 	    	<form action="" id="input-form" @submit="submitFun">
-	    		<nut-icon type="search" v-if="hasIcon" width="20" height="20"></nut-icon>
+	    		<nut-icon type="search" v-if="hasIcon" :size="searchIconSize" :color="searchIconColor"></nut-icon>
 	    		<input type="text"
 	    		v-model="value"
 	    		:placeholder="placeText || nutTranslate('lang.searchbar.placeText')"
@@ -12,18 +12,17 @@
 	    		>
 	    		<span class="close-icon" :class="hasCloseIcon ? 'show':''"
 	    		@click="clearInput">
-	    			<nut-icon type="circle-cross" width="15" height="15"></nut-icon>
+	    			<nut-icon type="circle-cross" :size="clearIconSize" :color="clearIconColor"></nut-icon>
 	    		</span>
 	    	</form>
     	</div>
     	<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>
+    		<nut-icon type="search" v-else :size="searchBtnIconSize" :color="searchBtnIconColor"></nut-icon>
     	</a>
     </div>
 </template>
 <script>
-
 import nuticon from "../icon/icon.vue";
 import locale from "../../mixins/locale";
 export default {
@@ -34,6 +33,30 @@ export default {
     		type: Boolean,
     		default: false
     	},
+		searchIconSize: {
+			type: String,
+			default: '20px'
+		},
+		searchIconColor: {
+			type: String,
+			default: '#2e2d2d'
+		},
+		searchBtnIconSize: {
+			type: String,
+			default: '20px'
+		},
+		searchBtnIconColor: {
+			type: String,
+			default: '#2e2d2d'
+		},
+		clearIconSize:{
+			type: String,
+			default: '15px'
+		},
+		clearIconColor: {
+			type: String,
+			default: '#2e2d2d'
+		},
     	placeText: {
 			type: String
 		},