MatchProtocalDialog 协议查看弹窗

# MatchProtocalDialog 协议查看弹窗

协议查看弹窗组件，用于展示游戏服务协议、用户协议等长文本内容，支持滚动查看和自定义样式。组件内置了美观的自定义滚动条，优化了长文本的阅读体验。

# 引入

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

# 代码演示

# 基础用法

<template>
  <div class="demo-wrap">
    <PressButton @click="showDialog = true">
      查看协议
    </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(`《腾讯游戏许可及服务协议》（以下简称"本协议"）由您与腾讯游戏服务提供方共同缔结，本协议具有合同效力，请您务必审慎阅读、充分理解各条款内容，特别是免除或者限制责任的条款...`);
</script>

# 自定义标题和按钮文案

<template>
  <PressMatchProtocalDialog
    :show="showDialog"
    title-text="用户服务协议"
    close-text="我已阅读"
    :content="content"
    @close="handleClose"
  />
</template>

# 自定义弹窗层级

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

# 自定义样式

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

<style>
/* 自定义样式变量 */
.custom-protocal-dialog {
  --mpd-content-text-color: #333333;
  --mpd-close-button-border-color: #1989fa;
  --mpd-scrollbar-thumb-background-color: #1989fa;
}
</style>

# API

# Props

参数	说明	类型	默认值
show	是否显示弹窗	boolean	`false`
z-index	弹窗层级	number	`100`
content	协议内容文本	string	`腾讯游戏许可及服务协议`
close-text	关闭按钮文案	string	`关闭`
title-text	标题文案	string	`腾讯游戏许可及服务协议`
is-pop-up-round	是否圆角弹窗	boolean	`true`
custom-class	自定义类名	string	`''`

# Events

事件名	说明	参数
close	关闭弹窗时触发	-

# 方法

通过 ref 可以获取到组件实例并调用下述方法：

方法名	说明	参数	返回值
onClose	关闭弹窗	-	-

# 功能特性

# 📜 长文本展示

支持大量文本内容的滚动查看
自动换行和文本对齐优化
保持原有格式的文本显示

# 🎨 自定义滚动条

美观的自定义滚动条样式
支持悬停状态变化
适配移动端滚动优化

# 🔧 灵活配置

支持自定义标题和按钮文案
可配置弹窗层级和圆角样式
支持长文本内容的动态传入
提供自定义类名支持个性化样式

# 📱 跨平台兼容

支持 H5、小程序等多端运行
微信小程序样式隔离优化
响应式滚动体验
移动端触摸滚动优化

# 使用场景

游戏服务协议展示
用户协议和隐私政策查看
长文本内容的弹窗展示
需要滚动查看的文档内容

# 样式定制

# CSS 变量

组件提供了丰富的 CSS 变量用于样式定制，所有变量都使用 --mpd- 前缀：

/* 间距系统 */
--mpd-content-padding: .26rem 0 .46rem 0; /* 内容区域内边距 */
--mpd-footer-area-padding: .24rem;         /* 底部区域内边距 */

/* 尺寸系统 */
--mpd-dialog-container-max-height: 9.4rem;    /* 弹窗容器最大高度 */
--mpd-header-area-height: 1.12rem;            /* 头部区域高度 */
--mpd-footer-area-height: 1.2rem;             /* 底部区域高度 */
--mpd-content-area-height: 5.94rem;           /* 内容区域高度 */
--mpd-scroll-container-height: 5.76rem;       /* 滚动容器高度 */
--mpd-close-button-width: 6rem;               /* 关闭按钮宽度 */
--mpd-close-button-height: .8rem;             /* 关闭按钮高度 */
--mpd-scroll-thumb-width: .04rem;             /* 滚动条滑块宽度 */
--mpd-scroll-thumb-radius: .02rem;            /* 滚动条滑块圆角 */

