我的团队添加

pages/my-index/components/card-input.vue

@@ -1,4 +1,11 @@
 <script setup>
+  import { computed, useSlots } from 'vue'
+
+  const slots = useSlots()
+
+  // 判断默认的插槽是否存在
+  const hasDefaultSlot = computed(() => slots.default !== undefined)
+
   const name = defineModel({
     type: String,
     default: ''
@@ -24,6 +31,11 @@
     placeholder: {
       type: String,
       default: '请输入'
+    },
+    /** 是否使用输入框 */
+    isInput: {
+      type: Boolean,
+      default: true
     }
   })
 
@@ -32,13 +44,19 @@
 
 <template>
   <view class="card-input">
-    <text class="title">{{ props.title }}</text>
-    <input
-      v-model="name"
-      :type="props.type"
-      :placeholder-style="placeholderStyle"
-      :placeholder="props.placeholder"
-    />
+    <view class="input-box">
+      <text class="title">{{ props.title }}</text>
+      <input
+        v-if="props.isInput"
+        v-model="name"
+        :type="props.type"
+        :placeholder-style="placeholderStyle"
+        :placeholder="props.placeholder"
+      />
+    </view>
+    <view v-if="hasDefaultSlot" class="bottom-slot">
+      <slot></slot>
+    </view>
   </view>
 </template>
 
@@ -51,7 +69,15 @@
     border-radius: 16rpx;
     padding: 20rpx 32rpx;
     display: flex;
-    justify-content: space-between;
+    flex-direction: column;
+    .input-box {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+    }
+    .bottom-slot {
+      margin-top: 26rpx;
+    }
     .title {
       font-family: PingFang SC, PingFang SC;
       font-weight: 500;