fix(cell): sub-title icon 并存时样式错乱 #1092

Author: richard1015

src/packages/__VUE/cell/__tests__/__snapshots__/cell.spec.ts.snap

@@ -2,6 +2,7 @@
 
 exports[`prop desc-text-align left 1`] = `
 "<view class=\\"nut-cell\\" style=\\"border-radius: px;\\">
+  <!--v-if-->
   <!--v-if-->
   <view class=\\"nut-cell__value\\" style=\\"text-align: left;\\">张三</view>
   <!--v-if-->
@@ -10,15 +11,16 @@ exports[`prop desc-text-align left 1`] = `
 
 exports[`prop isLink  1`] = `
 "<view class=\\"nut-cell nut-cell--clickable\\" style=\\"border-radius: px;\\">
+  <!--v-if-->
   <!--v-if-->
   <!--v-if--><i class=\\"nutui-iconfont nut-icon nut-icon-right nut-cell__link\\" src=\\"\\"></i>
 </view>"
 `;
 
 exports[`prop title desc subtitle 1`] = `
 "<view class=\\"nut-cell\\" style=\\"border-radius: px;\\">
+  <!--v-if-->
   <view class=\\"nut-cell__title\\">
-    <!--v-if-->
     <view class=\\"title\\">标题1</view>
     <view class=\\"nut-cell__title-desc\\">副标题1</view>
   </view>
@@ -31,7 +33,9 @@ exports[`slot default test 1`] = `"<view class=\\"nut-cell\\" style=\\"border-ra
 
 exports[`slot link、icon test 1`] = `
 "<view class=\\"nut-cell\\" style=\\"border-radius: px;\\">
-  <view class=\\"nut-cell__title icon\\">Custom Icon<view class=\\"title\\">标题1</view>
+  <view class=\\"nut-cell__icon\\">Custom Icon</view>
+  <view class=\\"nut-cell__title\\">
+    <view class=\\"title\\">标题1</view>
     <view class=\\"nut-cell__title-desc\\">副标题1</view>
   </view>
   <view class=\\"nut-cell__value\\" style=\\"text-align: right;\\">描述1</view>Custom Link

src/packages/__VUE/cell/index.scss

@@ -50,16 +50,16 @@
     }
   }
 
+  &__icon {
+    display: flex;
+    flex-direction: row;
+    margin-right: $cell-default-icon-margin;
+  }
+
   &__title {
     display: flex;
     flex-direction: column;
     flex: 1;
-    &.icon {
-      flex-direction: row;
-      .icon {
-        margin-right: 10px;
-      }
-    }
     &-desc {
       font-size: $cell-title-desc-font;
     }

src/packages/__VUE/cell/index.taro.vue

@@ -1,14 +1,11 @@
 <template>
   <view :class="classes" :style="baseStyle" @click="handleClick">
     <slot>
-      <view
-        class="nut-cell__title"
-        :class="{ icon: icon || $slots.icon }"
-        v-if="title || subTitle || icon"
-      >
+      <view class="nut-cell__icon" v-if="icon || $slots.icon">
         <slot v-if="$slots.icon" name="icon"></slot>
         <nut-icon v-else-if="icon" class="icon" :name="icon"></nut-icon>
-
+      </view>
+      <view class="nut-cell__title" v-if="title || subTitle">
         <template v-if="subTitle">
           <view class="title">{{ title }}</view>
           <view class="nut-cell__title-desc">{{ subTitle }}</view>
@@ -17,19 +14,10 @@
           {{ title }}
         </template>
       </view>
-      <view
-        v-if="desc"
-        class="nut-cell__value"
-        :style="{ 'text-align': descTextAlign }"
-        >{{ desc }}</view
-      >
+      <view v-if="desc" class="nut-cell__value" :style="{ 'text-align': descTextAlign }">{{ desc }}</view>
 
       <slot v-if="$slots.link" name="link"></slot>
-      <nut-icon
-        v-else-if="isLink || to"
-        class="nut-cell__link"
-        name="right"
-      ></nut-icon>
+      <nut-icon v-else-if="isLink || to" class="nut-cell__link" name="right"></nut-icon>
     </slot>
   </view>
 </template>

src/packages/__VUE/cell/index.vue

@@ -1,9 +1,11 @@
 <template>
   <view :class="classes" :style="baseStyle" @click="handleClick">
     <slot>
-      <view class="nut-cell__title" :class="{ icon: icon || $slots.icon }" v-if="title || subTitle || icon">
+      <view class="nut-cell__icon" v-if="icon || $slots.icon">
         <slot v-if="$slots.icon" name="icon"></slot>
         <nut-icon v-else-if="icon" class="icon" :name="icon"></nut-icon>
+      </view>
+      <view class="nut-cell__title" v-if="title || subTitle">
         <template v-if="subTitle">
           <view class="title">{{ title }}</view>
           <view class="nut-cell__title-desc">{{ subTitle }}</view>

src/packages/__VUE/cellgroup/test/__snapshots__/index.spec.ts.snap

@@ -0,0 +1,6 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render title、desc slot correctly 1`] = `
+"<view class=\\"nut-cell-group\\">Custom TitleCustom Desc<view class=\\"nut-cell-group__warp\\"></view>
+</view>"
+`;

src/packages/styles/variables.scss

@@ -100,6 +100,7 @@ $cell-padding: 13px 16px !default;
 $cell-line-height: 20px !default;
 $cell-after-right: 16px !default;
 $cell-after-border-bottom: 2px solid #f5f6f7 !default;
+$cell-default-icon-margin: 0 4px 0 0px;
 
 // cell-group