Login 登录

演示

9:41

代码示例

<re-login class="login-page__content" :model="modelValue" :pageMode="pageModeValue" :checked="agreed" :initialMobile="quickMobile" :maskedMobile="quickMaskedMobile" :showBack="true" :showOtherLogin="true" customStyle="flex:1;" @submit="onSubmit" @send-code="onSendCode" @action="onAction" @protocol="onProtocol" @update:checked="onCheckedChange" />

引入

推荐使用 easycom 模式，配置后无需手动 import 即可直接使用 <re-login />。

模板说明

通过 model 切换 5 套预设模板（1-5，非 1-5 时回退为 2）：

model	名称	说明
1	分段快捷	顶部浅蓝渐变 + 旋转方块；「验证码登录 / 账号登录」分段标签；验证码为白色胶囊按钮
2	一键登录	绿色主题；本机号码一键登录态（号码球 + 掩码手机号），可切换为验证码登录
3	黄青胶囊	左上淡蓝圆 + 右上淡黄圆；双色圆点标题；胶囊描边输入框 + 渐变胶囊按钮
4	文字标签	蓝调；「验证码登录 / 密码登录」文字标签；协议行在按钮上方；底部第三方登录
5	浅色极简	浅灰底；圆角方形 Logo + 欢迎语；下划线输入框；协议在按钮下方；文字标签切换登录

页面形态

pageMode 控制页面形态，支持三种值：

值	说明
`login`	登录态（默认）。验证码登录 / 账号密码登录 / 一键登录
`register`	注册态。所有模板统一为「手机号 → 验证码 → 新密码 → 确认新密码」并登录
`forget`	找回密码。由组件内部在点击「忘记密码」时切换，字段为手机号 / 验证码 / 新密码 / 确认新密码

补充说明：

注册态下提交按钮文案为「注册并登录」。
forget 由组件内部切换，宿主无需传入；如需重置，重新传入 login / register 即可。
仅支持密码登录的模板（1 / 3 / 4 / 5）才展示「忘记密码」与「没有账号？去注册」入口；模板 2（仅一键 / 验证码登录）不展示。

发送验证码与滑动验证

点击「发送验证码 / 获取验证码」时，若开启 captchaBeforeSend（默认开启），会先弹出 re-slide-captcha 滑动验证弹窗，通过后才抛出 send-code 并开始倒计时。

验证图通过 captchaBackgroundImage / captchaPuzzleImage / captchaPuzzleY 配置，默认为仓库内置演示图。
re-slide-captcha 自身不做正误判定，完成滑动即 success。真实项目可在组件内的滑动回调处接入后端校验（失败时调用滑动组件暴露的 handleFail()），或关闭内置验证改为自行控制。
关闭 captchaBeforeSend 后点击发送会直接抛出 send-code。

API

