ActExplainDialog 活动规则弹窗

# ActExplainDialog 活动规则弹窗

# 引入

import PressActExplainDialog from '@tencent/press-plus/press-act-explain-dialog/press-act-explain-dialog';

export default {
  components: {
    PressActExplainDialog,
  }
}

# 代码演示

# 基础用法

<PressActExplainDialog
  :show.sync="show"
  :show-button="true"
  :props-data="propsData"
  @close="closeDialog"
/>

const PROPS_DATA = {
  title: '标题',
  content: Array.from({ length: 10 }).map((_, index) => `${index + 1}. Press UI 是一套支持 uni-app、普通 Vue 项目，同时兼容 Vue2 和 Vue3 的组件库`)
    .join('<br/>'),
  buttonTitle: '确认按钮',
};

export default {
  data() {
    return {
      show: true,
      propsData: PROPS_DATA,
    }
  },
  methods: {
    closeDialog() {
      console.log('关闭弹窗')
      this.show = false;
    }
  }
}

# API

# Props

参数	说明	类型	默认值
show	是否展示	boolean	`false`
show-button	是否显示按钮	boolean	`false`
hide-base-style	是否隐藏基础样式	boolean	`false`
props-data	弹窗文案，包括标题、内容和按钮	Object	-
use-tip-class	是否使用 `tip-comp` 为前缀的类名	boolean	`false`
hide-tip-style	是否隐藏 `@TIP_STYLE_NAME` 关键词编译时加的样式	boolean	`false`

# Events

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

# Inject

参数	说明	类型	默认值
globalHideTipStyle	是否隐藏关键词编译的样式，对应 `hide-tip-style` 属性	boolean	`false`

# 类型说明

type IPropsData = {
  title: string;
  content: string;
  buttonTitle: string;
}

# 自定义样式

外链地址：

样式内容：

横屏

← LoginPCScan ActLaunchDialog →