Merge branch 'v3-dev' of https://github.com/jdf2e/nutui into v3-dev

package.json

@@ -77,7 +77,7 @@
   "devDependencies": {
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-transform-object-assign": "^7.8.3",
-    "@nutui/cli": "^0.2.1",
+    "@nutui/cli": "^0.2.2",
     "@typescript-eslint/eslint-plugin": "^2.16.0",
     "@typescript-eslint/parser": "^2.16.0",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",

src/assets/svg/clear.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 14 14" style="enable-background:new 0 0 14 14;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#DCDCDC;}
+</style>
+<path class="st0" d="M7,0C3.1,0,0,3.1,0,7s3.1,7,7,7s7-3.1,7-7S10.9,0,7,0z M10.2,9.4c0.2,0.2,0.2,0.5,0,0.7
+	c-0.1,0.1-0.2,0.1-0.4,0.1s-0.3,0-0.4-0.1L7.2,7.8l-2.4,2.3c-0.1,0.1-0.2,0.1-0.3,0.1c-0.1,0-0.3-0.1-0.4-0.2
+	c-0.2-0.2-0.2-0.5,0-0.7l2.4-2.3L4.1,4.7C3.9,4.5,3.9,4.2,4.1,4s0.5-0.2,0.7,0l2.4,2.4l2.4-2.3c0.2-0.2,0.5-0.2,0.7,0
+	c0.2,0.2,0.2,0.5,0,0.7L7.9,7.1L10.2,9.4z"/>
+</svg>

src/assets/svg/qr.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#646464;}
+</style>
+<path class="st0" d="M2.8,9h14.4C17.7,9,18,9.3,18,9.8s-0.3,0.8-0.8,0.8H2.8C2.3,10.5,2,10.2,2,9.8S2.3,9,2.8,9z M2,7.3
+	c0.5,0,0.9-0.4,0.9-0.9V3.8c0-0.5,0.4-0.9,0.9-0.9h2.7c0.5,0,0.9-0.4,0.9-0.9S6.9,1.1,6.4,1.1H3.8c-1.5,0-2.6,1.2-2.6,2.6v2.7
+	C1.1,6.9,1.5,7.3,2,7.3z M16.2,1.1h-2.7c-0.5,0-0.9,0.4-0.9,0.9s0.4,0.9,0.9,0.9h2.7c0.5,0,0.9,0.4,0.9,0.9v2.7
+	c0,0.5,0.4,0.9,0.9,0.9s0.9-0.4,0.9-0.9V3.8C18.9,2.3,17.7,1.1,16.2,1.1z M6.4,17.1H3.8c-0.5,0-0.9-0.4-0.9-0.9v-2.7
+	c0-0.5-0.4-0.9-0.9-0.9s-0.9,0.4-0.9,0.9v2.7c0,1.5,1.2,2.6,2.6,2.6h2.7c0.5,0,0.9-0.4,0.9-0.9S6.9,17.1,6.4,17.1z M18,12.7
+	c-0.5,0-0.9,0.4-0.9,0.9v2.7c0,0.5-0.4,0.9-0.9,0.9h-2.7c-0.5,0-0.9,0.4-0.9,0.9s0.4,0.9,0.9,0.9h2.7c1.5,0,2.6-1.2,2.6-2.6v-2.7
+	C18.9,13.1,18.5,12.7,18,12.7z"/>
+</svg>

src/assets/svg/search3.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 20 20" style="enable-background:new 0 0 20 20;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#CBCBCB;}
+</style>
+<path class="st0" d="M18.2,16.2l-2.1-2.1C16,14,15.9,14,15.9,13.9c0.9-1.3,1.4-2.8,1.4-4.4c0-4.3-3.5-7.8-7.8-7.8S1.8,5.2,1.8,9.5
+	s3.5,7.8,7.8,7.8c1.9,0,3.7-0.7,5.1-1.9c0,0,0,0.1,0.1,0.1l2.1,2.1c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3
+	C18.6,17.2,18.6,16.6,18.2,16.2z M9.5,15.8c-3.4,0-6.2-2.8-6.2-6.2s2.8-6.2,6.2-6.2s6.2,2.8,6.2,6.2S12.9,15.8,9.5,15.8z"/>
+</svg>

src/locales/lang/en-US.js

@@ -15,7 +15,7 @@ const lang = {
       resetBtnTxt: 'Reset'
     },
     searchbar: {
-      placeText: 'Please enter the content...',
+      placeText: 'Please enter what you are searching for',
       textInfo: 'Search'
     },
     shortpassword: {

src/locales/lang/zn-CH.js

@@ -17,7 +17,7 @@ const lang = {
       resetBtnTxt: '重置'
     },
     searchbar: {
-      placeText: '请输入内容...',
+      placeText: '请输入您要搜索的内容',
       textInfo: '搜索'
     },
     shortpassword: {

src/packages/searchbar/demo.vue

@@ -2,24 +2,49 @@
   <div class="s-bar demo-list">
     <h4>基本用法</h4>
     <div class="demo1">
-      <nut-searchbar></nut-searchbar>
+      <nut-searchbar :hasIcon="true" :hasSearchButton="false" :clearable='true'></nut-searchbar>
     </div>
-    <p>右侧搜索按钮可根据需要进行配置</p>
+
+    <h4>搜索框对齐方式</h4>
+    <div class="demo1">
+      <nut-searchbar :hasIcon="true" :hasSearchButton="false" inputAlign="center"></nut-searchbar>
+    </div>
+
+    <h4>自定义右侧按钮</h4>
+    <div class="demo1">
+      <nut-searchbar placeText="右侧默认图标" @submit="submitFun"></nut-searchbar>
+    </div>
+
+    <div class="demo1">
+      <nut-searchbar placeText="右侧图标自定义" @submit="submitFun" :searchBtnIcon="require('../../assets/svg/qr.svg')"></nut-searchbar>
+    </div>
+
+    <div class="demo1">
+      <nut-searchbar placeText="右侧默认文字" :hasTextButton="true" @submit="submitFun"></nut-searchbar>
+    </div>
+    
+    <div class="demo1">
+      <nut-searchbar placeText="右侧文字自定义" :hasIcon="true" :hasTextButton="true" textInfo="取消" @submit="submitFun"></nut-searchbar>
+    </div>
+
+    <h4>自定义搜索框右侧按钮</h4>
     <div class="demo1">
-      <nut-searchbar placeText="请输入自定义文案" :hasSearchButton="false"></nut-searchbar>
+      <nut-searchbar :hasIcon="true" :hasSearchButton="false" :hasAction="true" @handleAction="handleAction"></nut-searchbar>
     </div>
-    <p>可配置输入框前面是否显示搜索图标、右侧是否显示文字按钮、显示文字、自定义 class</p>
+
     <div class="demo1">
-      <nut-searchbar placeText="ERP/姓名/邮箱" :hasIcon="true" :hasTextButton="true" customClass="search_demo"></nut-searchbar>
+      <nut-searchbar :hasIcon="true" :hasSearchButton="false" :hasAction="true" :actionIcon="require('../../assets/svg/rate-default-img.svg')" @handleAction="handleAction"></nut-searchbar>
     </div>
+
+
     <h4>事件</h4>
     <div class="demo1">
-      <nut-searchbar placeText="请输入自定义文案" @focus="focusFun" @input="inputFun" @blur="blurFun" @submit="submitFun"></nut-searchbar>
+      <nut-searchbar  @focus="focusFun" @input="inputFun" @blur="blurFun" @submit="submitFun"></nut-searchbar>
     </div>
 
     <h4>获取焦点与失去焦点</h4>
     <div class="demo1">
-      <nut-searchbar placeText="请输入自定义文案" @submit="search" @focus="focusFun" ref="myInput"></nut-searchbar>
+      <nut-searchbar @submit="search" @focus="focusFun" ref="myInput"></nut-searchbar>
     </div>
   </div>
 </template>
@@ -46,18 +71,27 @@ export default {
       console.log('您已失去焦点！');
     },
     submitFun(value) {
-      console.log(value);
-      console.log('默认提交操作！');
+      console.log('您输入的内容为：'+value);
+      console.log('您触发了右侧按钮的事件，默认提交操作！');
     },
 
     search(value) {
       this.$refs.myInput.blur();
       console.log('搜索');
+    },
+
+    handleAction(value){
+      console.log('您输入的内容为：'+value);
+      console.log('您点击了input搜索框右侧的图标')
     }
   }
 };
 </script>
 <style lang="scss" scoped>
+h4{
+  font-size: 15px;
+  color: #323232;
+}
 .demo1 {
 	padding: 10px;
 	background: #fff;

src/packages/searchbar/doc.md

@@ -5,30 +5,67 @@
 ## 基本用法
 
 ```html
-<nut-searchbar
-    placeText="请输入自定义文案"
+<nut-searchbar 
+    :hasIcon="true" 
+    :hasSearchButton="false"
+    :clearable='true'
 ></nut-searchbar>
 ```
 
-## 右侧搜索按钮可根据需要进行配置
+## 搜索框对齐方式
 
 ```html
-<nut-searchbar
-    placeText="请输入自定义文案"
-    :hasSearchButton="false"
+<nut-searchbar 
+    :hasIcon="true"
+    :hasSearchButton="false" 
+    inputAlign="center"
 ></nut-searchbar>
 ```
 
-## 可配置输入框前面是否显示搜索图标、右侧是否显示文字按钮、显示文字、自定义 class
+## 自定义右侧按钮
 
 ```html
-<nut-searchbar
-    placeText="ERP/姓名/邮箱"
-    :hasIcon="true"
-    :hasTextButton="true"
-    textInfo="取消"
-    customClass="search_demo"
-></nut-searchbar>
+
+// 默认图标
+<nut-searchbar placeText="右侧默认图标" @submit="submitFun"></nut-searchbar>
+
+// 自定义图标
+<nut-searchbar placeText="右侧图标自定义" @submit="submitFun" :searchButtonIcon="require('../../assets/svg/qr.svg')"></nut-searchbar>
+
+// 默认文案
+<nut-searchbar placeText="右侧默认文字" :hasTextButton="true" @submit="submitFun"></nut-searchbar>
+
+// 自定义文案
+<nut-searchbar placeText="右侧文字自定义" :hasIcon="true" :hasTextButton="true" textInfo="取消" @submit="submitFun"></nut-searchbar>
+
+export default {
+    methods:{
+        submitFun(value) {
+            console.log('您输入的内容为：'+value);
+            console.log('您触发了右侧按钮的事件，默认提交操作！');
+        }
+    }
+}
+```
+
+## 自定义搜索框右侧按钮
+
+```html
+
+// 默认图标
+<nut-searchbar :hasIcon="true" :hasSearchButton="false" :hasAction="true" @handleAction="handleAction"></nut-searchbar>
+
+// 自定义图标
+<nut-searchbar :hasIcon="true" :hasSearchButton="false" :hasAction="true" :actionIcon="require('../../assets/svg/rate-default-img.svg')" @handleAction="handleAction"></nut-searchbar>
+
+export default {
+    methods:{
+        handleAction(value){
+            console.log('您输入的内容为：'+value);
+            console.log('您点击了input搜索框右侧的图标')
+        }
+    }
+}
 ```
 
 ## 事件
@@ -41,6 +78,7 @@
     @blur="blurFun"
     @submit="submitFun"
 ></nut-searchbar>
+
 ```
 
 ## 获取焦点与失去焦点
@@ -101,6 +139,7 @@ export default {
 |----- | ----- | ----- | -----
 | hasIcon | 是否显示输入框前面的 icon | Boolean | false
 | placeText | 输入框 placeholder 内容 | String | '请输入内容...'
+| inputAlign | 输入框内容的对齐方式，可选值：left/center/right| String | left
 | hasSearchButton | 是否显示右侧搜索按钮 | Boolean | true
 | hasTextButton | 右侧搜索按钮是否为文字按钮 | Boolean | false
 | textInfo | 右侧文字搜索按钮文案 | String | '搜索'
@@ -108,10 +147,15 @@ export default {
 | customClass | 自定义 class | String | ''
 | searchIconSize | Search 图标的尺寸 | String | '20px'
 | searchIconColor | Search 图标的颜色 | String | '#2e2d2d'
+| searchBtnIcon | 自定义 Search 图标 | String | 默认 搜索图标
 | searchBtnIconSize | 搜索按钮图标的尺寸 | String | '20px'
 | searchBtnIconColor | 搜索按钮图标的颜色 | String | '#2e2d2d'
+| clearable | 是否启用清除控件 | Boolean | true
 | clearIconSize | 清空按钮图标的尺寸 | String | '15px'
 | clearIconColor | 清空按钮图标的颜色 | String | '#2e2d2d'
+| hasAction | 输入框右侧是否展示图标 | Boolean | false
+| actionIcon | 自定义输入框右侧图标 | String | 二维码图标
+| actionIconSize | 设置自定义输入框右侧图标的大小 | String | '20px'
 
 ## Event
 
@@ -121,3 +165,5 @@ export default {
 | input | 输入框输入内容时触发事件 | 无
 | blur | 输入框失去焦点时触发事件 | 无
 | submit | 默认提交事件，点击右侧Icon或文字也会触发 | 无
+| handleAction | 点击输入框右侧图标触发 | 无
+

src/packages/searchbar/searchbar.scss

@@ -5,43 +5,84 @@
 	flex-flow: row;
 
 	.search-input {
+    	height: 36px;
 		flex: 1;
-		padding-left: 10px;
-		margin-right: 10px;
-		background-color: $light-color;
-		border-radius: 20px;
+		padding: 0 0 0 13px;
+    	background-color: rgba(247,247,247,1);;
+		border-radius: 18px;
 
 		form {
 			display: flex;
+			height: 100%;
+			width: 100%;
 			align-items: center;
 			position: relative;
-			margin-right: 10px;
+			  
+			.search-icon{
+				margin-right: 5px;
+			}
+      
+			input {
+				width: 100%;
+				flex: 1;
+				padding: 0;
+				margin: 0;
+				background-color: transparent;
+				border-color: transparent;
+				outline: none;
+				color: #323232;
+				font-size: 14px;
 
-			.close-icon {
-				display: none;
+				&.left{
+					text-align: left;
+				}
+				&.center{
+					text-align: center;
+				}
+				&.right{
+					text-align: right;
+				}
+		
+				&::-webkit-search-cancel-button {
+					display: none;
+				}
 
-				&.show {
-					display: inline-flex;
+				&::-webkit-input-placeholder { 
+					font-size: 14px;
+					color:#C8C8C8;
+					font-weight: normal;
+				}
+				&:-moz-placeholder { 
+					font-size: 14px;
+					color:#C8C8C8;
+					font-weight: normal;
+				}
+				&::-moz-placeholder { 
+					font-size: 14px;
+					color:#C8C8C8;
+					font-weight: normal;
+				}
+				&:-ms-input-placeholder { 
+					font-size: 14px;
+					color:#C8C8C8;
+					font-weight: normal;
 				}
 			}
-		}
-
-		i {
-			display: inline-block;
-		}
-
-		input {
-			min-width: 80%;
-			flex: 1;
-			padding: 10px 0;
-			margin-left: 10px;
-			background-color: $light-color;
-			border-color: transparent;
-			outline: none;
+			
+			.input-right{
+				height: 100%;
+				display: flex;
+				align-items: center;
+				
+				&:last-child{
+					margin: 0 16px 0 4px;
+				}
 
-			&::-webkit-search-cancel-button {
-				display: none;
+				&.pos{
+					margin: 0 8px 0 4px;
+				}
 			}
+			
 		}
 
 		&.focus {
@@ -53,11 +94,14 @@
 		}
 	}
 
-	.btn-search {
-		display: inline-flex;
+	.btn-right {
+		display: flex;
 		align-items: center;
 		justify-content: center;
-		color: $title-color;
+		margin-left: 12px;
+		font-size: 14px;
+		color: #E1251B;
+
 	}
 
 	a {

src/packages/searchbar/searchbar.vue

@@ -2,10 +2,11 @@
   <div :class="['nut-searchbar', customClass ? customClass : '']">
     <div class="search-input" :class="[animation ? 'nut-search-ani' : '', inputFocusAnimation ? 'focus' : '']">
       <form action="javascript:return true" id="input-form">
-        <nut-icon type="search" v-if="hasIcon" :size="searchIconSize" :color="searchIconColor"></nut-icon>
+        <nut-icon class="search-icon" type="search3" v-if="hasIcon" :size="searchIconSize" :color="searchIconColor"></nut-icon>
         <input
           type="search"
           v-model="value"
+          :class="[inputAlign]"
           :placeholder="placeText || nutTranslate('lang.searchbar.placeText')"
           @keyup.enter="submitFun"
           @input="inputFun"
@@ -13,15 +14,22 @@
           @focus="focusFun"
           ref="searchInput"
         />
-        <span class="close-icon" :class="hasCloseIcon ? 'show' : ''" @click="clearInput">
-          <nut-icon type="circle-cross" :size="clearIconSize" :color="clearIconColor"></nut-icon>
+        <!-- 清空input中输入的内容 -->
+        <span class="input-right close-icon" v-if="clearable && hasCloseIcon" :class="[hasAction?'pos':'']" @click="clearInput">
+          <nut-icon type="clear" :size="clearIconSize"></nut-icon>
+        </span>
+        <!-- input右侧事件 -- 默认 二维码 -->
+        <span class="input-right custom-icon" v-if="hasAction" @click="handleAction">
+          <nut-icon v-if="hasAction && actionIcon == ''" type="qr" :size="actionIconSize"></nut-icon>
+          <nut-icon v-if="hasAction && actionIcon != ''" type="self" :url="actionIcon" :size="actionIconSize"></nut-icon>
         </span>
       </form>
     </div>
-    <a href="javascript:;" class="btn-search" v-if="hasSearchButton" @click="submitFun">
+    <div class="btn-right" v-if="hasSearchButton" @click="submitFun">
       <span v-if="hasTextButton">{{ textInfo || nutTranslate('lang.searchbar.textInfo') }}</span>
-      <nut-icon type="search" v-else :size="searchBtnIconSize" :color="searchBtnIconColor"></nut-icon>
-    </a>
+      <nut-icon type="search3" v-if="!hasTextButton && searchBtnIcon == ''" :size="searchBtnIconSize" :color="searchBtnIconColor"></nut-icon>
+      <nut-icon type="self" v-if="!hasTextButton && searchBtnIcon != ''" :size="searchBtnIconSize" :color="searchBtnIconColor" :url='searchBtnIcon'></nut-icon>
+    </div>
   </div>
 </template>
 <script>
@@ -53,11 +61,7 @@ export default {
     },
     clearIconSize: {
       type: String,
-      default: '15px'
-    },
-    clearIconColor: {
-      type: String,
-      default: '#2e2d2d'
+      default: '14px'
     },
     placeText: {
       type: String
@@ -80,6 +84,34 @@ export default {
     customClass: {
       type: String,
       default: ''
+    },
+    // 新增 input 输入的位置  left center right
+    inputAlign:{ 
+      type:String,
+      default:'left'
+    },
+    // 新增 是否启用清除控件
+    clearable:{
+      type:Boolean,
+      default:true
+    },
+    // 新增 搜索框右侧按钮
+    hasAction:{
+      type:Boolean,
+      default:false
+    },
+    actionIcon:{
+      type:String,
+      default:''
+    },
+    actionIconSize:{
+      type:String,
+      default:'20px'
+    },
+    // 新增 右侧按钮图标
+    searchBtnIcon:{
+      type:String,
+      default:''
     }
   },
   components: {
@@ -123,6 +155,10 @@ export default {
       this.$nextTick(function() {
         this.$refs.searchInput.focus();
       });
+    },
+
+    handleAction(){
+      this.$emit('handleAction', this.value);
     }
   }
 };