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>
+  <view
-    <slot />
+    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>

stories/Card.stories.ts

@@ -1,17 +1,28 @@
+/*
+ * @Author: zhaojinfeng 121016171@qq.com
+ * @Date: 2023-07-10 14:39:45
+ * @LastEditors: zhaojinfeng 121016171@qq.com
+ * @LastEditTime: 2023-07-13 16:23:26
+ * @FilePath: \uni\stories\Card.stories.ts
+ * @Description:
+ *
+ */
 import type { Meta, StoryObj } from '@storybook/vue3'
 import ThCard from '../packages/card/index.vue'
 import ThCardTitle from '../packages/card-title/index.vue'
+import ThCardText from '../packages/card-text/index.vue'
+import ThTag from '../packages/tag/index.vue'
 
 const meta = {
   title: '卡片/Card',
   component: ThCard,
   tags: ['autodocs'],
-  render: (args: any) => ({
+  render: args => ({
     components: { ThCard },
     setup() {
       return { args }
     },
-    template: '<div w-full><th-card /></div>',
+    template: '<th-card :no-shadow="args.noShadow" />',
   }),
 } satisfies Meta<typeof ThCard>
 export default meta
@@ -19,13 +30,16 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Title: Story = {
+  args: {
+    noShadow: false,
+  },
   render: (args: any) => ({
     components: { ThCard, ThCardTitle },
     setup() {
       return { args }
     },
     template: `
-    <th-card>
+    <th-card :no-shadow="args.noShadow">
     <th-card-title>
     Title
     </th-card-title>
@@ -33,3 +47,31 @@ export const Title: Story = {
     `,
   }),
 }
+
+export const TitleExtra: Story = {
+  render: args => ({
+    components: { ThCard, ThCardText, ThTag },
+    setup() {
+      return { args }
+    },
+    template: `
+    <th-card>
+    <th-card-text label="Label">
+    Text
+    </th-card-text>
+    <th-card-text label="Label">
+    Text
+    </th-card-text>
+    <th-card-text label="Label">
+    Text
+    </th-card-text>
+    <th-card-text label="Label">
+    Text
+    </th-card-text>
+    <template #extra>
+    <th-tag text="标签" />
+    </template>
+    </th-card>
+    `,
+  }),
+}