更新记录
1.0.2(2024-08-27)
下载此版本
[新增] 对标 y-drawer 组件更新逻辑
[新增] default-avatar 参数,用于展示默认头像
1.0.1(2024-08-07)
下载此版本
[修复] 上传处理应该使用异步函数
1.0.0(2024-07-25)
下载此版本
版本发布
查看更多
平台兼容性
uni-app
app-vue |
app-nvue |
app-android |
app-ios |
? |
? |
? |
? |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
? |
? |
? |
? |
? |
? |
? |
? |
? |
uni-app x
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
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
方法
Events
事件
事件名 |
定义 |
备注 |
submit |
(data: {nickname:string, avatar:string}) => { } |
提交事件 |
Slots
插槽