feat: 新增 card 组件 shadow 属性

example/docs/zh-CN/components/card.md

@@ -114,6 +114,9 @@ export default {
 
 :::
 
+::: title 使用插槽
+:::
+
 ::: demo
 
 <template>
@@ -153,6 +156,46 @@ export default {
 
 :::
 
+::: title 边框阴影
+:::
+
+::: demo 通过 shadow 属性设置卡片阴影出现的时机。 该属性的值可以是：always、hover或never。
+
+<template>
+<div class="card-container">
+  <lay-card>
+      内容
+  </lay-card>
+    <lay-card shadow="hover">
+      内容
+  </lay-card>
+    <lay-card shadow="never">
+      内容
+  </lay-card>
+</div>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+<style>
+.card-container {
+  background: whitesmoke;
+  padding: 20px;
+}
+</style>
+
+:::
+
 ::: title Card 属性
 :::
 
@@ -169,11 +212,11 @@ export default {
 
 ::: table
 
-| 插槽   | 描述     | 可选值 |
-| ------ | -------- | ------ |
-| default| 默认插槽 | --     |
-| header | 头部插槽 | --     |
-| body   | 内容插槽 | --     |
+| 插槽    | 描述     | 可选值 |
+| ------- | -------- | ------ |
+| default | 默认插槽 | --     |
+| header  | 头部插槽 | --     |
+| body    | 内容插槽 | --     |
 
 :::
 
@@ -181,4 +224,4 @@ export default {
 :::
 
 ::: previousNext card
-:::
+:::

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'