更新记录

1.0.2(2024-08-27) 下载此版本

[新增] 对标 y-drawer 组件更新逻辑 [新增] default-avatar 参数,用于展示默认头像

1.0.1(2024-08-07) 下载此版本

[修复] 上传处理应该使用异步函数

1.0.0(2024-07-25) 下载此版本

版本发布

查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue
钉钉小程序 快手小程序 飞书小程序 京东小程序
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

方法

方法名 描述
open 打开
close 关闭

Events

事件

事件名 定义 备注
submit (data: {nickname:string, avatar:string}) => { } 提交事件

Slots

插槽

名称 作用
title 标题
desc 描述

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

插件不采集任何数据

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问