/* 颜色系统 */
--mpd-content-text-color: $color-text-secondary; /* 内容文本颜色 */
--mpd-close-button-border-color: $color-border-secondary; /* 关闭按钮边框颜色 */
--mpd-close-button-background-color: transparent; /* 关闭按钮背景颜色 */
--mpd-close-button-text-color: $color-text-primary; /* 关闭按钮文字颜色 */
--mpd-scrollbar-track-background-color: $color-surface-secondary; /* 滚动条轨道背景颜色 */
--mpd-scrollbar-thumb-background-color: $color-border-secondary; /* 滚动条滑块背景颜色 */
--mpd-scrollbar-thumb-hover-background-color: $color-border-primary; /* 滚动条滑块悬停背景颜色 */

/* 字体系统 */
--mpd-title-font-size: $font-size-xl;         /* 标题字体大小 */
--mpd-content-text-font-size: $font-size-sm;  /* 正文字体大小 */
--mpd-button-font-size: $font-size-lg;        /* 按钮字体大小 */
--mpd-close-button-font-weight: 600;          /* 关闭按钮字重 */
--mpd-content-text-line-height: .36rem;       /* 内容文本行高 */
--mpd-button-font-weight: $font-weight-bold; /* 按钮字重 */

/* 圆角系统 */
--mpd-scrollbar-border-radius: $border-radius-xs; /* 滚动条圆角 */

# 主题定制示例

/* 深色主题 */
.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 {
  --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 {
  --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;
}

# 开发指南

# 组件结构

press-match-protocal-dialog/
├── press-match-protocal-dialog.vue  # 主组件文件
├── css/
│   ├── index.scss                   # 主样式文件
│   └── _var.scss                    # SCSS 变量定义
├── demo.vue                         # 演示组件
├── demo-data/
│   └── index.ts                     # 演示数据
├── README.md                        # 中文文档
└── README.en-US.md                  # 英文文档

# 样式架构

组件采用 BEM 命名规范，主要类名结构：

.pm-protocal-dialog                  /* 根容器 */
├── .pm-protocal-dialog__content     /* 内容区域 */
├── .pm-protocal-dialog__scroll-area /* 滚动容器 */
├── .pm-protocal-dialog__text        /* 文本内容 */
├── .pm-protocal-dialog__footer      /* 底部区域 */
└── .pm-protocal-dialog__close-btn   /* 关闭按钮 */

# 自定义滚动条

组件内置了美观的自定义滚动条样式，支持以下特性：

自适应宽度：滚动条宽度可通过 CSS 变量调整
悬停效果：鼠标悬停时滚动条颜色会发生变化
移动端优化：在移动设备上使用原生滚动体验
样式统一：在不同浏览器中保持一致的外观

# 最佳实践

内容长度：建议协议内容长度控制在合理范围内，过长的内容可能影响用户体验
样式定制：使用 CSS 变量进行样式定制，避免直接覆盖组件样式
响应式设计：在不同屏幕尺寸下测试组件表现，确保良好的用户体验
无障碍访问：确保协议内容具有良好的语义结构和对比度

# 注意事项

组件依赖 PressMatchPopUp 基础弹窗组件和 PressButton 按钮组件
在小程序环境中，组件启用了 styleIsolation: 'shared' 样式隔离模式
文本内容支持换行符 \n，会自动转换为实际换行显示
滚动条样式在某些浏览器中可能存在兼容性差异 --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; }


### 设计系统集成

组件完全集成了设计系统，使用语义化变量：

- **颜色系统**: 引用 `$color-surface-*`、`$color-text-*`、`$color-border-*` 等语义变量
- **字体系统**: 使用 `$font-size-*`、`$font-weight-*` 标准字体变量  
- **间距系统**: 遵循 `$spacing-*` 标准间距规范
- **圆角系统**: 采用 `$border-radius-*` 统一圆角标准
- **阴影系统**: 使用 `$shadow-lg` 标准阴影

## 注意事项

1. 协议内容较长时，组件会自动启用滚动功能
2. 文本内容支持换行符 `\n` 和预格式化文本
3. 滚动条样式在不同浏览器中可能有差异
4. 建议为长文本内容设置合适的行高以提升阅读体验
5. 样式变量支持运行时动态修改，便于实现主题切换功能

← MatchProfileSet MatchRankItem →