|
|
@@ -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; // 折叠内容样式
|
|
|
};
|
|
|
|