Press Next

# MatchProtocalDialog Protocol Dialog

Protocol viewing dialog component for displaying game service agreements, user agreements and other long text content with scrolling support and customizable styling. The component features beautiful custom scrollbars and optimized reading experience for long texts.

# Import

import PressMatchProtocalDialog from 'press-next/press-match-protocal-dialog/press-match-protocal-dialog.vue';

# Usage

# Basic Usage

<template>
  <div class="demo-wrap">
    <PressButton @click="showDialog = true">
      View Protocol
    </PressButton>
    <PressMatchProtocalDialog
      :show="showDialog"
      :content="protocolContent"
      @close="showDialog = false"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import PressButton from 'press-ui/press-button/press-button.vue';
import PressMatchProtocalDialog from 'press-next/press-match-protocal-dialog/press-match-protocal-dialog.vue';

const showDialog = ref(false);
const protocolContent = ref(`Tencent Game License and Service Agreement (hereinafter referred to as "this Agreement") is jointly concluded by you and Tencent Game Service Provider...`);
</script>

# Custom Title and Button Text

<template>
  <PressMatchProtocalDialog
    :show="showDialog"
    title-text="User Service Agreement"
    close-text="I Have Read"
    :content="content"
    @close="handleClose"
  />
</template>

# Custom DialogPlus Z-Index

<template>
  <PressMatchProtocalDialog
    :show="showDialog"
    :z-index="200"
    :is-pop-up-round="false"
    :content="content"
    @close="handleClose"
  />
</template>

# Custom Styling

<template>
  <PressMatchProtocalDialog
    :show="showDialog"
    :content="content"
    custom-class="custom-protocal-dialog"
    @close="handleClose"
  />
</template>

<style>
/* Custom style variables */
.custom-protocal-dialog {
  --mpd-content-text-color: #333333;
  --mpd-close-button-border-color: #1989fa;
  --mpd-scrollbar-thumb-background-color: #1989fa;
}
</style>

# API

# Props

Attribute Description Type Default
show Whether to show dialog boolean false
z-index DialogPlus z-index number 100
content Protocol content text string Tencent Game License Agreement
close-text Close button text string 关闭
title-text Title text string 腾讯游戏许可及服务协议
is-pop-up-round Whether dialog has rounded corners boolean true
custom-class Custom class name string ''

# Events

Event Description Parameters
close Triggered when dialog is closed -

# Methods

Access component instance via ref to call the following methods:

Method Description Parameters Return
onClose Close dialog - -

# Features

# 📜 Long Text Display

  • Support scrolling view for large amounts of text content
  • Automatic line wrapping and text alignment optimization
  • Text display that maintains original formatting

# 🎨 Custom Scrollbar

  • Beautiful custom scrollbar styling
  • Support for hover state changes
  • Mobile-optimized scrolling

# 🔧 Flexible Configuration

  • Support custom title and button text
  • Configurable dialog z-index and rounded corner styles
  • Support dynamic passing of long text content
  • Provide custom class name for personalized styling

# 📱 Cross-Platform Compatibility

  • Support for H5, Mini Program and other multi-platform operation
  • WeChat Mini Program style isolation optimization
  • Responsive scrolling experience
  • Mobile touch scrolling optimization

# Use Cases

  • Game service agreement display
  • User agreement and privacy policy viewing
  • DialogPlus display of long text content
  • Document content that requires scrolling to view

# Style Customization

# CSS Variables

The component provides rich CSS variables for style customization, all using the --mpd- prefix:

/* Spacing System */
--mpd-content-padding: .26rem 0 .46rem 0; /* Content area padding */
--mpd-footer-area-padding: .24rem;         /* Footer area padding */

/* Size System */
--mpd-dialog-container-max-height: 9.4rem;    /* DialogPlus container max height */
--mpd-header-area-height: 1.12rem;            /* Header area height */
--mpd-footer-area-height: 1.2rem;             /* Footer area height */
--mpd-content-area-height: 5.94rem;           /* Content area height */
--mpd-scroll-container-height: 5.76rem;       /* Scroll container height */
--mpd-close-button-width: 6rem;               /* Close button width */
--mpd-close-button-height: .8rem;             /* Close button height */
--mpd-scroll-thumb-width: .04rem;             /* Scrollbar thumb width */
--mpd-scroll-thumb-radius: .02rem;            /* Scrollbar thumb radius */

/* Color System */
--mpd-content-text-color: $color-text-secondary; /* Content text color */
--mpd-close-button-border-color: $color-border-secondary; /* Close button border color */
--mpd-close-button-background-color: transparent; /* Close button background color */
--mpd-close-button-text-color: $color-text-primary; /* Close button text color */
--mpd-scrollbar-track-background-color: $color-surface-secondary; /* Scrollbar track background color */
--mpd-scrollbar-thumb-background-color: $color-border-secondary; /* Scrollbar thumb background color */
--mpd-scrollbar-thumb-hover-background-color: $color-border-primary; /* Scrollbar thumb hover background color */