名称	类型	默认值	描述	必传
model	`number`	2	模板编号，1-5 对应五套预设样式	N
pageMode	`string`	"login"	页面形态：login / register	N
title	`string`	""	自定义主标题（非空时覆盖模板默认标题）	N
subTitle	`string`	""	自定义副标题（非空时覆盖模板默认副标题）	N
accountPlaceholder	`string`	""	账号输入框占位符	N
mobilePlaceholder	`string`	""	手机号输入框占位符	N
passwordPlaceholder	`string`	""	密码输入框占位符（登录态）	N
codePlaceholder	`string`	""	验证码输入框占位符	N
newPasswordPlaceholder	`string`	"请输入新密码"	注册 / 找回密码的「新密码」占位符	N
confirmPasswordPlaceholder	`string`	"请确认新密码"	注册 / 找回密码的「确认新密码」占位符	N
loginButtonText	`string`	""	自定义提交按钮文案（非空时覆盖所有形态）	N
forgetTitleText	`string`	"找回密码"	找回密码标题	N
forgetButtonText	`string`	"重置密码"	找回密码提交按钮文案	N
registerLinkText	`string`	"没有账号？去注册"	去注册入口文案	N
forgetLinkText	`string`	"忘记密码"	忘记密码入口文案	N
backToLoginText	`string`	"已有帐号？去登录"	注册 / 找回密码态的返回登录文案	N
showRegisterLink	`boolean`	true	是否显示「没有账号？去注册」	N
showForgetLink	`boolean`	true	是否显示「忘记密码」	N
showOtherLogin	`boolean`	true	是否显示「其他登录方式」（模板 4/5，含 social slot 内容）	N
showBack	`boolean`	true	是否显示左上角返回按钮	N
showPrivacy	`boolean`	true	是否显示协议勾选与协议文本	N
checked	`boolean`	false	协议是否勾选（配合 `update:checked` 双向绑定）	N
privacyText	`string`	"已阅读并同意"	协议前缀文案	N
serviceText	`string`	"《服务条款》"	服务条款链接文案	N
connectorText	`string`	"和"	协议连接词	N
privacyLinkText	`string`	"《隐私权政策》"	隐私政策链接文案	N
initialAccount	`string`	""	账号初始值	N
initialMobile	`string`	""	手机号初始值	N
initialCode	`string`	""	验证码初始值	N
initialPassword	`string`	""	密码初始值	N
maskedMobile	`string`	""	一键登录态展示的掩码手机号（为空时按 `initialMobile` 自动掩码）	N
countryCode	`string`	"+86"	手机号区号	N
codeDuration	`number \| string`	60	发送验证码后的倒计时秒数	N
countdownSeconds	`number \| string`	0	外部注入的初始倒计时秒数（>0 时自动开始倒计时）	N
autoCountdown	`boolean`	true	发送验证码后是否自动开始倒计时	N
captchaBeforeSend	`boolean`	true	发送验证码前是否进行滑动验证	N
captchaBackgroundImage	`string`	"/static/slide-captcha/bg-1.png"	滑动验证背景图	N
captchaPuzzleImage	`string`	"/static/slide-captcha/puzzle-1.png"	滑动验证拼图块	N
captchaPuzzleY	`number`	70	滑动验证拼图块纵向偏移（原始画布坐标，px）	N
captchaTipText	`string`	"拖动滑块，将拼图对齐缺口"	滑动验证提示文案	N
themeColor	`string`	""	主题色（品牌色）：覆盖提交按钮、激活标签、链接、Logo 等主色；为空使用各模板默认色	N
logo	`string`	""	自定义 Logo 图片地址；为空使用模板内置 Logo（模板五）	N
welcomeText	`string`	""	自定义欢迎语（模板五 Logo 下方）；为空使用默认「Hello！欢迎来到Review」	N
customStyle	`string`	""	组件根节点自定义样式	N

名称	参数	描述
submit	detail: UTSJSONObject	点击提交按钮且校验通过时触发
send-code	detail: UTSJSONObject	通过滑动验证后请求发送验证码时触发
action	detail: UTSJSONObject	组件内部交互动作（返回、切换登录方式、去注册、第三方登录等）
protocol	detail: UTSJSONObject	点击《服务条款》/《隐私权政策》时触发
update:checked	value: boolean	协议勾选状态变化时触发，用于 `checked` 双向绑定

submit 载荷

形态	字段
登录 / 注册并登录	`page`、`tab`、`mode`、`account`、`mobile`、`code`、`password`、`rePassword`、`checked`
找回密码（重置）	`page: 'forget'`、`mobile`、`code`、`newPassword`、`confirmPassword`

page 为 login / register / forget；mode 为 code（验证码）/ password（账号密码）。

action 载荷

固定包含 type、page、tab、mode；type == 'social' 时额外包含 name。

type	触发时机
back	点击左上角返回
switch-quick-tab	模板 1 切换到「验证码登录」
switch-account-tab	模板 1 切换到「账号登录」
switch-code-mode	模板 4/5 切换到「验证码登录」
switch-password-mode	模板 4/5 切换到「密码登录」
switch-other-mobile	模板 2 一键登录态点击「其他手机号登录」
go-register	进入注册态
go-login	返回登录态
forget-password	进入找回密码态
cant-receive-code	模板 4 点击「接收不到验证码」
social	点击第三方登录（`name: 'wechat'`）

protocol 载荷

字段	说明
type	`service`（服务条款）/ `privacy`（隐私政策）
page / tab / mode	当前页面形态与表单形态

名称	描述
social	「其他登录方式」图标区（模板 4/5）。提供时渲染自定义图标；不提供时兜底显示内置微信图标。通过 `showOtherLogin` 可整体隐藏

使用 social slot 自定义其他登录方式（模板 4/5）：

<re-login :model="4" :showOtherLogin="true" @action="onAction">
  <template #social>
    <view class="custom-social-item" @click="onSocialClick('wechat')">微信</view>
    <view class="custom-social-item" @click="onSocialClick('apple')">Apple</view>
  </template>
</re-login>

slot 内的自定义图标建议自行设置间距；若不需要「其他登录方式」，设置 :showOtherLogin="false" 即可整体隐藏，也无需书写 slot。

GoodsFilter 商品筛选

商品列表筛选面板，支持价格区间、属性分组与地址入口等电商常见筛选场景。

OrderCancelPanel 订单取消面板

订单取消原因选择面板，支持提示文案、其它原因输入和勾选确认等业务场景。

内容锚点

演示
代码示例
引入
模板说明
页面形态
发送验证码与滑动验证
API