使用v-for循环的slot相关组件hui-list.vue
<template>
<template v-if="props.options.length">
<hui-list-row :round="props.round">
<hui-list-cell v-for="(item, index) in props.options"
:key="item.title"
:borderColor="props.borderColor"
:borderLeft="props.borderLeft"
:borderRight="props.borderRight"
:iconPrefix="props.iconPrefix"
:leftIconColor="item.leftIcon?.color || props.leftIcon.color"
:leftIconName="item.leftIcon?.name || props.leftIcon.name"
:leftIconSize="item.leftIcon?.size || props.leftIcon.size"
:rightIconColor="item.rightIcon?.color || props.rightIcon.color"
:rightIconName="item.rightIcon?.name || props.rightIcon.name"
:rightIconSize="item.rightIcon?.size || props.rightIcon.size"
:showBorder="props.showBorder && props.options.length - 1 != index "
@click="()=>onClick(item)">
<template v-slot:title>
<slot name="title" :props="item"></slot>
</template>
<template v-slot:explain>
<slot name="explain" :props="item"></slot>
</template>
</hui-list-cell>
</hui-list-row>
</template>
</template>
二次封装后的组件hui-dropdown-list.vue
<template>
<view class="hui-dropdown-list" :style="listStyle">
<view class="hui-dropdown-list-header">
<view>
<slot name="title"></slot>
</view>
<hui-icon :color="props.headerIcon.color" :name="props.headerIcon.name" :prefix="props.iconPrefix"
:size="props.headerIcon.size"></hui-icon>
</view>
<view class="hui-dropdown-list-body">
<hui-list :borderColor="props.borderColor"
:borderLeft="props.borderLeft"
:borderRight="props.borderRight"
:iconPrefix="props.iconPrefix"
:leftIconColor="props.leftIcon.color"
:leftIconName="props.leftIcon.name"
:leftIconSize="props.leftIcon.size"
:options="props.options"
:rightIconColor="props.rightIcon.color"
:rightIconName="props.rightIcon.name"
:rightIconSize="props.rightIcon.size"
:round="props.listRound"
:showBorder="props.showBorder"
@click="onItemClick">
<template v-slot:title="{ props }">
<slot name="cellTitle" :props="props"></slot>
</template>
<template v-slot:explain="{ props }">
<slot name="cellExplain" :props="props"></slot>
</template>
</hui-list>
</view>
</view>
</template>
7***@qq.com (作者)
什么时候可以支持,不止微信小程序,其他小程序也有类似的问题
2024-05-13 16:08