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