图鸟 UI vue3 uniapp 插件 - 修改用户信息弹框
该组件一般用于更新用户的头像和昵称信息
仓库地址
组件安装
bash
npm i tnuiv3p-tn-update-user-info-popupnpm i tnuiv3p-tn-update-user-info-popup1
bash
pnpm add tnuiv3p-tn-update-user-info-popuppnpm add tnuiv3p-tn-update-user-info-popup1
bash
yarn i tnuiv3p-tn-update-user-info-popupyarn i tnuiv3p-tn-update-user-info-popup1
组件位置
typescript
import TnUpdateUserInfoPopup from 'tnuiv3p-tn-update-user-info-popup/index.vue'import TnUpdateUserInfoPopup from 'tnuiv3p-tn-update-user-info-popup/index.vue'1
平台差异说明
| App(vue) | H5 | 微信小程序 | 支付宝小程序 | ... |
|---|---|---|---|---|
| √ | √ | √ | √ | 适配中 |
注意
在微信小程序模拟器中无法获取到用户的昵称，需要在真机上测试
注意
头像信息不再有组件内部进行处理，需要用户处理choose-avatar事件，将头像上传到服务器，然后将返回的头像地址赋值给v-model:avatar
基础使用
- 通过
v-model:show来控制弹框的显示和隐藏 - 通过
v-model:avatar绑定用户头像 - 通过
v-model:nickname绑定用户昵称
通过choose-avatar事件将用户选择的头像上传到服务器，然后将返回的头像地址赋值给v-model:avatar
vue
<script setup lang="ts">
import { ref } from 'vue'
const showPopup = ref<boolean>(false)
const nickname = ref<string>('')
const avatar = ref<string>('')
// 头像选择事件
const avatarChooseHandle = (url: string) => {
// 换成自己的上传接口
uni.uploadFile({
url: '服务器地址',
fileType: 'image',
filePath: url,
name: 'file',
success: (res) => {
const data = JSON.parse(res.data)
avatar.value = data.data.url
},
})
}
</script>
<template>
<TnButton @click="() => (showPopup = true)"> 修改用户信息 </TnButton>
<TnUpdateUserInfoPopup
v-model:show="showPopup"
v-model:nickname="nickname"
v-model:avatar="avatar"
@choose-avatar="avatarChooseHandle"
/>
</template><script setup lang="ts">
import { ref } from 'vue'
const showPopup = ref<boolean>(false)
const nickname = ref<string>('')
const avatar = ref<string>('')
// 头像选择事件
const avatarChooseHandle = (url: string) => {
// 换成自己的上传接口
uni.uploadFile({
url: '服务器地址',
fileType: 'image',
filePath: url,
name: 'file',
success: (res) => {
const data = JSON.parse(res.data)
avatar.value = data.data.url
},
})
}
</script>
<template>
<TnButton @click="() => (showPopup = true)"> 修改用户信息 </TnButton>
<TnUpdateUserInfoPopup
v-model:show="showPopup"
v-model:nickname="nickname"
v-model:avatar="avatar"
@choose-avatar="avatarChooseHandle"
/>
</template>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
API
Props
| 属性名 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| show | 控制弹框显示、隐藏 | Boolean | true | false |
| avatar | 用户头像地址 | String | - | - |
| nickname | 用户昵称 | String | - | - |
| title | 弹框标题 | String | 获取您的昵称、头像 | - |
| tips | 弹框提示 | String | 获取用户头像、昵称，主要用于向用户提供具有辨识度的用户体验 | - |
| confirm-text | 弹框确认按钮文案 | String | 保 存 | - |
| confirm-bg-color | 弹框按钮背景颜色，可以使用图鸟内置的背景色、hex、rgb、rgba | String | tn-type-primary | - |
| confirm-text-color | 弹框按钮文字颜色，支持图鸟内置的颜色值、hex、rgb、rgba | String | tn-white | - |
Events
| 事件名 | 说明 | 类型 |
|---|---|---|
| choose-avatar | 头像选择事件 | (url: string) => void |
| confirm | 点击确认按钮事件 | (avatar: string, nickname: string) => void |