Modal 模态框

使用指南

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

TIP

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

代码演示

查看代码

<template>
  <div class="list">
    <p>
      组件式调用
    </p>
    <p>
      基础用法
    </p>
    <h3-button @click="modalVisible = true">
      基础弹窗
    </h3-button>
    <br />
    <h3-button @click="modalNoTitleVisible = true">
      无title弹窗
    </h3-button>
    <br />
    <h3-button @click="modalCustomTextVisible = true">
      修改按钮文本的弹窗
    </h3-button>
    <br />
    <h3-button @click="modalNoCancelVisible = true">
      无取消按钮的弹窗
    </h3-button>
    <br />
    <p>
      高级用法
    </p>
    <h3-button @click="modalCustomTitleVisible = true">
      自定义title弹窗
    </h3-button>
    <br />
    <h3-button @click="modalCustomFooterVisible = true">
      自定义footer弹窗
    </h3-button>
    <br />
    <h3-button @click="modalCustomActionsVisible = true">
      自定义actions弹窗
    </h3-button>
    <br />
    <h3-button @click="modalThreeActionsVisible = true">
      超过三个按钮时的弹窗
    </h3-button>
    <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="modalVisible"
      title="警告"
      @confirm="onConfirmClick"
      @cancel="onCancelClick"
    >
      你确定要删除这个数据吗？(可监听confirm事件和cancel事件)
    </h3-modal>
    <br />
    <h3-modal v-model="modalNoTitleVisible">
      返回将放弃你填写的内容？
    </h3-modal>
    <br />
    <h3-modal v-model="modalCustomTextVisible" confirmText="主操作" cancelText="辅助操作">
      说明当前状态、提示用户解决方案 最好不要超过两行
    </h3-modal>
    <br />
    <h3-modal
      v-model="modalNoCancelVisible"
      :showCancel="false"
      title="提示"
      confirmText="开始体验"
    >
      系统已经更新， 这是你没有体验过的船新版本！
    </h3-modal>
    <h3-modal v-model="modalCustomFooterVisible" title="自定义footer弹窗">
      看看这个弹窗，他的页脚竟然不一样诶！！！
      <div slot="footer">
        <h3-button type="warning" @click="onClickCustomFooterBtn">
          自定义按钮
        </h3-button>
      </div>
    </h3-modal>
    <h3-modal v-model="modalCustomTitleVisible" :showCancel="false" confirmText="确定">
      <div slot="header">
        <div class="demo-custom-header-icon">
          <div class="title-icon">
            <div class="aufont icon-base-rocket"></div>
          </div>
          <h3>系统提示</h3>
        </div>
      </div>
      安装完成
    </h3-modal>
    <h3-modal v-model="modalCustomActionsVisible" :actions="customActions" title="自定义actions弹窗">
      自定义Actions，自定义按钮功能
    </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 {
      modalVisible: false,
      modalNoTitleVisible: false,
      modalCustomTextVisible: false,
      modalNoCancelVisible: false,
      modalCustomTitleVisible: false,
      modalCustomFooterVisible: false,
      modalCustomActionsVisible: 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" scoded>
.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>

与h3-mobile-vue组件的区别以及迁移

旧版弹窗同时集成了侧滑弹窗，以及login、prompt等多种业务场景；而新的Modal弹窗组件，专注于 实现纯粹的强交互的弹窗 ；内部的代码实现也完全重写；总的来说，已经是完全不同的两个组件，如果要做迁移，请参考：

1. 已废弃的props：type、popupDirection、propmtType、popupScale、placeHolders、defaultValue、maskTop、maskStyle、shouldPreventScroll、appendToBody;
2. props中的type，之前的type="popup", 如果想实现侧滑弹窗，请使用新的 h3-popup 组件；
3. props中的show更名为visible;
4. 旧版需要设置appendToBody才会在body下创建元素，现在默认就是创建在document.body下，可以通过getRenderContainer来更改父节点；
5. 现在新版Modal, 作为插件可以直接调用到 this.$modal；

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	默认插槽，弹窗内容	-
footer	弹窗底部插槽	-

Event

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

函数式调用

引用

import Vue from 'vue';
import { H3Modal } from '@h3/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 对象