Browse Source

fix: card 组件分隔符显示

王家程 10 months ago
parent
commit
279c0e564e
2 changed files with 10 additions and 3 deletions
  1. 7 3
      src/components/MCard/index.tsx
  2. 3 0
      src/components/MCard/styles.scss

+ 7 - 3
src/components/MCard/index.tsx

@@ -2,7 +2,7 @@
  * @Author: wjc
  * @Author: wjc
  * @Date: 2024-07-12 10:46:19
  * @Date: 2024-07-12 10:46:19
  * @LastEditors: wjc
  * @LastEditors: wjc
- * @LastEditTime: 2024-07-12 15:02:10
+ * @LastEditTime: 2024-07-15 15:54:19
  * @Description:
  * @Description:
  */
  */
 import { Fragment } from 'vue'
 import { Fragment } from 'vue'
@@ -68,7 +68,7 @@ export default defineComponent({
     }
     }
   },
   },
   render() {
   render() {
-    const { spaceClass, rounded, padding, bgColor, spacer } = this
+    const { spaceClass, rounded, padding, bgColor, spacer, direction } = this
     const children = this.$slots.default()
     const children = this.$slots.default()
 
 
     return (
     return (
@@ -80,7 +80,11 @@ export default defineComponent({
           return (
           return (
             <>
             <>
               <view class={['m-card-item']}>{child}</view>
               <view class={['m-card-item']}>{child}</view>
-              {i % 2 === 0 && spacer ? <view class="m-card-spacer"></view> : null}
+              {i !== arr.length - 1 && spacer ? (
+                <view
+                  class={[direction === 'horizontal' ? 'm-card-spacer-horiz' : 'm-card-spacer']}
+                ></view>
+              ) : null}
             </>
             </>
           )
           )
         })}
         })}

+ 3 - 0
src/components/MCard/styles.scss

@@ -7,4 +7,7 @@
   .m-card-spacer {
   .m-card-spacer {
     @apply h-1px w-full bg-border-1 my-4px;
     @apply h-1px w-full bg-border-1 my-4px;
   }
   }
+  .m-card-spacer-horiz {
+    @apply h-20px w-1px bg-border-1 my-4px;
+  }
 }
 }