GpDialog 弹出框

引入

import PressGpDialog from 'press-plus/press-gp-dialog/press-gp-dialog';

// 推荐使用 v2 版本，带动画
import PressGpDialog from 'press-plus/press-gp-dialog/press-gp-dialog-v2';

export default {
  components: {
    PressGpDialog,
  }
}

代码演示

基础用法

先在页面中预埋组件：

<PressGpDialog
  id="press-gp-dialog"
  ref="press-gp-dialog"
/>

然后引入使用：

import PressGpDialogHandler from 'press-plus/press-gp-dialog';


export default {
  methods: {
    onShowDialog(type) {
      PressGpDialogHandler.show({
        title: '一个弹窗',
        cancelText: type === 'one' ? '' : '我再想想',
        confirmText: '立即执行',
        content: '拒绝烂代码，保持简单，保持纯粹，追求高效',
        horizontal: false,
      }).then(() => {
        this.onGTip('confirm');
      })
        .catch(() => {
          this.onGTip('cancel');
        });
    },
  },
}

API

Options

通过函数调用 DialogPlus 时，支持传入以下选项：

参数	说明	类型	默认值
show	是否显示弹窗	boolean	false
title	标题	string	-
content	内容	string	-
htmlContent	html 内容	string	-
confirmText	确认按钮	string	确定
cancelText	取消按钮	string	-
subTip	提示	string	-
closeOnClickOverlay	点击遮罩层时是否关闭弹窗	boolean	false
htmlFilterClick	点击 html 内容时的回调	function	-
horizontal	是否为横版	boolean	false
zIndex	层级	number	100