Modal 模态弹窗

使用指南

弹出对话框，用于显示重要信息或操作，请求用户进行即时的确认或操作反馈。

模态框组件，可用于实现自定义的蒙层弹窗，也可以用于alert, confirm, prompt等快速交互；

TIP

此组件属于Popup家族组件，查看这篇blogPopup家族, 了解更多

代码演示

查看代码

<template>
  <div class="list">
    <p>组件式调用</p>
    <p>常规</p>
    <h3-button @click="modalCustomTextVisible = true">
      常规1
    </h3-button>
    <br />
    <h3-button @click="modalCustomTextVisible1 = true">
      常规2
    </h3-button>
    <br />
    <h3-button @click="modalCustomTextVisible2 = true">
      常规3
    </h3-button>
    <br />
    <br />

    <p>仅标题描述</p>
    <h3-button @click="modalNoContVisible = true">
      标题描述1
    </h3-button>
    <br />
    <h3-button @click="modalNoContVisible1 = true">
      标题描述2
    </h3-button>

    <p>仅内容描述</p>
    <h3-button @click="modalNoTitleVisible = true">
      仅内容描述
    </h3-button>
    <br />

    <p>三个操作按钮</p>
    <h3-button @click="modalThreeActionsVisible = true">
      三个按钮弹窗
    </h3-button>
    <br />
    <br />

    <p>函数式调用</p>
    <h3-button @click="showModal">
      普通调用
    </h3-button>
    <br />
    <h3-button @click="confirm">
      Confirm
    </h3-button>
    <br />
    <h3-button @click="alert">
      Alert
    </h3-button>
    <br />

    <!-- 常规 -->
    <h3-modal
      v-model="modalCustomTextVisible"
      title="标题描述"
      confirmText="确定"
      :showCancel="false"
    >
      告诉用户当前的状态，提示后续操作的结果
    </h3-modal>
    <br />

    <h3-modal
      v-model="modalCustomTextVisible1"
      title="标题描述"
      confirmText="确定"
      cancelText="取消"
    >
      告诉用户当前的状态，提示后续操作的结果
    </h3-modal>
    <br />

    <h3-modal
      v-model="modalCustomTextVisible2"
      title="标题描述"
      confirmText="主要操作"
      cancelText="次要操作"
    >
      告诉用户当前的状态，提示后续操作的结果
    </h3-modal>
    <br />

    <!-- 仅标题描述 -->
    <h3-modal
      v-model="modalNoContVisible"
      title="标题描述"
      confirmText="确定"
      :showCancel="false"
    />
    <br />
    <h3-modal
      v-model="modalNoContVisible1"
      title="标题描述"
      confirmText="确定"
      cancelText="取消"
    />
    <br />

    <!-- 仅内容描述 -->
    <h3-modal v-model="modalNoTitleVisible">
      告诉用户当前的状态，提示后续操作的结果
    </h3-modal>

    <!-- 三个操作按钮 -->
    <h3-modal v-model="modalThreeActionsVisible" :actions="threeActions" title="标题描述">
      告诉用户当前的状态，提示后续操作的结果
    </h3-modal>
  </div>
</template>

<script>
import H3Button from '@/components/h3-button';
import H3Modal from '@/components/h3-modal';

