UserProfile 用户信息展示与授权组件

使用指南

Component({
  data: {},

  handleUserProfileTap(event) {
    const { type, userAvatarUrl, userNickName } = event;
  },

  handleUserProfileReady(event) {
    const { type, userAvatarUrl, userNickName } = event;
  },
});

<view class="container">
  <view>
    展示头像
    <tms-user-profile type="userAvatarUrl" />
  </view>

  <view>
    展示昵称
    <tms-user-profile type="userNickName" />
  </view>

  <view>
    只读模式，不抛出点击事件，也不拉起授权
    <tms-user-profile read-only="{{true}}" type="userNickName" />
  </view>

  <view>
    自定义未授权时的默认头像或昵称
    <tms-user-profile type="userNickName" defaultText="微信用户" />
    <tms-user-profile type="userAvatarUrl" defaultAvatar="https://3gimg.qq.com/pcmap/tx_mycar/icon/avatar.png" />
  </view>

  <view>
    处理点击事件
    <tms-user-profile type="userAvatarUrl" bindtap="handleUserProfileTap" />
  </view>

  <view>
    处理组件加载完成事件
    <tms-user-profile type="userAvatarUrl" bindready="handleUserProfileReady" />
  </view>

  <view>
    用slot自定义组件展示内容
    <tms-user-profile use-slot="{{true}}" type="userAvatarUrl">
      <view>自定义内容</view>
    </tms-user-profile>
  </view>
</view>

属性

参数	说明	类型	可选值	默认值
type	展示的用户信息类型	String	userNickName, userAvatarUrl	userAvatarUrl
defaultText	未授权昵称时的默认昵称	String		微信用户
defaultAvatar	未授权头像时的默认头像	String		https://3gimg.qq.com/pcmap/tx_mycar/icon/avatar.png
readOnly	是否只读模式	Boolean		false
forceUpdate	是否强制更新，为true时即使用户已授权过，点击组件也会拉起授权	Boolean		false
useSlot	是否启用slot自定义组件内容，为true时，组件将展示slot内容。这时可以将组件作为自定义的授权按钮使用	Boolean		false

type 的合法值

参数	说明
userNickName	用户昵称
userAvatarUrl	用户头像

事件

事件名	说明	参数
bind:tap	组件被点击	{ type, userAvatarUrl, userNickName }
bind:ready	组件加载完成	{ type, userAvatarUrl, userNickName }