feat: 新增 card 组件 shadow 属性

src/component/button/index.vue

@@ -7,7 +7,12 @@ export default {
 <script setup lang="ts">
 import "./index.less";
 import { computed } from "vue";
-import { ButtonBorder, ButtonNativeType, ButtonSize, ButtonType} from "./interface";
+import {
+  ButtonBorder,
+  ButtonNativeType,
+  ButtonSize,
+  ButtonType,
+} from "./interface";
 import { BooleanOrString, String } from "src/types";
 
 export interface LayButtonProps {

src/component/card/index.less

@@ -14,7 +14,6 @@
   margin-bottom: 15px;
   border-radius: @card-border-radius;
   background-color: @card-back-color;
-  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
   .layui-card-header {
     height: 42px;
     line-height: 42px;
@@ -22,9 +21,9 @@
     border-bottom: 1px solid #f6f6f6;
     color: @card-fore-color;
     font-size: 14px;
-  }
-  .layui-card-header-extra {
-    float: right;
+    .layui-card-header-extra {
+      float: right;
+    }
   }
   .layui-card-body {
     padding: 10px 15px;
@@ -35,3 +34,11 @@
 .layui-card:last-child {
   margin-bottom: 0;
 }
+
+.layui-card.is-hover-shadow:hover {
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+}
+
+.layui-card.shadow {
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+}

src/component/card/index.vue

@@ -5,20 +5,32 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { useSlots } from "vue";
+import { computed, useSlots } from "vue";
 import "./index.less";
-
-export interface LayCardProps {
-  title?: string;
-}
+import { String } from 'src/types';
+import { CardShadow } from './interface';
 
 const slot = useSlots();
 
-const props = defineProps<LayCardProps>();
+export interface LayCardProps {
+  title?: String;
+  shadow?: CardShadow;
+}
+
+const props = withDefaults(defineProps<LayCardProps>(), {
+  shadow:'always'
+});
+
+const classes = computed(() => {
+  return {
+    'shadow': props.shadow === 'always',
+    'is-hover-shadow': props.shadow === 'hover'
+  }
+})
 </script>
 
 <template>
-  <div class="layui-card">
+  <div class="layui-card" :class="classes">
     <div class="layui-card-header" v-if="slot.title || title || slot.extra">
       <span class="layui-card-header-title">
         <slot name="title" v-if="slot.title"></slot>
@@ -34,11 +46,3 @@ const props = defineProps<LayCardProps>();
     </div>
   </div>
 </template>
-
-<style scoped>
-.layui-card-header-title {
-}
-
-.layui-card-header-extra {
-}
-</style>

src/component/card/interface.ts

@@ -0,0 +1 @@
+export type CardShadow = 'always' | 'hover' | 'never'