Modal 对话框

模态对话框。

何时使用

需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用 Modal 在当前页面正中打开一个浮层，承载相应的操作。

另外当需要一个简洁的确认框询问用户时，可以使用 Modal.confirm() 等语法糖方法。

代码演示

基本用法
基本用法。

<template>
  <div>
    <f-space wrap>
      <f-button type="primary" @click="visible = true">基本信息</f-button>
      <f-modal v-model:visible="visible" title="基本信息" :footer="false">
        <div>
          <p>
            <span style="color: #666">合同名称：</span>
            <span style="color: #999">总部办公用品采购项目</span>
          </p>
          <p>
            <span style="color: #666">合同名称：</span>
            <span style="color: #999">总部办公用品采购项目</span>
          </p>
          <p>
            <span style="color: #666">合同名称：</span>
            <span style="color: #999">总部办公用品采购项目</span>
          </p>
          <p>
            <span style="color: #666">合同名称：</span>
            <span style="color: #999">总部办公用品采购项目</span>
          </p>
          <p style="margin: 0">
            <span style="color: #666">合同名称：</span>
            <span style="color: #999">总部办公用品采购项目</span>
          </p>
        </div>
      </f-modal>
      <f-button type="primary" @click="visible2 = true">表单信息</f-button>
      <f-modal v-model:visible="visible2" title="基本信息" @ok="handleOk">
        <f-form :model="formState" ref="formRef" layout="vertical">
          <f-form-item
            label="Username"
            name="username"
            :rules="[{ required: true, message: 'Please input your username!' }]"
          >
            <f-input v-model:value="formState.username" />
          </f-form-item>

          <f-form-item
            label="Password"
            name="password"
            :rules="[{ required: true, message: 'Please input your password!' }]"
          >
            <f-input-password v-model:value="formState.password" />
          </f-form-item>
        </f-form>
      </f-modal>
    </f-space>
  </div>
</template>
<script lang="ts">
import { reactive } from 'vue'
import { defineComponent, ref } from 'vue'
export default defineComponent({
  setup() {
    const visible = ref<boolean>(false)

    const showModal = () => {
      visible.value = true
    }

    const visible2 = ref<boolean>(false)
    const formRef = ref()

    const handleOk = (e: MouseEvent) => {
      formRef.value.validate().then(result => {
        visible2.value = false
      })
    }

    const formState = reactive({
      username: '',
      password: '',
      remember: true,
    })
    return {
      visible,
      visible2,
      handleOk,
      formState
    }
  },
})
</script>

信息提示与确认
各种类型的信息提示与确认。

<template>
  <f-space wrap>
    <f-button @click="info">Info</f-button>
    <f-button @click="success">Success</f-button>
    <f-button @click="error">Error</f-button>
    <f-button @click="warning">Warning</f-button>
    <f-button @click="confirm">Confirm</f-button>
  </f-space>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { FModal } from '@fs/smart-design'
export default defineComponent({
  setup() {
    const info = () => {
      console.log('FModal.info :>> ', FModal.info)
      FModal.info({
        title: '提示',
        content: '这是一段提示消息一段提示消息',
        onOk() {
          console.log('ok')
        },
      })
    }
    const success = () => {
      FModal.success({
        title: '提示',
        content: '这是一段提示消息一段提示消息',
      })
    }

    const error = () => {
      FModal.error({
        title: '提示',
        content: '这是一段提示消息一段提示消息',
      })
    }

    const warning = () => {
      FModal.warning({
        title: '提示',
        content: '这是一段提示消息一段提示消息',
      })
    }

    const confirm = () => {
      FModal.confirm({
        title: '确定删除该合同吗？',
        content: '删除后，沧州市办公用品采购项目的所有合同信息将被清空，且无法恢复',
        async onOk() {
          try {
            return await new Promise((resolve, reject) => {
              setTimeout(Math.random() > 0.5 ? resolve : reject, 1000)
            })
          } catch {
            return console.log('Oops errors!')
          }
        },
        onCancel() {
          console.log('Cancel')
        },
        class: 'test',
      })
    }

    return {
      info,
      success,
      error,
      warning,
      confirm,
    }
  },
})
</script>

