From 65031d25072588f05f87f2da547e65a3e03229a3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E5=84=80=E5=BC=8F?= <854085467@qq.com>
Date: Tue, 29 Mar 2022 05:29:05 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=20card=20=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=20shadow=20=E5=B1=9E=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 example/docs/zh-CN/components/card.md | 55 ++++++++++++++++++++++++---
 src/component/button/index.vue        |  7 +++-
 src/component/card/index.less         | 15 ++++++--
 src/component/card/index.vue          | 34 +++++++++--------
 src/component/card/interface.ts       |  1 +
 5 files changed, 86 insertions(+), 26 deletions(-)

diff --git a/example/docs/zh-CN/components/card.md b/example/docs/zh-CN/components/card.md
index f9bf3c5f..5b638cf0 100644
--- a/example/docs/zh-CN/components/card.md
+++ b/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
-:::
\ No newline at end of file
+:::
diff --git a/src/component/button/index.vue b/src/component/button/index.vue
index 67397a66..90a3f786 100644
--- a/src/component/button/index.vue
+++ b/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 {
diff --git a/src/component/card/index.less b/src/component/card/index.less
index ce462938..dcc2c84a 100644
--- a/src/component/card/index.less
+++ b/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);
+}
diff --git a/src/component/card/index.vue b/src/component/card/index.vue
index f32637dd..afcb4700 100644
--- a/src/component/card/index.vue
+++ b/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>
diff --git a/src/component/card/interface.ts b/src/component/card/interface.ts
index e69de29b..0290a818 100644
--- a/src/component/card/interface.ts
+++ b/src/component/card/interface.ts
@@ -0,0 +1 @@
+export type CardShadow = 'always' | 'hover' | 'never'
\ No newline at end of file