feat(cell): add icon slot #605

src/packages/__VUE/cell/demo.vue

@@ -35,6 +35,17 @@
       </nut-cell>
     </nut-cell-group>
 
+    <nut-cell-group title="自定义左侧 Icon 区域">
+      <nut-cell title="图片">
+        <template v-slot:icon>
+          <img
+            class="nut-icon"
+            src="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
+          />
+        </template>
+      </nut-cell>
+    </nut-cell-group>
+
     <h2>展示图标</h2>
     <nut-cell title="姓名" icon="my" desc="张三" isLink> </nut-cell>
     <h2>只展示 desc ，可通过 desc-text-align 调整内容位置</h2>

src/packages/__VUE/cell/doc.md

@@ -71,7 +71,17 @@ export default {
   </nut-cell>
 </nut-cell-group>
 ```
+### 自定义左侧 Icon 区域
 
+``` html
+<nut-cell-group title="自定义左侧 Icon 区域">
+  <nut-cell title="图片">
+    <template v-slot:icon>
+      <img class="nut-icon" src="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png" />
+    </template>
+  </nut-cell>
+</nut-cell-group>
+```
 
 ### 单元格展示图标
 
@@ -108,3 +118,11 @@ export default {
 | click | 点击事件 | event:Event |
 
 
+## Slots
+
+| 名称          | 说明                 |
+|---------------|----------------------|
+| icon `v3.1.4` | 自定义左侧 icon 区域 |
+| default       | 自定义内容           |
+| link          | 自定义右侧 link 区域 |
+

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

@@ -3,10 +3,12 @@
     <slot>
       <view
         class="nut-cell__title"
-        :class="{ icon: icon }"
+        :class="{ icon: icon || $slots.icon }"
         v-if="title || subTitle || icon"
       >
-        <nut-icon v-if="icon" class="icon" :name="icon"></nut-icon>
+        <slot v-if="$slots.icon" name="icon"></slot>
+        <nut-icon v-else-if="icon" class="icon" :name="icon"></nut-icon>
+
         <template v-if="subTitle">
           <view class="title">{{ title }}</view>
           <view class="nut-cell__title-desc">{{ subTitle }}</view>

src/packages/__VUE/cell/index.vue

@@ -3,10 +3,12 @@
     <slot>
       <view
         class="nut-cell__title"
-        :class="{ icon: icon }"
+        :class="{ icon: icon || $slots.icon }"
         v-if="title || subTitle || icon"
       >
-        <nut-icon v-if="icon" class="icon" :name="icon"></nut-icon>
+        <slot v-if="$slots.icon" name="icon"></slot>
+        <nut-icon v-else-if="icon" class="icon" :name="icon"></nut-icon>
+
         <template v-if="subTitle">
           <view class="title">{{ title }}</view>
           <view class="nut-cell__title-desc">{{ subTitle }}</view>

src/sites/mobile-taro/vue/src/base/pages/cell/index.vue

@@ -35,6 +35,17 @@
       </nut-cell>
     </nut-cell-group>
 
+    <nut-cell-group title="自定义左侧 Icon 区域">
+      <nut-cell title="图片">
+        <template v-slot:icon>
+          <img
+            class="nut-icon"
+            src="https://img11.360buyimg.com/imagetools/jfs/t1/137646/13/7132/1648/5f4c748bE43da8ddd/a3f06d51dcae7b60.png"
+          />
+        </template>
+      </nut-cell>
+    </nut-cell-group>
+
     <h2>展示图标</h2>
     <nut-cell title="姓名" icon="my" desc="张三" isLink> </nut-cell>
     <h2>只展示 desc ，可通过 desc-text-align 调整内容位置</h2>