/* Font System */
--mpd-title-font-size: $font-size-xl;         /* Title font size */
--mpd-content-text-font-size: $font-size-sm;  /* Content text font size */
--mpd-button-font-size: $font-size-lg;        /* Button font size */
--mpd-close-button-font-weight: 600;          /* Close button font weight */
--mpd-content-text-line-height: .36rem;       /* Content text line height */
--mpd-button-font-weight: $font-weight-bold; /* Button font weight */

/* Border Radius System */
--mpd-scrollbar-border-radius: $border-radius-xs; /* Scrollbar border radius */

# Theme Customization Examples

/* Dark Theme */
.dark-theme {
  --mpd-content-text-color: #cccccc;
  --mpd-close-button-text-color: #ffffff;
  --mpd-close-button-border-color: #555555;
  --mpd-scrollbar-track-background-color: #404040;
  --mpd-scrollbar-thumb-background-color: #666666;
  --mpd-scrollbar-thumb-hover-background-color: #888888;
}

/* Compact Layout */
.compact-layout {
  --mpd-dialog-container-max-height: 7rem;
  --mpd-content-area-height: 4.5rem;
  --mpd-scroll-container-height: 4rem;
  --mpd-content-padding: .16rem 0 .08rem 0;
  --mpd-content-text-font-size: .22rem;
}

/* Custom Brand Colors */
.custom-brand {
  --mpd-close-button-border-color: #1989fa;
  --mpd-close-button-text-color: #1989fa;
  --mpd-scrollbar-thumb-background-color: #1989fa;
  --mpd-scrollbar-thumb-hover-background-color: #0570d6;
}

# Development Guide

# Component Structure

press-match-protocal-dialog/
├── press-match-protocal-dialog.vue  # Main component file
├── css/
│   ├── index.scss                   # Main style file
│   └── _var.scss                    # SCSS variables definition
├── demo.vue                         # Demo component
├── demo-data/
│   └── index.ts                     # Demo data
├── README.md                        # Chinese documentation
└── README.en-US.md                  # English documentation

# Style Architecture

The component follows BEM naming conventions with the following main class structure:

.pm-protocal-dialog                  /* Root container */
├── .pm-protocal-dialog__content     /* Content area */
├── .pm-protocal-dialog__scroll-area /* Scroll container */  
├── .pm-protocal-dialog__text        /* Text content */
├── .pm-protocal-dialog__footer      /* Footer area */
└── .pm-protocal-dialog__close-btn   /* Close button */

# Custom Scrollbar

The component features beautiful custom scrollbar styling with the following characteristics:

  • Adaptive Width: Scrollbar width can be adjusted via CSS variables
  • Hover Effects: Scrollbar color changes on mouse hover
  • Mobile Optimization: Uses native scrolling experience on mobile devices
  • Consistent Styling: Maintains consistent appearance across different browsers

# Best Practices

  1. Content Length: Keep protocol content length within reasonable limits to avoid affecting user experience
  2. Style Customization: Use CSS variables for style customization, avoid directly overriding component styles
  3. Responsive Design: Test component performance across different screen sizes to ensure good user experience
  4. Accessibility: Ensure protocol content has good semantic structure and contrast ratios

# Notes

  • Component depends on PressMatchPopUp base popup component and PressButton button component
  • In Mini Program environments, the component enables styleIsolation: 'shared' style isolation mode
  • Text content supports line breaks \n, which will be automatically converted to actual line breaks
  • Scrollbar styles may have compatibility differences in some browsers --mpd-close-button-text-color: #ff6b35; --mpd-close-button-border-color: #ff6b35; --mpd-scrollbar-thumb-background-color: #ff6b35; --mpd-scrollbar-thumb-hover-background-color: #e55a2b; }

### Design System Integration

The component is fully integrated with the design system using semantic variables:

- **Color System**: References `$color-surface-*`, `$color-text-*`, `$color-border-*` semantic variables
- **Font System**: Uses `$font-size-*`, `$font-weight-*` standard font variables  
- **Spacing System**: Follows `$spacing-*` standard spacing specifications
- **Border Radius System**: Adopts `$border-radius-*` unified border radius standards
- **Shadow System**: Uses `$shadow-lg` standard shadow

## Notes

1. When protocol content is long, the component automatically enables scrolling functionality
2. Text content supports line breaks `\n` and pre-formatted text
3. Scrollbar styles may vary across different browsers
4. Recommend setting appropriate line height for long text content to improve reading experience
5. Style variables support runtime dynamic modification for theme switching functionality

← MatchRankItem →