feat: cell add desc slot(#2503) (#2556)

jdf2e · Sep 11, 2023 · 34b65be · 34b65be
1 parent 10eeae2
commit 34b65be
Show file tree

Hide file tree

Showing 6 changed files with 75 additions and 5 deletions.
diff --git a/packages/nutui-taro-demo/src/basic/pages/cell/index.vue b/packages/nutui-taro-demo/src/basic/pages/cell/index.vue
@@ -24,6 +24,13 @@
       </template>
     </nut-cell>
 
+    <h2>直接使用插槽(slot desc)</h2>
+    <nut-cell title="我是标题">
+      <template #desc>
+        <span>描述文字 <b style="color: red">2</b></span>
+      </template>
+    </nut-cell>
+
     <!-- <nut-cell-group title="链接 | 分组用法">
       <nut-cell title="链接" is-link></nut-cell>
       <nut-cell

diff --git a/src/packages/__VUE/cell/demo.vue b/src/packages/__VUE/cell/demo.vue
@@ -29,6 +29,13 @@
       </template>
     </nut-cell>
 
+    <h2>{{ translate('title10') }}</h2>
+    <nut-cell :title="translate('title')">
+      <template #desc>
+        <span>{{ translate('desc') }} <b style="color: red">2</b></span>
+      </template>
+    </nut-cell>
+
     <nut-cell-group :title="translate('title5')" :desc="translate('desc1')">
       <nut-cell :title="translate('link')" is-link></nut-cell>
       <nut-cell :title="translate('urlJump')" desc="https://m.jd.com" is-link url="https://m.jd.com"></nut-cell>
@@ -92,6 +99,7 @@ const initTranslate = () =>
       title7: '垂直居中',
       title8: '直接使用插槽(slot title)',
       title9: '尺寸设置 large',
+      title10: '直接使用插槽(slot desc)',
       link: '链接',
       urlJump: 'URL 跳转',
       routerJump: '路由跳转 ’/‘ ',

diff --git a/src/packages/__VUE/cell/doc.en-US.md b/src/packages/__VUE/cell/doc.en-US.md
@@ -78,6 +78,22 @@ const click = () => {
 
 :::
 
+### Use Slots desc
+
+:::demo
+
+```vue
+<template>
+  <nut-cell title="Title">
+    <template #desc>
+      <span>Desc <b style="color: red">2</b></span>
+    </template>
+  </nut-cell>
+</template>
+```
+
+:::
+
 ### Link | CellGroup Usage
 
 :::demo
@@ -221,6 +237,7 @@ You can center the left and right contents of the cell vertically through the 'c
 | default | Default slot        |
 | link    | Custom Right `link` |
 | title   | Custom `title` slot |
+| desc    | Custom `desc` slot  |
 
 ### CellGroup Slots
 

diff --git a/src/packages/__VUE/cell/doc.md b/src/packages/__VUE/cell/doc.md
@@ -78,6 +78,22 @@ const click = () => {
 
 :::
 
+### 直接使用插槽（slot desc）
+
+:::demo
+
+```vue
+<template>
+  <nut-cell title="我是标题">
+    <template #desc>
+      <span>描述文字 <b style="color: red">2</b></span>
+    </template>
+  </nut-cell>
+</template>
+```
+
+:::
+
 ### 链接 | 分组用法
 
 :::demo
@@ -221,6 +237,7 @@ import { My } from '@nutui/icons-vue';
 | default | 自定义内容              |
 | link    | 自定义右侧 `link` 区域  |
 | title   | 自定义 `title` 标题区域 |
+| desc    | 自定义 `desc` 描述区域  |
 
 ### CellGroup Slots
 

diff --git a/src/packages/__VUE/cell/doc.taro.md b/src/packages/__VUE/cell/doc.taro.md
@@ -68,9 +68,25 @@ const click = () => {
 
 ```vue
 <template>
-  <nut-cell desc="描述文字">
-    <template #title>
-      <span>Title <b style="color: red">1</b></span>
+  <nut-cell title="描述文字">
+    <template #desc>
+      <span>描述文字 <b style="color: red">1</b></span>
+    </template>
+  </nut-cell>
+</template>
+```
+
+:::
+
+### 直接使用插槽（slot desc）
+
+:::demo
+
+```vue
+<template>
+  <nut-cell title="我是标题">
+    <template #desc>
+      <span>描述文字 <b style="color: red">2</b></span>
     </template>
   </nut-cell>
 </template>
@@ -218,6 +234,7 @@ import { My } from '@nutui/icons-vue-taro';
 | default | 自定义内容              |
 | link    | 自定义右侧 `link` 区域  |
 | title   | 自定义 `title` 标题区域 |
+| desc    | 自定义 `desc` 描述区域  |
 
 ### CellGroup Slots
 

diff --git a/src/packages/__VUE/cell/template.html b/src/packages/__VUE/cell/template.html
@@ -17,9 +17,13 @@
                 </slot>
             </template>
         </view>
-        <view v-if="desc" class="nut-cell__value"
+        <view v-if="desc || $slots.desc" class="nut-cell__value"
             :class="{ 'nut-cell__value--alone': (!title && !subTitle && !$slots.title) }"
-            :style="{ 'text-align': descTextAlign }">{{ desc }}</view>
+            :style="{ 'text-align': descTextAlign }">
+            <slot name="desc">
+                {{ desc }}
+            </slot>        
+        </view>
         <slot name="link">
             <Right v-if="isLink || to" class="nut-cell__link"></Right>
         </slot>