MES-App/node_modules/tnuiv3p-tn-update-user-info-popup

图鸟 UI vue3 uniapp Plugins - 更新用户信息弹框

Tuniao UI vue3官方仓库

该组件一般用于更新用户的头像和昵称信息

组件安装

npm install tnuiv3p-tn-update-user-info-popup

组件位置

import TnUpdateUserInfoPopup from 'tnuiv3p-tn-update-user-info-popup/index.vue'

平台差异说明

App(vue)	H5	微信小程序	支付宝小程序	...
√	√	√	√	适配中

基础使用

• 通过v-model:show来控制弹框的显示和隐藏
• 通过v-model:avatar绑定用户头像
• 通过v-model:nickname绑定用户昵称

通过choose-avatar事件将用户选择的头像上传到服务器，然后将返回的头像地址赋值给v-model:avatar

<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>

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