feat: extra插槽

packages/card/index.vue

@@ -2,14 +2,24 @@
  * @Author: peerless_hero peerless_hero@outlook.com
  * @Date: 2023-07-08 01:36:19
  * @LastEditors: zhaojinfeng 121016171@qq.com
- * @LastEditTime: 2023-07-13 12:06:10
+ * @LastEditTime: 2023-07-13 16:19:22
  * @FilePath: \uni\packages\card\index.vue
  * @Description:
  *
 -->
 <template>
-  <view class="th-card" bg-white rounded-16rpx m-24rpx max-w-702rpx overflow-hidden>
-    <slot />
+  <view
+    class="th-card" :class="{ 'th-card-box-shadow': !noShadow }" bg-white rounded-16rpx m-24rpx max-w-702rpx
+    overflow-hidden
+  >
+    <view flex w-full>
+      <view flex-grow class="th-card-body">
+        <slot />
+      </view>
+      <view v-if="hasExtra" class="th-card-extra" w-128rpx m-16rpx>
+        <slot name="extra" />
+      </view>
+    </view>
     <view v-if="noCardActions" h-16rpx />
   </view>
 </template>
@@ -17,14 +27,24 @@
 <script lang="ts" setup name="Card">
 import { useSlots } from 'vue'
 
+withDefaults(defineProps<{
+  /** 取消阴影 */
+  noShadow?: boolean
+}>(),
+{ noShadow: false },
+)
+
 /** 不存在操作栏组件时，自动增加底部的内边距 */
 const noCardActions = useSlots().default().every(({ type }) =>
   typeof type !== 'object' || !('name' in type) || type.name !== 'CardActions',
 )
+const hasExtra = useSlots().extra
 </script>
 
 <style lang="scss">
 .th-card {
-  box-shadow: 0px 1px 6px 0px #d8d8d880;
+  &.th-card-box-shadow {
+    box-shadow: 0px 1px 6px 0px #d8d8d880;
+  }
 }
 </style>