更新记录

0.3.1（2026-06-24）

• 修复微信小程序端 v-model 绑定无效导致点击无法打开弹窗的问题（推荐使用 :show.sync）
• 新增 value prop，兼容小程序端 v-model 默认的 value / input 绑定
• 恢复胶囊输入框、按钮按压反馈、头像编辑条等完整视觉样式
• 补全小程序 button 默认样式重置（border、::after 等），避免按钮显示异常
• 弹窗层 z-index 提升至 10000，避免被自定义 TabBar 等 fixed 层遮挡
• 底部增加安全区 padding，完善关闭动画

0.3.0（2026-03-12）

• 重写内部实现，统一使用 uni-popup 底部抽屉样式，视觉与交互全面升级
• 保持 show / personal / user / skipCompleteInfo 等 Props 不变，兼容 :show.sync / v-model:show 两种用法
• 新增 show-close 配置项，用于控制右上角关闭按钮的显示
• 示例逻辑改为纯前端 Demo，不再内置真实接口调用，更方便从组件市场独立集成

0.2.0（2025-05-21）

• 新增主题色自定义功能
• 新增遮罩层背景色自定义功能
• 新增遮罩层模糊效果控制功能
• 优化样式绑定方式，提升兼容性

平台兼容性

uni-app(4.86)

其他

login-popup 登录弹窗组件

一个功能完善的登录弹窗组件，支持一键登录、完善个人信息、主题定制等功能。基于 uni-popup 底部抽屉实现，适配微信小程序及多端。

功能特点

• 一键登录 / 完善个人信息（头像、昵称、手机号）
• 主题色、遮罩色、遮罩模糊可配置
• 支持 :show.sync 与 v-model 两种显隐绑定方式
• 内置小程序 button 样式重置，开箱即用
• 弹窗层级高于常见 TabBar（z-index: 10000）

依赖

本组件依赖 uni-popup（uni_modules/uni-popup）。通过 uni_modules 导入时通常已随项目一并存在。

安装

在 DCloud 插件市场找到本插件，点击「使用 HBuilderX 导入插件」即可。

基本用法

微信小程序（Vue 2）推荐写法：请使用 :show.sync，不要直接使用 v-model。
小程序编译会把 v-model 转为 value / input，可能导致弹窗无法打开（0.3.1 起已兼容 value，但仍建议 :show.sync）。

<template>
  <view>
    <button @tap="openLogin">打开登录弹窗</button>

    <login-popup
      :show.sync="showLogin"
      theme-color="#c45c26"
      :enable-mask-blur="true"
      mask-background-color="rgba(0, 0, 0, 0.45)"
      @success="onLoginSuccess"
      @closed="onPopupClosed"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      showLogin: false
    }
  },
  methods: {
    openLogin() {
      this.showLogin = true
    },
    onLoginSuccess(data) {
      // { headImg, nickname, Phone }
      console.log('登录成功', data)
      this.showLogin = false
    },
    onPopupClosed() {
      this.showLogin = false
    }
  }
}
</script>

完善资料模式

<login-popup
  :show.sync="showLogin"
  :personal="true"
  :user="{ headImg, nickname, Phone }"
  theme-color="#c45c26"
  @success="onLoginSuccess"
/>

设置 personal 为 true 时，弹窗直接展示完善信息表单，并可用 user 预填已有资料。

API

Props

Events

主题定制示例

<login-popup
  :show.sync="showLogin"
  theme-color="#FF5733"
  :enable-mask-blur="true"
  mask-background-color="rgba(0, 0, 0, 0.7)"
/>

注意事项

1. 组件示例为纯前端 Demo，一键登录 / 保存逻辑需由业务方自行对接接口
2. 头像、昵称、手机号能力依赖各小程序平台开放接口，请在管理后台配置相应权限
3. 与自定义 TabBar 同屏使用时，组件已内置较高 z-index；若仍被遮挡，请检查页面其他 fixed 层
4. 小程序内触发按钮请使用 @tap，避免 @click 在部分场景无响应

平台兼容性

常见问题

Q: 点击按钮弹窗没有反应？

A: 请确认使用 :show.sync="showLogin" 绑定显隐，并在打开时执行 this.showLogin = true。若使用 v-model，请升级到 0.3.1+；仍推荐 :show.sync。

Q: 按钮样式很丑（绿色边框、多余 padding）？

A: 0.3.1 起组件内已重置小程序 button 默认样式。若自定义外层按钮，需自行添加 border: none 与 &::after { border: none }。

Q: 弹窗被 TabBar 挡住？

A: 0.3.1 起弹窗 z-index 为 10000。请确认 TabBar 未使用更高层级，或升级至最新版本。

Q: 无法获取头像 / 昵称 / 手机号？

A: 请在对应小程序管理后台开启相关接口权限，并在真机环境验证。

更新日志

详见 changelog.md