添加 image 参数,添加 slot

This commit is contained in:
icssoa
2025-09-07 11:05:43 +08:00
parent 2522a28f59
commit 8e583121e4

View File

@@ -27,18 +27,32 @@
@tap="onTap"
>
<view class="cl-list-item__inner" :class="[pt.inner?.className]">
<cl-icon
:name="icon"
:size="pt.icon?.size ?? 36"
:color="pt.icon?.color"
:pt="{
className: `mr-3 ${pt.icon?.className}`
}"
v-if="icon"
></cl-icon>
<slot name="icon">
<cl-icon
v-if="icon != ''"
:name="icon"
:size="pt.icon?.size ?? 36"
:color="pt.icon?.color"
:pt="{
className: `mr-3 ${pt.icon?.className}`
}"
></cl-icon>
</slot>
<slot name="image">
<cl-image
v-if="image != ''"
:width="pt.image?.width ?? 36"
:height="pt.image?.height ?? 36"
:src="image"
:pt="{
className: `mr-3 rounded-full ${pt.image?.className}`
}"
></cl-image>
</slot>
<cl-text
v-if="label"
v-if="label != ''"
:pt="{
className: parseClass([
'cl-list-item__label whitespace-nowrap overflow-visible',
@@ -69,7 +83,7 @@
:size="36"
:pt="{
className: parseClass([
'!text-surface-400 ml-1 duration-200',
'text-surface-400 ml-1 duration-200',
{
'rotate-90': isCollapse
}
@@ -112,6 +126,7 @@ import {
import { isAppIOS, isDark, isHarmony, parseClass, parsePt } from "@/cool";
import type { Justify, PassThroughProps } from "../../types";
import type { ClIconProps } from "../cl-icon/props";
import type { ClImageProps } from "../cl-image/props";
defineOptions({
name: "cl-list-item"
@@ -129,6 +144,11 @@ const props = defineProps({
type: String,
default: ""
},
// 图标名称
image: {
type: String,
default: ""
},
// 标签文本
label: {
type: String,
@@ -176,6 +196,7 @@ type PassThrough = {
label?: PassThroughProps; // 标签文本样式
content?: PassThroughProps; // 内容区域样式
icon?: ClIconProps; // 图标样式
image?: ClImageProps; // 图片样式
collapse?: PassThroughProps; // 折叠内容样式
};