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

src/packages/address/address.vue

@@ -11,13 +11,13 @@
     >
       <div class="title">
         <span class="arrow" @click="switchModule">
-          <nut-icon v-if="showModule == 'custom' && type == 'exist'" type="self" :url="require('../../assets/svg/arrows-back.svg')"></nut-icon>
+          <nut-icon v-if="showModule == 'custom' && type == 'exist' && backBtnIcon" type="self" :url="backBtnIcon"></nut-icon>
         </span>
 
         <span v-if="type == 'custom'">{{ customAddressTitle }}</span>
         <span v-if="type == 'exist'">{{ existAddressTitle }}</span>
 
-        <span @click="handClose('hand')"><nut-icon type="circle-cross" size="18px"></nut-icon></span>
+        <span @click="handClose('hand')"><nut-icon v-if="closeBtnIcon" size="18px" type="self" :url="closeBtnIcon"></nut-icon></span>
       </div>
 
       <!-- 请选择 -->
@@ -136,6 +136,16 @@ export default {
       // 地址选择列表前 - 选中的图标
       type: String,
       default: require('../../assets/svg/tick-red.svg')
+    },
+    closeBtnIcon:{
+      // 关闭弹框按钮 icon
+      type: String,
+      default: require('../../assets/svg/circle-cross.svg')
+    },
+    backBtnIcon:{
+      // 选择其他地址左上角返回 icon
+      type: String,
+      default: require('../../assets/svg/arrows-back.svg')
     }
   },
   data() {
@@ -305,6 +315,8 @@ export default {
     },
     // 手动关闭 点击叉号，或者蒙层
     handClose(type = 'self') {
+      if(!this.closeBtnIcon) return
+
       if (type == 'hand') {
         this.closeWay = 'hand';
       } else {
@@ -327,7 +339,14 @@ export default {
     },
     // 选择其他地址
     switchModule() {
-      this.showModule = this.showModule == 'exist' ? 'custom' : 'exist';
+
+      if(this.showModule == 'exist'){
+        this.showModule = 'custom'
+      }else{
+        if(!this.backBtnIcon) return
+        this.showModule = 'exist'
+      }
+      
       this.initAddress();
 
       this.$emit('switchModule', { type: this.showModule });

src/packages/address/demo.vue

@@ -55,6 +55,7 @@
       @selected="selected3"
       :defaultIcon="defaultIcon"
       :selectedIcon="selectedIcon"
+      :closeBtnIcon="closeBtnIcon"
     ></nut-address>
 
     <nut-address
@@ -65,6 +66,7 @@
       :city="city"
       :country="country"
       :town="town"
+      :backBtnIcon="backBtnIcon"
       @onChange="onChange4"
       @close="close4"
       @selected="selected4"
@@ -104,6 +106,9 @@ export default {
       selectedIcon: require('../../assets/svg/checked.svg'),
       defaultIcon: require('../../assets/svg/unchecked.svg'),
 
+      closeBtnIcon: require('../../assets/svg/close.svg'),
+      backBtnIcon: require('../../assets/svg/back.svg'),
+
       showPopupOther: false,
       existAddress: [
         { id: 1, addressDetail: 'th ', cityName: '石景山区', countyName: '城区', provinceName: '北京', selectedAddress: true, townName: '' },

src/packages/address/doc.md

@@ -133,7 +133,8 @@ export default {
   :isShowCustomAddress="false" 
   @selected="selected3" 
   :defaultIcon="defaultIcon" 
-  :selectedIcon='selectedIcon'>
+  :selectedIcon="selectedIcon"
+  :closeBtnIcon="closeBtnIcon">
 </nut-address>
 
 ```
@@ -146,6 +147,7 @@ export default {
         showPopupCustomImg:false,
         selectedIcon:require('../../assets/svg/checked.svg'),
         defaultIcon:require('../../assets/svg/unchecked.svg'),
+        closeBtnIcon: require('../../assets/svg/close.svg'),
         existAddress:[
           {"id":1,"addressDetail":"th ","cityName":"石景山区","countyName":"城区","provinceName":"北京","selectedAddress":true,"townName":""},
           {"id":2,"addressDetail":"12_ ","cityName":"电饭锅","countyName":"扶绥县","provinceName":"北京","selectedAddress":false,"townName":""},
@@ -200,6 +202,7 @@ export default {
     :city="city" 
     :country="country" 
     :town="town" 
+    :backBtnIcon="backBtnIcon"
     customAndExistTitle="选择其他地址"
     @onChange="onChange4" 
     @close="close4" 
@@ -225,6 +228,7 @@ export default {
       city:[{"id":7,"name":"朝阳区"},{"id":8,"name":"崇文区"},{"id":9,"name":"昌平区"},{"id":6,"name":"石景山区"}],// 市
       country:[{"id":3,"name":"八里庄街道"},{"id":9,"name":"北苑"},{"id":4,"name":"常营乡"}],// 县
       town:[], // 镇 必传值：name
+      backBtnIcon: require('../../assets/svg/back.svg'),
     };
   },
   methods: {
@@ -274,6 +278,8 @@ export default {
 | existAddress | 已存在地址列表，每个地址对象中，必传值provinceName、cityName、countyName、townName、addressDetail、selectedAddress（字段解释见下） | Array | []
 | defaultIcon | 已有地址列表默认图标，type=‘exist’ 时生效 | string | ''
 | selectedIcon | 已有地址列表选中图标，type=‘exist’ 时生效 | string | ''
+| closeBtnIcon | 自定义关闭弹框按钮图标 | string | -
+| backBtnIcon | 自定义地址与已有地址切换时，自定义返回的按钮图标 | string | -
 | isShowCustomAddress | 是否可以切换自定义地址选择，type=‘exist’ 时生效 | Boolean | true
 | customAddressTitle  | 自定义地址选择文案，type='custom' 时生效 | string | '请选择所在地区'
 | existAddressTitle| 已有地址文案 ，type=‘exist’ 时生效| string | '配送至'

src/packages/cell/cell.scss

@@ -8,8 +8,8 @@
 		text-decoration: none;
 		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 		outline: none;
-		border-bottom: 1px solid rgba(230, 230, 230, 1);
-
+		border-bottom: 1px solid transparent;
+		border-image: linear-gradient(to bottom,transparent 50%, rgba(230, 230, 230, 1) 50%) 0 0 100%/1px 0;
 		&.nut-cell-link:active {
 			background-color: $light-color !important;
 		}
@@ -18,22 +18,23 @@
 			display: flex;
 			align-items: center;
 			justify-content: space-between;
-			// min-height: 48px;
-			// @include nut-cell-border;
-			// .nut-icon {
-			// 	margin-right: 13px;
-			// }
+		}
+		.avatar{
+			margin-right: 13px;
+		}
+		.nut-avatar{
+			margin-right:8px;
 		}
 		.nut-cell-left {
 			flex: 1;
 			flex-direction: column;
-			margin-left: 13px;
+			//margin-left: 8px;
 		}
 
 		.nut-cell-title {
 			display: block;
-			line-height: 24px;
-			font-size: 15px;
+			line-height: 25px;
+			font-size: 16px;
 			color: rgba(100, 100, 100, 1);
 		}
 
@@ -53,10 +54,9 @@
 			align-items: center;
 			font-size: $font-size-small;
 			color: $text-color;
-
 			.nut-cell-desc {
 				color: #969696ff;
-				margin-right: 10px;
+				//margin-right: 10px;
 			}
 		}
 
@@ -65,29 +65,16 @@
 			align-items: center;
 
 			img {
-				height: 14px;
-				margin-left: 10px;
+				//height: 14px;
+				margin-left: 4px;
 			}
 		}
-		// &:first-of-type {
-		//   @include nut-cell-border;
-		//   .nut-cell-box {
-		//     background-image: none;
-		//   }
-		// }
-		// &:last-of-type {
-		//   @include nut-cell-border;
-		//   background-position: bottom;
-		// }
-		// &:only-of-type {
-		//   background: linear-gradient(rgba($dark-color, 0.5), rgba($dark-color, 0.5)) bottom,
-		//     linear-gradient(rgba($dark-color, 0.5), rgba($dark-color, 0.5)) top;
-		//   background-size: 100% 1px;
-		//   background-repeat: no-repeat;
-		// }
 	}
 
 	&:last-child .nut-cell {
 		border-bottom: none;
 	}
 }
+.demo-list p{
+	padding: 0px !important;
+}

src/packages/cell/cell.vue

@@ -21,7 +21,7 @@
           >
           <span class="nut-cell-icon">
             <slot name="icon" v-if="showIcon">
-              <nut-icon type="right" size="11px" color="#848484"></nut-icon>
+              <img width="17" height="17" src="../../assets/img/ic-arrow.png"/>
             </slot>
           </span>
         </div>
@@ -76,7 +76,12 @@ export default {
     'nut-icon': Icon
   },
   data() {
-    return {};
+    return {
+
+    };
+  },
+  computed:{
+   
   },
   methods: {
     clickCell() {

src/packages/cell/demo.vue

@@ -22,16 +22,24 @@
     <h4>菜单列表</h4>
     <div class="cell-box">
       <nut-cell :show-icon="true" title="我的主页" @click-cell="clickEvnt">
-        <div slot="avatar"><nut-icon type="self" color="#9D49F8FF" size="18px" :url="require('../../assets/svg/avatar.svg')">></nut-icon></div>
+        <div slot="avatar">
+         <img width="24" height="24" class="avatar-img" src="../../assets/img/ic_me.png"/>
+        </div>
       </nut-cell>
       <nut-cell :show-icon="true" title="店铺定位" desc="查看店铺" @click-cell="clickEvnt">
-          <div slot="avatar"><nut-icon type="self" color="#FF6E4CFF" size="18px" :url="require('../../assets/svg/nav.svg')">></nut-icon></div>
+          <div slot="avatar">
+            <img width="24" height="24" class="avatar-img" src="../../assets/img/ic_location.png"/>
+          </div>
       </nut-cell>
       <nut-cell :show-icon="true" title="我的收藏" @click-cell="clickEvnt">
-        <div slot="avatar"><nut-icon type="self" color="#FFBA12FF" size="18px" :url="require('../../assets/svg/star.svg')">></nut-icon></div>
+        <div slot="avatar">
+          <img width="24" height="24" class="avatar-img" src="../../assets/img/ic_collect.png"/>
+        </div>
       </nut-cell>
       <nut-cell :show-icon="true" title="设置" desc="版本升级" @click-cell="clickEvnt">
-          <div slot="avatar"><nut-icon type="self" color="#1EA3FFFF" size="18px" :url="require('../../assets/svg/set.svg')">></nut-icon></div>
+          <div slot="avatar">
+            <img width="24" height="24" class="avatar-img" src="../../assets/img/ic_set.png"/>
+          </div>
       </nut-cell>
     </div>
     <h4>消息列表</h4>
@@ -47,14 +55,14 @@
         <div slot="avatar"><nut-avatar sizeNum="60" :bg-image="require('../../assets/img/cell-avatar.jpeg')" bg-icon></nut-avatar></div>
         <div slot="desc">
           <p class="timer">1小时前</p>
-          <p class="badge"><nut-badge  :is-dot="true" :max="99" top="0px" right="5px"></nut-badge></p>
+          <p class="badge"><nut-badge  :is-dot="true" :max="99" top="0px" right="10px"></nut-badge></p>
         </div>
       </nut-cell>
       <nut-cell title="噜啦噜" sub-title="我又来送福利啦！关注之后你就会">
         <div slot="avatar"><nut-avatar sizeNum="60" :bg-image="require('../../assets/img/cell-avatar.jpeg')" bg-icon></nut-avatar></div>
         <div slot="desc">
           <p class="timer">星期五</p>
-          <p class="badge"><nut-badge  :value="100" :max="99" top="0px" right="25px"></nut-badge></p>
+          <p class="badge"><nut-badge  :value="100" :max="99" top="0px" right="30px"></nut-badge></p>
         </div>
       </nut-cell>
     </div>
@@ -99,4 +107,7 @@ export default {
 		height: 100%;
 	}
 }
+.avatar-img{
+  margin-right: 8px;
+}
 </style>

src/packages/navbar/navbar.scss

@@ -14,16 +14,23 @@
 		.back {
 			float: left;
 			margin-right: 8px;
+			height: 100%;
+			display: flex;
+			align-items: center;
 		}
-		.back-icon,.close-icon {
-			display: inline-block;
+		// .back-icon,.close-icon {
+		// 	display: flex;
+		// 	width: 22px;
+		// 	height: 100%;
+		// 	background-size: contain;
+		// 	align-items: center;
+		// }
+		.close{
+			display: flex;
 			width: 22px;
-			height: 22px;
+			height: 100%;
 			background-size: contain;
-			vertical-align: middle;
-		}
-		.close{
-			display: inline-block;
+			align-items: center;
 		}
 	}
 
@@ -48,9 +55,13 @@
 		height: 40px;
 		line-height: 40px;
 		margin-top: -20px;
-		font-size: 14px;
+		font-size: 16px;
 		display: flex;
 		align-items: center;
+		.search{
+			display: flex;
+			align-items: center;
+		}
 		.search-icon{
 			display: flex;
 			align-items: center;

src/packages/navbar/navbar.vue

@@ -3,12 +3,12 @@
     <div class="nav-left">
       <div class="back" v-if="backShow" @click="$emit('on-click-back')">
         <slot name="back-icon">
-          <nut-icon class="back-icon" type="self" color="#323232FF" size="18px" :url="require('../../assets/svg/arrow_right.svg')"></nut-icon>
+          <img width="22" height="22" src="../../assets/img/nav_arrow.png" />
         </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>
+           <img width="22" height="22" src="../../assets/img/nav_close.png" />
         </slot>
       </div>
     </div>
@@ -22,12 +22,12 @@
     <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>
+            <img width="22" height="22" src="../../assets/img/nav_search.png" />
         </slot>
       </div>
       <div class="more" @click="$emit('on-click-more')" v-if="moreShow">
         <slot name="more-icon">
-          <nut-icon class="more-icon" type="self" color="#323232FF" size="20px" :url="require('../../assets/svg/ellipsis.svg')"></nut-icon>
+           <img width="22" height="22" src="../../assets/img/nav_more.png" />
         </slot>
       </div>
     </div>

src/packages/tab/tab.scss

@@ -61,6 +61,7 @@
 		border: 0;
 
 		.nut-tab-link {
+			font-size: 16px;
 			color: #e1251b;
 			font-weight: bold;
 		}
@@ -101,11 +102,9 @@
 	// height: 200px;
 	overflow-y: auto;
 	overflow-x: hidden;
-
 	&::-webkit-scrollbar {
 		display: none;
 	}
-
 	.nav-bar-left {
 		position: absolute;
 		width: 2px;
@@ -115,27 +114,25 @@
 		background: $primary-color;
 		transition: all 0.3s ease-in-out;
 	}
-
 	.nut-title-nav {
 		border: 0;
 		background: #f7f7f7;
-		border-left: 1px solid #f5f7fa;
+		//border-left: 1px solid #f5f7fa;
 	}
-
 	.nut-tab-active {
 		.nut-tab-link {
 			position: relative;
 			background: #fff;
 			color: #e1251b;
 			font-weight: bold;
+			font-size: 16px;
 		}
-
 		.tab-line {
 			&::after {
 				content: "";
 				position: absolute;
 				height: 100%;
-				width: 3px;
+				width: 4px;
 				background: #e1251b;
 				left: 0;
 				top: 0;
@@ -177,6 +174,7 @@
 			background: #fff;
 			color: #e1251b;
 			font-weight: bold;
+			font-size: 16px;
 		}
 
 		.tab-line {
@@ -199,12 +197,11 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	font-size: 12px;
 	text-decoration: none;
 	line-height: 1;
 	width: 100%;
 	height: 100%;
-	font-size: 13px;
+	font-size: 15px;
 }
 
 .nut-tab-title-bottomnav {
@@ -242,6 +239,7 @@
 		.nut-tab-link {
 			color: #e1251b;
 			font-weight: bold;
+			font-size: 16px;
 		}
 
 		.tab-line {
@@ -275,7 +273,7 @@
 .nut-title-nav-leftnav {
 	flex: 1;
 	display: flex;
-	padding-left: 5px;
+	//padding-left: 5px;
 	//justify-content: center;
 	align-items: center;
 	position: relative;
@@ -324,12 +322,15 @@
 	height: 88px;
 	border: 1px solid #fff;
 	background: #fff;
-	width: 100%;
+	// width: 100%;
 	padding: 20px;
 	box-sizing: border-box;
 	font-size: 14px;
 	color: #646464;
-
+	flex: 1;
+	.nut-tab-panel p{
+		padding: 0;
+	}
 	.hide {
 		display: none;
 	}

src/packages/tabbar/doc.md

@@ -76,6 +76,7 @@ export default {
 |----- | ----- | ----- | ----- 
 | tabbar-list | 渲染数据 | Array | []
 | bottom | 是否固定在页面底部 |Boolean|false|
+| replace | replace为true的时候，跳转url以替换的形式进行 |Boolean|false|
 
 ### tabbar-list
 

src/packages/tabbar/tabbar.vue

@@ -6,7 +6,6 @@
       :class="[{ 'curr': index == currIndex }]"
       :key="value.tabTitle"
       v-on:click="switchTabs(value, index)"
-      :href="value.href"
     >
     <nut-badge 
         :isDot="value.isDot"
@@ -43,6 +42,10 @@ export default {
     bottom: {
       type: Boolean,
       default: false
+    },
+    replace:{
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -73,6 +76,13 @@ export default {
     },
     switchTabs: function(value, index) {
       this.currIndex = index;
+      if(this.replace){ //替换url
+        window.location.replace(value.href);
+      }else{
+        if(value.href){
+          window.location.href = value.href;
+        }
+      }
       this.$emit('tab-switch', value, index);
     }
   }

src/packages/uploader/demo.vue

@@ -4,15 +4,31 @@
     <p>自定义样式，和图片预览</p>
     <div>
       <div class="preview-img-box">
-        <transition name="fade">
-          <div class="img-list" v-if="previewImg">
-            <img-cell v-for="(item,index) in previewImg" :key="index" :src="item" :clear="()=>{clearImg(index)}" />
-          </div>
-        </transition>
-        <nut-uploader class="demo-1" :name="name" :url="url" :xhrState="stateNum"
-          :acceptType="['image/jpeg', 'image/png', 'image/gif', 'image/bmp']" :isPreview="true" @preview="preview"
-          @success="demo1Success" @failure="demo1Fail" @start="demo1UploadStart" @showMsg="showMsg" :multiple="true">+
-        </nut-uploader>
+        
+        <div class="img-list">
+          <img-cell v-for="(item,index) in previewImg" 
+                    :key="index"   
+                    :src="item"
+                    :clear="()=>{clearImg(index)}"
+                      /> 
+
+           <nut-uploader
+              class="demo-1"
+              :name="name"
+              :url="url"
+              :xhrState="stateNum"
+              :acceptType="['image/jpeg', 'image/png', 'image/gif', 'image/bmp']"
+              :isPreview="true"
+              @preview="preview"
+              @success="demo1Success"
+              @failure="demo1Fail"
+              @start="demo1UploadStart"
+              @showMsg="showMsg"
+              :multiple="true"
+        >+</nut-uploader>           
+        </div>
+       
+         
       </div>
 
     </div>
@@ -205,5 +221,6 @@ export default {
   display: flex;
   padding: 10px;
   flex-wrap: wrap;
+  
 }
 </style>

src/packages/uploader/img-cell.vue

@@ -25,7 +25,8 @@ export default {
         position: relative;
         display: inline-flex;
         align-items: center;
-        margin-right: 12px;        
+        margin: 0 12px 12px 0;        
+        border:1px solid #ccc;
         .close{
             position: absolute;
             display: block;