perf(card): 扩展 插槽 用法, 新增 title 属性

docs/docs/zh-CN/components/avatar.md

@@ -1,7 +1,7 @@
 ::: demo
 
 <template>
-  <lay-avatar :src="avatar"></lay-avatar>
+  <lay-avatar :href="href"></lay-avatar>
 </template>
 
 <script>
@@ -10,10 +10,10 @@ import { ref } from 'vue'
 export default {
   setup() {
 
-    const avatar = "https://portrait.gitee.com/uploads/avatars/user/2813/8441097_shaynas_1610801433.png"
+    const href = ref("https://portrait.gitee.com/uploads/avatars/user/2813/8441097_shaynas_1610801433.png")
 
     return {
-        avatar
+        href
     }
   }
 }
@@ -24,7 +24,7 @@ export default {
 ::: demo
 
 <template>
-  <lay-avatar :src="avatar" radius></lay-avatar>
+  <lay-avatar :href="avatar" radius></lay-avatar>
 </template>
 
 <script>
@@ -48,10 +48,10 @@ export default {
 ::: demo
 
 <template>
-  <lay-avatar :src="avatar" size="xs"></lay-avatar> 
+  <lay-avatar :href="avatar" size="xs"></lay-avatar> 
-  <lay-avatar :src="avatar" size="sm"></lay-avatar>
+  <lay-avatar :href="avatar" size="sm"></lay-avatar>
-  <lay-avatar :src="avatar"></lay-avatar>
+  <lay-avatar :href="avatar"></lay-avatar>
-  <lay-avatar :src="avatar" size="lg"></lay-avatar>
+  <lay-avatar :href="avatar" size="lg"></lay-avatar>
 </template>
 
 <script>

docs/docs/zh-CN/components/cards.md

@@ -1,6 +1,37 @@
 ::: demo
 
 <template>
+<div class="card-container">
+  <lay-card title="标题">
+      内容
+  </lay-card>
+</div>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+<style>
+.card-container {
+  background: whitesmoke;
+  padding: 20px;
+}
+</style>
+:::
+
+::: demo
+
+<template>
+<div class="card-container">
   <lay-card>
       <template v-slot:header>
       标题
@@ -9,6 +40,7 @@
       内容
       </template>
   </lay-card>
+</div>
 </template>
 
 <script>
@@ -23,16 +55,22 @@ export default {
 }
 </script>
 
+<style>
+.card-container {
+  background: whitesmoke;
+  padding: 20px;
+}
+</style>
 :::
 
 ::: demo
 
 <template>
+<div class="card-container">
   <lay-card>
-      <template v-slot:body>
       内容
-      </template>
   </lay-card>
+</div>
 </template>
 
 <script>
@@ -47,11 +85,24 @@ export default {
 }
 </script>
 
+<style>
+.card-container {
+  background: whitesmoke;
+  padding: 20px;
+}
+</style>
 :::
 
+
 <lay-field title="Card attributes" style="margin-top:40px"/>
 
 |        |      |        |
 | ------ | ---- | ------ |
-| header | 插槽 | `内容` |
+| title | 标题 | -- |
-| body   | 插槽 | `内容` |
+
+<lay-field title="Card slots" style="margin-top:40px"/>
+
+|        |      |        |
+| ------ | ---- | ------ |
+| header | 头部插槽 | -- |
+| body   | 内容插槽 | -- |

docs/docs/zh-CN/components/page.md

@@ -113,9 +113,14 @@ export default {
 | ----------- | ------------ | ------- |
 | limit       | 每页数量     | --      |
 | total       | 总条数       | --      |
-| jump        | 切换回调     | --      |
 | showCount   | 显示总数     | `false` |
 | showPage    | 显示每页     | `false` |
 | showLimit   | 显示每页数量 | `false` |
 | showRefresh | 显示刷新按钮 | `false` |
 | showSkip    | 显示跳转     | `false` |
+
+<lay-field title="Page events" style="margin-top:40px"/>
+
+|             |              |         |
+| ----------- | ------------ | ------- |
+| jump       | 切换回调     | --      |

src/module/avatar/index.vue

@@ -1,6 +1,6 @@
 <template>
   <img
-    :src="src"
+    :src="href"
     class="layui-avatar"
     :class="[
       radius ? 'layui-avatar-radius' : '',
@@ -13,7 +13,7 @@
 import { defineProps } from 'vue'
 
 const props = defineProps<{
-  src?: string
+  href?: String
   radius?: boolean
   size?: string
 }>()

src/module/card/index.vue

@@ -1,12 +1,23 @@
 <template>
   <div class="layui-card">
-    <div class="layui-card-header">
+    <div class="layui-card-header" v-if="slot.header || title">
-      <slot name="header" />
+      <slot name="header" v-if="slot.header" />
+      <span v-else>{{ title }}</span>
     </div>
     <div class="layui-card-body">
-      <slot name="body" />
+      <slot name="body" v-if="slot.body" />
+      <slot v-else></slot>
     </div>
   </div>
 </template>
 
-<script setup name="LayCard" lang="ts"></script>
+<script setup name="LayCard" lang="ts">
+import { useSlots } from 'vue'
+
+const slot = useSlots()
+
+const props =
+  defineProps<{
+    title?: string
+  }>()
+</script>