uniapp修改用户头像、u-view实现单元格右侧显示用户头像、u-cell-item 的自定义内容、自定义插槽无效

maktoub2024-04-12 13:38

修改头像功能实现方法

在使用Vue3时直接使用uview会报错，用不了
解决方法是使用比较流行的vk-uview-ui
使用其u-cell-group组件,设置右侧插槽

使用的ui插件

vk-uview-ui，vk-uview-ui 是 VK 基于 uview-ui 1.8.3 版本改造而来，其本质依然还是 uview-ui，是 VK 的珍藏版，由 VK 维护。

注意点

使用vk-uview-ui里面提供的u-cell-group，发现自定义u-cell-item 的插槽无效 ，

作者在文档中提供的使用方式如下，应该是写错了

csharp 复制代码

<u-cell-group>
	<u-cell-item  title="夕阳无限好" arrow-direction="down">
		<template v-slot:icon>
			<u-icon size="32" name="search"></u-icon>
		</template>
		<template v-slot:rightIcon>
			<u-switch v-model="checked"></u-switch>
		</template>
	</u-cell-item>
	<u-cell-item icon="setting-fill" title="只是近黄昏"></u-cell-item>
</u-cell-group>

<template v-slot:rightIcon>这里应该是<template v-slot:right-icon>，

而且他提到"自定义右侧图标内容，需设置arrow为false才起作用"

我发现，就算是没有设置arrow为false，也可以显示出来这个插槽，这样就能在显示头像的的同时，显示出右侧箭头了

代码

html 复制代码

<view class="u-m-t-20">
	<u-cell-group>
		<u-cell-item index=0 icon="rmb-circle" title="头像" @click="goTo">
			<template v-slot:right-icon>
			
<!--这里可以改一下src，改成如下，可实现读取vuex的数据-->
<!-- <image class="avatar" :src="userInfo.avator" mode="aspectFill"> -->
				<image class="avatar" src="/static/icon/image-20240409205822053.png" mode="aspectFill">
				</image>			
			</template>
	</u-cell-group>
</view>