# MatchBindRolePopup
# Introduction
A popup component for binding role with phone number verification. The component includes user information display, phone number input, verification code input, agreement checkbox, and account switching functionality, with support for external control of button states and form validation logic.
# Import
import PressMatchBindRolePopup from 'press-next/press-match-bind-role-popup/press-match-bind-role-popup.vue';
# Usage
# Basic Usage
<PressMatchBindRolePopup
:show="show"
:user-info="userInfo"
:title="title"
:button-text="buttonText"
:agreement-name="agreementName"
:send-code-disabled="sendCodeDisabled"
:confirm-button-disabled="confirmButtonDisabled"
@close="onClose"
@confirm="onConfirm"
@send-code="onSendCode"
@view-agreement="onViewAgreement"
@switch-account="onSwitchAccount"
@phone-change="onPhoneChange"
@verify-code-change="onVerifyCodeChange"
/>
# API
# Props
| Attribute | Description | Type | Default |
|---|---|---|---|
| show | Whether to show popup | boolean | false |
| z-index | PopupPlus z-index | number | 100 |
| custom-class | Custom class name | string | '' |
| user-info | User role information | RoleInfo | undefined |
| title | PopupPlus title | string | '选择参赛角色' |
| is-pop-up-round | Whether popup has rounded corners | boolean | true |
| button-text | Confirm button text | string | '确定' |
| show-switch-button | Whether to show switch account button | boolean | true |
| agreement-name | Agreement name | string | '' |
| send-code-button-text | Send code button text | string | '发送验证码' |
| send-code-disabled | Whether send code button is disabled | boolean | false |
| confirm-button-disabled | Whether confirm button is disabled | boolean | false |
| phone-value | Phone input value | string | '' |
| verify-code-value | Verify code input value | string | '' |
| agreed-value | Agreement checkbox state | boolean | false |
# RoleInfo Data Structure
| Key | Description | Type | Default |
|---|---|---|---|
| id | Role ID | string | - |
| name | Role nickname | string | - |
| avatar | Role avatar URL | string | - |
| tagList | Role tag list | string[] | [] |
# Events
| Event | Description | Arguments |
|---|---|---|
| close | Emitted when popup is closed | - |
| confirm | Emitted when confirm binding | data: { phone: string, code: string, agreed: boolean } |
| send-code | Emitted when send verification code | phone: string |
| view-agreement | Emitted when view agreement | - |
| switch-account | Emitted when switch account | - |
| phone-change | Emitted when phone input changes | phone: string |
| verify-code-change | Emitted when verify code input changes | code: string |
# Features
# 🔐 Flexible State Control
- Support external control of button disabled states
- Support external control of form input values
- Real-time input change event notifications
- Customizable validation logic
# 👤 Rich User Information Display
- Role avatar and nickname display
- Configurable role tag list
- Account switching functionality support
- Responsive user information layout
# 💡 User Experience Optimization
- Tooltip display when agreement is not checked
- Input field clear functionality
- Button disabled state visual feedback
- Responsive layout adaptation
# 🎨 Highly Customizable
- Support custom title and button text
- Support custom agreement name
- Complete SCSS variable system
- Semantic naming conventions
- Theme color system
# 📱 Cross-Platform Compatibility
- Support for H5, Mini Program and other multi-platform operation
- WeChat Mini Program WXSS compilation optimization
- CSS nested syntax automatic flattening
- Tag selector compatibility adaptation
# Style Variables
The component provides the following SCSS variables for custom styling. Variables follow semantic node naming conventions, grouped by functional areas.
# Variable Naming Convention
Variables use the format $mbrp-{node}-{property}, where:
mbrpis the component prefix (match-bind-role-popup){node}represents the specific DOM node or functional area{property}represents the specific style property
# Spacing System
| Variable | Default | Description |
|---|---|---|
$mbrp-header-area-padding-horizontal | var(--mbrp-header-area-padding-horizontal, .48rem) | Header area horizontal padding |
$mbrp-header-area-margin-bottom | var(--mbrp-header-area-margin-bottom, .48rem) | Header area bottom margin |
$mbrp-user-info-area-padding | var(--mbrp-user-info-area-padding, .4rem) | User info area padding |
$mbrp-user-info-area-padding-vertical | var(--mbrp-user-info-area-padding-vertical, .32rem) | User info area vertical padding |
$mbrp-user-info-area-margin | var(--mbrp-user-info-area-margin, .2rem 0 .48rem) | User info area margin |
$mbrp-avatar-area-margin-right | var(--mbrp-avatar-area-margin-right, .32rem) | Avatar right margin |
$mbrp-user-details-area-min-height | var(--mbrp-user-details-area-min-height, .92rem) | User details min height |
$mbrp-user-details-area-flex | var(--mbrp-user-details-area-flex, 1) | User details flex width |
$mbrp-username-area-margin-bottom | var(--mbrp-username-area-margin-bottom, .16rem) | Username bottom margin |
$mbrp-user-tags-margin-top | var(--mbrp-user-tags-margin-top, .16rem) | User tags container top margin |
$mbrp-user-tags-area-gap | var(--mbrp-user-tags-area-gap, .1rem) | User tags container gap |
$mbrp-user-tag-area-padding | var(--mbrp-user-tag-area-padding, .02rem .1rem) | Single user tag padding |
$mbrp-form-item-area-margin-bottom | var(--mbrp-form-item-area-margin-bottom, .32rem) | Form item bottom margin |
$mbrp-form-item-area-padding-left | var(--mbrp-form-item-area-padding-left, .24rem) | Form item left padding |
$mbrp-phone-input-area-margin-right | var(--mbrp-phone-input-area-margin-right, .24rem) | Phone input right margin |
$mbrp-agreement-area-margin-top | var(--mbrp-agreement-area-margin-top, 1.36rem) | Agreement area top margin |
$mbrp-agreement-area-margin-bottom | var(--mbrp-agreement-area-margin-bottom, .4rem) | Agreement area bottom margin |
$mbrp-agreement-area-gap | var(--mbrp-agreement-area-gap, .16rem) | Agreement area element gap |
$mbrp-agreement-tooltip-area-padding | var(--mbrp-agreement-tooltip-area-padding, 0 .16rem) | Agreement tooltip padding |
$mbrp-footer-area-margin-top | var(--mbrp-footer-area-margin-top, .48rem) | Footer area top margin |
# Size System
| Variable | Default | Description |
|---|---|---|
$mbrp-avatar-area-size | var(--mbrp-avatar-area-size, 1.2rem) | Avatar size |
$mbrp-user-tag-area-height | var(--mbrp-user-tag-area-height, .34rem) | User tag height |
$mbrp-phone-input-area-height | var(--mbrp-phone-input-area-height, .88rem) | Phone input height |
$mbrp-verify-input-area-height | var(--mbrp-verify-input-area-height, .88rem) | Verify code input height |
$mbrp-send-code-btn-area-height | var(--mbrp-send-code-btn-area-height, .88rem) | Send code button height |
$mbrp-send-code-btn-area-min-width | var(--mbrp-send-code-btn-area-min-width, 1.72rem) | Send code button min width |
$mbrp-agreement-checkbox-area-size | var(--mbrp-agreement-checkbox-area-size, .32rem) | Agreement checkbox size |
$mbrp-agreement-checkbox-area-margin-top | var(--mbrp-agreement-checkbox-area-margin-top, .02rem) | Agreement checkbox top margin |
$mbrp-agreement-tooltip-area-height | var(--mbrp-agreement-tooltip-area-height, .38rem) | Agreement tooltip height |
$mbrp-agreement-tooltip-area-margin-bottom | var(--mbrp-agreement-tooltip-area-margin-bottom, 1.12rem) | Agreement tooltip bottom margin |
$mbrp-agreement-tooltip-arrow-area-width | var(--mbrp-agreement-tooltip-arrow-area-width, .16rem) | Agreement tooltip arrow width |
$mbrp-agreement-tooltip-arrow-area-height | var(--mbrp-agreement-tooltip-arrow-area-height, .1rem) | Agreement tooltip arrow height |
$mbrp-confirm-btn-area-height | var(--mbrp-confirm-btn-area-height, .88rem) | Confirm button height |
$mbrp-phone-input-area-width | var(--mbrp-phone-input-area-width, 6.4rem) | Phone input width |
# Color System
| Variable | Default | Description |
|---|---|---|
$mbrp-header-area-primary-color | var(--mbrp-header-area-primary-color, $color-text-brand) | Header area primary color |
$mbrp-header-area-bg-color | var(--mbrp-header-area-bg-color, $color-surface-default) | Header area background color |
$mbrp-header-area-text-color | var(--mbrp-header-area-text-color, $color-text-secondary) | Header area text color |
$mbrp-user-info-area-bg-color | var(--mbrp-user-info-area-bg-color, $color-surface-brand-light) | User info area background color |
$mbrp-username-area-text-color | var(--mbrp-username-area-text-color, $color-text-secondary) | Username text color |
$mbrp-user-tag-area-bg-color | var(--mbrp-user-tag-area-bg-color, $color-surface-brand-light2) | User tag background color |
$mbrp-user-tag-area-text-color | var(--mbrp-user-tag-area-text-color, $color-text-brand) | User tag text color |
$mbrp-form-area-disabled-color | var(--mbrp-form-area-disabled-color, $color-border-tertiary) | Form disabled color |
$mbrp-form-area-disabled-bg-color | var(--mbrp-form-area-disabled-bg-color, $color-surface-secondary) | Form disabled background color |
$mbrp-form-area-disabled-text-color | var(--mbrp-form-area-disabled-text-color, $color-border-tertiary) | Form disabled text color |
$mbrp-form-area-disabled-border-color | var(--mbrp-form-area-disabled-border-color, $color-surface-secondary) | Form disabled border color |
$mbrp-confirm-btn-disabled-bg-color | var(--mbrp-confirm-btn-disabled-bg-color, $color-surface-secondary) | Confirm button disabled background color |
$mbrp-confirm-btn-disabled-text-color | var(--mbrp-confirm-btn-disabled-text-color, $color-text-invert-default) | Confirm button disabled text color |
$mbrp-confirm-btn-disabled-border-color | var(--mbrp-confirm-btn-disabled-border-color, $color-border-tertiary) | Confirm button disabled border color |
$mbrp-agreement-area-text-color | var(--mbrp-agreement-area-text-color, $color-text-secondary) | Agreement text color |
$mbrp-agreement-area-link-color | var(--mbrp-agreement-area-link-color, $color-text-brand) | Agreement link color |
$mbrp-agreement-tooltip-area-bg-color | var(--mbrp-agreement-tooltip-area-bg-color, $color-surface-dark) | Agreement tooltip background color |
$mbrp-agreement-tooltip-area-text-color | var(--mbrp-agreement-tooltip-area-text-color, $color-text-invert-light) | Agreement tooltip text color |
# Font System
| Variable | Default | Description |
|---|---|---|
$mbrp-header-area-text-align | var(--mbrp-header-area-text-align, center) | Header area text alignment |
$mbrp-header-title-area-font-size | var(--mbrp-header-title-area-font-size, .32rem) | Header title font size |
$mbrp-header-title-area-font-weight | var(--mbrp-header-title-area-font-weight, 600) | Header title font weight |
$mbrp-header-title-area-line-height | var(--mbrp-header-title-area-line-height, .32rem) | Header title line height |
$mbrp-header-title-area-margin | var(--mbrp-header-title-area-margin, 0) | Header title margin |
$mbrp-username-area-font-size | var(--mbrp-username-area-font-size, .28rem) | Username font size |
$mbrp-username-area-font-weight | var(--mbrp-username-area-font-weight, 600) | Username font weight |
$mbrp-username-area-line-height | var(--mbrp-username-area-line-height, .42rem) | Username line height |
$mbrp-user-tag-area-font-size | var(--mbrp-user-tag-area-font-size, .2rem) | User tag font size |
$mbrp-user-tag-area-line-height | var(--mbrp-user-tag-area-line-height, .34rem) | User tag line height |
$mbrp-send-code-btn-area-font-size | var(--mbrp-send-code-btn-area-font-size, .24rem) | Send code button font size |
$mbrp-agreement-area-font-size | var(--mbrp-agreement-area-font-size, .24rem) | Agreement text font size |
$mbrp-agreement-area-line-height | var(--mbrp-agreement-area-line-height, .32rem) | Agreement text line height |
$mbrp-agreement-tooltip-area-font-size | var(--mbrp-agreement-tooltip-area-font-size, .2rem) | Agreement tooltip font size |
$mbrp-confirm-btn-area-font-size | var(--mbrp-confirm-btn-area-font-size, .28rem) | Confirm button font size |
# Border Radius System
| Variable | Default | Description |
|---|---|---|
$mbrp-form-area-border-radius-md | var(--mbrp-form-area-border-radius-md, $border-radius-md) | Form component medium border radius |
$mbrp-avatar-area-border-radius-circle | var(--mbrp-avatar-area-border-radius-circle, $border-radius-circle) | Avatar circle border radius |
$mbrp-button-area-border-radius-square | var(--mbrp-button-area-border-radius-square, $border-radius-none) | Button square border radius (no radius) |
$mbrp-user-info-area-border-radius | var(--mbrp-user-info-area-border-radius, $border-radius-md $border-radius-md 0 0) | User info area border radius |
$mbrp-agreement-tooltip-area-border-radius | var(--mbrp-agreement-tooltip-area-border-radius, $border-radius-xs) | Agreement tooltip border radius |
# Border System
| Variable | Default | Description |
|---|---|---|
$mbrp-form-input-area-border | var(--mbrp-form-input-area-border, .01rem solid $color-border-tertiary) | Form input border |
$mbrp-form-input-area-border-width | var(--mbrp-form-input-area-border-width, .01rem) | Form input border width |
$mbrp-send-code-btn-area-border-width | var(--mbrp-send-code-btn-area-border-width, .01rem 0 .01rem .01rem) | Send code button border width |
$mbrp-confirm-btn-border-width | var(--mbrp-confirm-btn-border-width, .01rem) | Confirm button border width |
$mbrp-confirm-btn-disabled-border-width | var(--mbrp-confirm-btn-disabled-border-width, .01rem) | Confirm button disabled border width |
# Other Properties
| Variable | Default | Description |
|---|---|---|
$mbrp-form-field-cell-vertical-padding | var(--mbrp-form-field-cell-vertical-padding, 0) | Form field cell vertical padding |
$mbrp-form-field-cell-horizontal-padding | var(--mbrp-form-field-cell-horizontal-padding, 0) | Form field cell horizontal padding |
$mbrp-form-field-cell-background-color | var(--mbrp-form-field-cell-background-color, transparent) | Form field cell background color |
$mbrp-confirm-btn-area-disabled-opacity | var(--mbrp-confirm-btn-area-disabled-opacity, 1) | Confirm button disabled opacity |
$mbrp-send-code-btn-area-disabled-opacity | var(--mbrp-send-code-btn-area-disabled-opacity, 1) | Send code button disabled opacity |
$mbrp-confirm-btn-disabled-opacity | var(--mbrp-confirm-btn-disabled-opacity, 1) | Confirm button disabled state opacity |
$mbrp-agreement-checkbox-area-unchecked-icon | var(--mbrp-agreement-checkbox-area-unchecked-icon, url(...)) | Agreement checkbox unchecked icon |
$mbrp-agreement-checkbox-area-checked-icon | var(--mbrp-agreement-checkbox-area-checked-icon, url(...)) | Agreement checkbox checked icon |
$mbrp-agreement-checkbox-area-icon-position | var(--mbrp-agreement-checkbox-area-icon-position, center) | Agreement checkbox icon position |
$mbrp-agreement-checkbox-area-icon-size | var(--mbrp-agreement-checkbox-area-icon-size, 100% 100%) | Agreement checkbox icon size |
$mbrp-agreement-tooltip-arrow-area-clip-path | var(--mbrp-agreement-tooltip-arrow-area-clip-path, polygon(0% 0%, 100% 0%, 50% 100%)) | Agreement tooltip inverted triangle shape |
$mbrp-agreement-tooltip-arrow-area-transform | var(--mbrp-agreement-tooltip-arrow-area-transform, translateX(-50%) translateY(100%)) | Agreement tooltip arrow position |
$mbrp-agreement-tooltip-arrow-area-position-left | var(--mbrp-agreement-tooltip-arrow-area-position-left, 50%) | Agreement tooltip arrow left position |
$mbrp-agreement-tooltip-arrow-area-position-bottom | var(--mbrp-agreement-tooltip-arrow-area-position-bottom, .02rem) | Agreement tooltip arrow bottom position |
$mbrp-user-details-area-input-width | var(--mbrp-user-details-area-input-width, 100%) | User details input width |
$mbrp-input-icon-clear-font-family | var(--mbrp-input-icon-clear-font-family, 'press-icon') | Input clear button theme font |
$mbrp-input-icon-clear-font-color | var(--mbrp-input-icon-clear-font-color, #000) | Input clear button color |
$mbrp-input-icon-clear-font-content | var(--mbrp-input-icon-clear-font-content, '\e68b') | Input clear button style |
$mbrp-input-icon-clear-font-size | var(--mbrp-input-icon-clear-font-size, .32rem) | Input clear button size |
$mbrp-input-field-control-font-size | var(--mbrp-input-field-control-font-size, .28rem) | Input field control font size |
$mbrp-input-field-control-text-color | var(--mbrp-input-field-control-text-color, $color-text-primary) | Input field control text color |
$mbrp-input-field-control-font-weight | var(--mbrp-input-field-control-font-weight, normal) | Input field control font weight |
$mbrp-input-field-control-font-family | var(--mbrp-input-field-control-font-family, inherit) | Input field control font family |