API

参数	说明	类型	默认值	版本
afterClose	Modal 完全关闭后的回调	function	无
bodyStyle	Modal body 样式	object	{}
cancelButtonProps	cancel 按钮 props	ButtonProps	-
cancelText	取消按钮文字	string| slot	取消
centered	垂直居中展示 Modal	boolean	false
closable	是否显示右上角的关闭按钮	boolean	true
closeIcon	自定义关闭图标	VNode | slot	-
confirmLoading	确定按钮 loading	boolean	无
destroyOnClose	关闭时销毁 Modal 里的子元素	boolean	false
dialogClass	可用于设置浮层的类名	string	-
dialogStyle	可用于设置浮层的样式，调整浮层位置等	object	-
footer	底部内容，当不需要默认底部按钮时，可以设为 :footer="null"	string|slot	确定取消按钮
forceRender	强制渲染 Modal	boolean	false
getContainer	指定 Modal 挂载的 HTML 节点	(instance): HTMLElement	() => document.body
keyboard	是否支持键盘 esc 关闭	boolean	true
mask	是否展示遮罩	boolean	true
maskClosable	点击蒙层是否允许关闭	boolean	true
maskStyle	遮罩样式	object	{}
okButtonProps	ok 按钮 props	ButtonProps	-
okText	确认按钮文字	string|slot	确定
okType	确认按钮类型	string	primary
title	标题	string|slot	无
visible(v-model)	对话框是否可见	boolean	无
width	宽度	string|number	520
wrapClassName	对话框外层容器的类名	string	-
zIndex	设置 Modal 的 z-index	number	1000

事件

事件名称	说明	回调参数
cancel	点击遮罩层或右上角叉或取消按钮的回调	function(e)
ok	点击确定回调	function(e)

注意

<Modal /> 默认关闭后状态不会自动清空, 如果希望每次打开都是新内容，请设置 destroyOnClose。

Modal.method()

包括：

• Modal.info
• Modal.success
• Modal.error
• Modal.warning
• Modal.confirm

以上均为一个函数，参数为 object，具体属性如下：

参数	说明	类型	默认值	版本
appContext	弹窗的上下文，一般用于获取全局注册组件、vuex 等内容	-	-
autoFocusButton	指定自动获得焦点的按钮	null | ok | cancel	ok
cancelButtonProps	cancel 按钮 props	ButtonProps	-
cancelText	取消按钮文字	string	取消
centered	垂直居中展示 Modal	boolean	false
class	容器类名	string	-
closable	是否显示右上角的关闭按钮	boolean	false
content	内容	string |VNode |function(h)	无
icon	自定义图标（1.14.0 新增）	VNode | ()=>VNode	-
keyboard	是否支持键盘 esc 关闭	boolean	true
mask	是否展示遮罩	boolean	true
maskClosable	点击蒙层是否允许关闭	boolean	false
okButtonProps	ok 按钮 props	ButtonProps	-
okText	确认按钮文字	string	确定
okType	确认按钮类型	string	primary
title	标题	string|VNode |function(h)	无
width	宽度	string|number	416
wrapClassName	对话框外层容器的类名	string	-	3.2.3
zIndex	设置 Modal 的 z-index	number	1000
onCancel	取消回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭	function	无
onOk	点击确定回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭	function	无

以上函数调用后，会返回一个引用，可以通过该引用更新和关闭弹窗。

const modal = Modal.info();

modal.update({
  title: '修改的标题',
  content: '修改的内容',
});

modal.destroy();

• Modal.destroyAll

使用 Modal.destroyAll() 可以销毁弹出的确认窗（即上述的 Modal.info、Modal.success、Modal.error、Modal.warning、Modal.confirm）。通常用于路由监听当中，处理路由前进、后退不能销毁确认对话框的问题，而不用各处去使用实例的返回值进行关闭（modal.destroy() 适用于主动关闭，而不是路由这样被动关闭）

const router = new VueRouter({ ... })

// router change
router.beforeEach((to, from, next) => {
  Modal.destroyAll();
})