添加 image 参数,添加 slot
This commit is contained in:
@@ -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; // 折叠内容样式
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user