更新记录
1.0.2(2024-08-27) 下载此版本
[新增] 对标 y-drawer 组件更新逻辑 [新增] default-avatar 参数,用于展示默认头像
1.0.1(2024-08-07) 下载此版本
[修复] 上传处理应该使用异步函数
1.0.0(2024-07-25) 下载此版本
版本发布
查看更多平台兼容性
uni-app
| Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
|---|---|---|---|---|---|---|---|---|
| × | √ | √ | √ | √ | - | - | - | - |
| 微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
|---|---|---|---|---|---|---|---|---|---|---|
| √ | √ | √ | √ | √ | √ | - | √ | √ | √ | √ |
y-user-profile
用户资料完善弹出框 Vue3
Example
示例
<template>
<y-user-profile ref="userProfileRef" v-model="userInfo" theme-color="#c12c1f" :handle-upload="handleUploadAvatar" @submit="handleSubmit" />
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const userInfo = ref({ nickname: '', avatar: ''})
const userProfileRef = ref()
setTimeout(() => {
userProfileRef.value.open()
}, 1000);
async function handleUploadAvatar(tmpPath: string) {
// TODO 处理上传逻辑
const url = await apiUpload(tmpPath);
return url;
}
function handleSubmit(data: any) {
// TODO 处理提交逻辑
userProfileRef.value.close() // 关闭
}
</script>
Props
参数
| name | 类型 | 默认值 | 备注 |
|---|---|---|---|
| v-model | object | { nickname: '', avatar: ''} |
|
| domain | string | '' |
域名,头像相对路径时可用来拼接完整地址 |
| height | number | 800 |
抽屉高度 |
| themeColor | string | #456dea |
主题色(按钮颜色) |
| showClose | boolean | true |
显示关闭按钮 |
| maskClosable | boolean | false |
点击遮罩可关闭 |
| handleUpload | callback | (tmpPath: string) => Promise<string> |
处理头像上传,传入临时图像路径,要求返回上传后图像地址 |
| defaultAvatar | string | 无 | 默认头像,支持 import 的图像和完整图片地址(不拼接 domain),不污染 v-model 中的 avatar |
Methods
方法
| 方法名 | 描述 |
|---|---|
| open | 打开 |
| close | 关闭 |
Events
事件
| 事件名 | 定义 | 备注 |
|---|---|---|
| submit | (data: {nickname:string, avatar:string}) => { } |
提交事件 |
Slots
插槽
| 名称 | 作用 |
|---|---|
| title | 标题 |
| desc | 描述 |

收藏人数:
https://github.com/edk24/y-components
下载插件并导入HBuilderX
赞赏(4)
下载 419
赞赏 1
下载 11992726
赞赏 1823
赞赏
京公网安备:11010802035340号