新增 avatar-list 头像列表

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

@@ -38,9 +38,7 @@ export default {
 
 <script>
 import { ref } from 'vue'
-
 export default {
-
     setup() {
 
         const src = "https://portrait.gitee.com/uploads/avatars/user/2813/8441097_shaynas_1610801433.png"
@@ -61,8 +59,11 @@ export default {
 
 <template>
   <lay-avatar :src="src" size="xs"></lay-avatar> 
+  &nbsp;&nbsp; 
   <lay-avatar :src="src" size="sm"></lay-avatar>
+  &nbsp;&nbsp;
   <lay-avatar :src="src"></lay-avatar>
+  &nbsp;&nbsp;
   <lay-avatar :src="src" size="lg"></lay-avatar>
 </template>
 
@@ -83,6 +84,38 @@ export default {
 
 :::
 
+::: title 头像列表
+:::
+
+::: demo
+
+<template>
+  <lay-avatar-list>
+    <lay-avatar :src="src" radius></lay-avatar>
+    <lay-avatar :src="src" radius></lay-avatar>
+    <lay-avatar :src="src" radius></lay-avatar>
+    <lay-avatar :src="src" radius></lay-avatar>
+    <lay-avatar :src="src" radius></lay-avatar>
+  </lay-avatar-list>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+    setup() {
+
+        const src = "https://portrait.gitee.com/uploads/avatars/user/2813/8441097_shaynas_1610801433.png"
+
+        return {
+          src
+        }
+  }
+}
+</script>
+
+:::
+
 ::: title 头像属性
 :::
 

example/docs/zh-CN/guide/changelog.md

@@ -11,6 +11,16 @@
 <template>
 <lay-timeline>
   <lay-timeline-item title="0.3.x">
+      <ul> 
+      <a name="0-3-4"> </a> 
+      <li> 
+        <h3>0.3.4 <span class="layui-badge-rim">2022-01-09</span></h3> 
+        <ul> 
+          <li>[新增] avatar-list 头像列表组件。</li>
+          <li>[修复] menu-item 与 sub-menu 组件的 title 属性必填警告。</li>
+        </ul> 
+      </li>
+    </ul>
     <ul> 
       <a name="0-3-3"> </a> 
       <li> 

example/src/assets/css/markdown.css

@@ -110,10 +110,6 @@ form {
   margin: 0;
 }
 
-.source .layui-avatar {
-  margin-right: 30px;
-}
-
 .site-doc-icon {
   margin-bottom: 50px;
   font-size: 0;

example/src/layouts/Layout.vue

@@ -43,7 +43,7 @@
           </a>
         </li>
         <li class="layui-nav-item">
-          <a href="javascript:void(0)"> 0.3.3 </a>
+          <a href="javascript:void(0)"> 0.3.4 </a>
         </li>
       </ul>
     </lay-header>

example/src/view/index.vue

@@ -26,7 +26,7 @@
           >
         </div>
         <div class="site-version">
-          <span>当前版本：v<cite class="site-showv">0.3.3</cite></span>
+          <span>当前版本：v<cite class="site-showv">0.3.4</cite></span>
           <span
             ><router-link
               class="layui-inline site-down"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@layui/layui-vue",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "author": "sleeprite",
   "license": "MIT",
   "description": "a component library for Vue 3 base on layui-vue",

src/index.ts

@@ -9,6 +9,7 @@ import { layer } from "@layui/layer-vue";
 import LayLayer from "./module/layer/index";
 import LayBacktop from "./module/backTop/index";
 import LayAvatar from "./module/avatar/index";
+import LayAvatarList from "./module/avatarList/index";
 import LayRadio from "./module/radio/index";
 import LayButton from "./module/button/index";
 import LayButtonContainer from "./module/buttonContainer/index";
@@ -108,6 +109,7 @@ export const components: Record<string, IDefineComponent> = {
   LayBreadcrumb,
   LayBreadcrumbItem,
   LayAvatar,
+  LayAvatarList,
   LayField,
   LaySelect,
   LayScroll,
@@ -185,6 +187,7 @@ export {
   LayBreadcrumb,
   LayBreadcrumbItem,
   LayAvatar,
+  LayAvatarList,
   LayField,
   LaySelect,
   LayScroll,

src/module/avatar/index.less

@@ -40,3 +40,8 @@
   height: 28px;
   width: 28px;
 }
+
+.layui-avatar-list .layui-avatar {
+  margin-left: -10px;
+  display: inline-block;
+}

src/module/avatarList/index.ts

@@ -0,0 +1,9 @@
+import type { App } from "vue";
+import Component from "./index.vue";
+import type { IDefineComponent } from "../type/index";
+
+Component.install = (app: App) => {
+  app.component(Component.name || "LayAvatarList", Component);
+};
+
+export default Component as IDefineComponent;

src/module/avatarList/index.vue

@@ -0,0 +1,15 @@
+<script lang="ts">
+export default {
+  name: "LayAvatarList",
+};
+</script>
+
+<script setup lang="ts">
+import { defineProps } from "vue";
+</script>
+
+<template>
+  <div class="layui-avatar-list">
+    <slot></slot>
+  </div>
+</template>

src/module/menuItem/index.vue

@@ -11,7 +11,7 @@ const slots = useSlots();
 
 const props = defineProps<{
   id: string;
-  title: string;
+  title?: string;
 }>();
 
 const selectedKey: Ref<string> = inject("selectedKey") as Ref<string>;

src/module/subMenu/index.vue

@@ -11,7 +11,7 @@ const slots = useSlots();
 
 const props = defineProps<{
   id: string;
-  title: string;
+  title?: string;
 }>();
 
 const isTree = inject("isTree");