feat: cell add desc slot(jdf2e#2503)

yi-boide · Sep 11, 2023 · cd1481c · cd1481c
1 parent 8034b3d
commit cd1481c
Show file tree

Hide file tree

Showing 6 changed files with 72 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

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

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>

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>