export default {
  components: {
    H3Button,
    H3Modal,
  },
  data () {
    return {
      modalCustomTextVisible: false,
      modalCustomTextVisible1: false,
      modalCustomTextVisible2: false,

      modalNoContVisible: false,
      modalNoContVisible1: false,

      modalNoTitleVisible: false,

      modalThreeActionsVisible: false,

      customActions: [
        {
          text: '取消',
          btnProps: {
            ghost: true,
          },
          onAction () {
            console.log('点击自定义action，取消按钮');
          },
        },
        {
          text: '删除',
          btnProps: {
            type: 'error',
            ghost: true,
          },
          onAction () {
            console.log('点击自定义action，删除按钮');
          },
        },
      ],
      threeActions: [
        {
          text: '操作一',
          onAction () {
            console.log('点击操作一');
          },
        },
        {
          text: '操作二',
          onAction () {
            console.log('点击操作二');
          },
        },
        {
          text: '操作三',
          onAction () {
            console.log('点击操作三');
          },
        },
      ],
    };
  },
  methods: {
    onConfirmClick () {
      console.log('点击了确定按钮');
    },
    onCancelClick () {
      console.log('点击了取消按钮');
    },
    onClickCustomFooterBtn () {
      this.modalCustomFooterVisible = false;
      console.log('点击了自定义按钮');
    },
    confirm () {
      this.$modal.confirm({
        title: '删除',
        content: '确认要删除你的表单吗？',
        onConfirm () {
          console.log('confirm clicked');
        },
        onCancel () {
          console.log('cancel clicked');
        },
      });
    },
    alert () {
      this.$modal.alert({
        title: '提示',
        content: '恭喜你！操作成功',
        onConfirm () {
          console.log('confirm clicked');
        },
      });
    },
    showModal () {
      this.$modal.show({
        type: 'alert',
        title: '提示',
        content: '恭喜你！操作成功',
        onConfirm () {
          console.log('confirm clicked');
        },
      });
    },
  },
};
</script>
<style lang="less" scoped>
.list {
  background: #fff;
  padding: 0 12px;
  p {
    font-weight: 600;
    font-size: 16px;
    padding: 15px;
  }
}
.demo-custom-header-icon {
  width: 100%;
  text-align: center;
}
.title-icon {
  display: inline-block;
  height: 12.5px;
  .aufont {
    width: 65px;
    font-size: 40px;
    transform: translateY(-32.5px);
    height: 65px;
    line-height: 65px;
    margin-top: -20px;
    text-align: center;
    background-color: rgb(221, 221, 221);
    color: #fff;
    border-radius: 50%;
  }
}
</style>

与thinking-ui 2.0版组件的区别以及迁移

按照新的模态框组件规范修改相关样式

模态弹窗属于强中断的提示模式，适用于不可撤回的操作或重要信息确认的场景，需谨慎使用：

1. 弹窗的信息描述与传达应简明清晰，标题不宜超过1行，二级描不宜多余2行。
2. 操作按钮，一般为1-2个，最多支持3个，3个以上建议使用动作面板，取消按钮始终放在左侧，用户最可能点击的按钮放在右侧。

• 限制了内容两行, 标题一行
• 废弃可自定义弹窗底部的slot footer
• 废弃Props round

API

常规使用

<h3-modal v-model="visible" title="自定义actions弹窗" :actions="customActions">
  自定义Actions，自定义按钮功能
</h3-modal>

Prop

属性	说明	类型	默认值
visible	是否显示，v-model绑定值	boolean	false
maskClosable	点击蒙层是否可触发关闭	boolean	false
maskCls	mask蒙层自定义class	string	无
mask	是否显示透明蒙层，防止触摸穿透	boolean	true
round	是否圆角	boolean	true
wrapCls	wrap弹窗内容区域的自定义class	string	无
getRenderContainer	把组件挂载某个地方,函数请返回节点,字符串默认通过document.querySelector查找	Function=> Node / String	document.body
title	弹窗标题	string|slot	-
content	弹窗内容	string|slot|VNode	-
actions	自定义底部按钮功能	Array	-
confirmText	确认按钮显示文本	string	'确定'
cancelText	取消按钮显示文本	string	'取消'
showCancel	是否显示取消按钮	boolean	true

• actions 子配置项

属性	说明	类型
text	按钮名称	string
btnProps	按钮Props { type: 'primary',ghost: true }	object
onAction	点击按钮后触发	function

Slot

属性	说明	参数
header	弹窗头部插槽	-
default	默认插槽，弹窗内容	-

Event

事件名	说明	参数
toggle	切换显示时触发，v-model绑定事件	value
show	显示时回调	-
hide	关闭时回调	-
confirm	当点击确认按钮时的回调	-
cancel	当点击取消按钮及蒙层回调	-

函数式调用

引用

import Vue from 'vue';
import { H3Modal } from '@lateinos/thinking-ui';
Vue.use(H3Modal);

// 显示
this.$modal.show(options:{});
this.$modal.alert(options:{});
this.$modal.confirm(options:{});

// 隐藏
this.$modal.hide();

方法

方法名	说明	参数
show	显示modal	value: 传入 prop 对象
hide	隐藏modal	-
visible	是否显示	-
alert	内置的alert弹窗	value: 传入 prop 对象
confirm	内置的confirm弹窗	value: 传入 prop 对象