Bläddra i källkod

添加 image 参数,添加 slot

icssoa 6 månader sedan
förälder
incheckning
8e583121e4
1 ändrade filer med 32 tillägg och 11 borttagningar
  1. 32 11
      uni_modules/cool-ui/components/cl-list-item/cl-list-item.uvue

+ 32 - 11
uni_modules/cool-ui/components/cl-list-item/cl-list-item.uvue

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