新增 avatar-list 头像列表

This commit is contained in:
就眠儀式 2022-01-09 22:41:56 +08:00
parent 0379494365
commit 25633a6ca7
12 changed files with 83 additions and 12 deletions

View File

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

View File

@ -11,6 +11,16 @@
<template> <template>
<lay-timeline> <lay-timeline>
<lay-timeline-item title="0.3.x"> <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> <ul>
<a name="0-3-3"> </a> <a name="0-3-3"> </a>
<li> <li>

View File

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

View File

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

View File

@ -26,7 +26,7 @@
> >
</div> </div>
<div class="site-version"> <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 <span
><router-link ><router-link
class="layui-inline site-down" class="layui-inline site-down"

View File

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

View File

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

View File

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

View File

@ -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;

View File

@ -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>

View File

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

View File

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