Modal 对话框

概述

模态对话框,在浮层中显示,引导用户进行相关操作。

Modal提供了两种用法,普通组件使用和封装好的简洁实例调用。

代码示例

普通组件使用方法

Modal 对话框 - 图1

基础用法

最简单的使用方法,通过控制属性value来显示 / 隐藏对话框。

可以使用 v-model 实现双向绑定。

默认按键盘ESC键也可以关闭。

  1. <template>
  2. <Button type="primary" @click="modal1 = true">Display dialog box</Button>
  3. <Modal
  4. v-model="modal1"
  5. title="Common Modal dialog box title"
  6. @on-ok="ok"
  7. @on-cancel="cancel">
  8. <p>Content of dialog</p>
  9. <p>Content of dialog</p>
  10. <p>Content of dialog</p>
  11. </Modal>
  12. </template>
  13. <script>
  14. export default {
  15. data () {
  16. return {
  17. modal1: false
  18. }
  19. },
  20. methods: {
  21. ok () {
  22. this.$Message.info('Clicked ok');
  23. },
  24. cancel () {
  25. this.$Message.info('Clicked cancel');
  26. }
  27. }
  28. }
  29. </script>

Modal 对话框 - 图2

自定义样式

Modal 组件提供了灵活的自定义样式 API 和 Slot,可以自由控制整个 Modal 的各个组成部分,比如页头、页脚、关闭按钮。

通过和其它组件的交互,能实现更复杂的功能,满足了大多业务场景。

  1. <template>
  2. <Button @click="modal2 = true">Custom header and footer</Button>
  3. <Modal v-model="modal2" width="360">
  4. <p slot="header" style="color:#f60;text-align:center">
  5. <Icon type="ios-information-circle"></Icon>
  6. <span>Delete confirmation</span>
  7. </p>
  8. <div style="text-align:center">
  9. <p>After this task is deleted, the downstream 10 tasks will not be implemented.</p>
  10. <p>Will you delete it?</p>
  11. </div>
  12. <div slot="footer">
  13. <Button type="error" size="large" long :loading="modal_loading" @click="del">Delete</Button>
  14. </div>
  15. </Modal>
  16. <Button @click="modal3 = true">No title bar</Button>
  17. <Modal v-model="modal3">
  18. <p>Content of dialog</p>
  19. <p>Content of dialog</p>
  20. <p>Content of dialog</p>
  21. </Modal>
  22. <Button @click="modal4 = true">Internationalization</Button>
  23. <Modal
  24. v-model="modal4"
  25. title="Modal Title"
  26. ok-text="OK"
  27. cancel-text="Cancel">
  28. <p>Something...</p>
  29. <p>Something...</p>
  30. <p>Something...</p>
  31. </Modal>
  32. <Button @click="modal5 = true">Set the width</Button>
  33. <Modal
  34. v-model="modal5"
  35. title="Custom width"
  36. width="300">
  37. <p>Customize width, unit px, default 520px.</p>
  38. <p>The width of the dialog box is responsive, and the width becomes <code>auto</code> when the screen size is less than 768px.</p>
  39. </Modal>
  40. </template>
  41. <script>
  42. export default {
  43. data () {
  44. return {
  45. modal2: false,
  46. modal_loading: false,
  47. modal3: false,
  48. modal4: false,
  49. modal5: false
  50. }
  51. },
  52. methods: {
  53. del () {
  54. this.modal_loading = true;
  55. setTimeout(() => {
  56. this.modal_loading = false;
  57. this.modal2 = false;
  58. this.$Message.success('Successfully delete');
  59. }, 2000);
  60. }
  61. }
  62. }
  63. </script>

Modal 对话框 - 图3

异步关闭

Modal添加属性loading后,点击确定按钮对话框不会自动消失,并显示 loading 状态,需要手动关闭对话框,常用于表单提交。

  1. <template>
  2. <Button type="primary" @click="modal6 = true">Display dialog box</Button>
  3. <Modal
  4. v-model="modal6"
  5. title="Title"
  6. :loading="loading"
  7. @on-ok="asyncOK">
  8. <p>After you click ok, the dialog box will close in 2 seconds.</p>
  9. </Modal>
  10. </template>
  11. <script>
  12. export default {
  13. data () {
  14. return {
  15. modal6: false,
  16. loading: true
  17. }
  18. },
  19. methods: {
  20. asyncOK () {
  21. setTimeout(() => {
  22. this.modal6 = false;
  23. }, 2000);
  24. }
  25. }
  26. }
  27. </script>

Modal 对话框 - 图4

禁用关闭

可以禁用关闭和遮罩层关闭。

  1. <template>
  2. <Button @click="modal7 = true">Disable upper right corner (including Esc key)</Button>
  3. <Modal
  4. title="Title"
  5. v-model="modal7"
  6. :closable="false">
  7. <p>Content of dialog</p>
  8. <p>Content of dialog</p>
  9. <p>Content of dialog</p>
  10. </Modal>
  11. <Button @click="modal8 = true">Disable mask layer closure</Button>
  12. <Modal
  13. title="Title"
  14. v-model="modal8"
  15. :mask-closable="false">
  16. <p>Content of dialog</p>
  17. <p>Content of dialog</p>
  18. <p>Content of dialog</p>
  19. </Modal>
  20. </template>
  21. <script>
  22. export default {
  23. data () {
  24. return {
  25. modal7: false,
  26. modal8: false,
  27. }
  28. }
  29. }
  30. </script>

Modal 对话框 - 图5

自定义位置

可以自定义 Modal 的对话框样式 以及 对话框 Wrap 的 class 名称,从而实现更多自定义的样式,比如垂直居中。

  1. <style lang="less">
  2. .vertical-center-modal{
  3. display: flex;
  4. align-items: center;
  5. justify-content: center;
  6. .ivu-modal{
  7. top: 0;
  8. }
  9. }
  10. </style>
  11. <template>
  12. <Button @click="modal9 = true">20px from the top</Button>
  13. <Modal
  14. title="Title"
  15. v-model="modal9"
  16. :styles="{top: '20px'}">
  17. <p>Content of dialog</p>
  18. <p>Content of dialog</p>
  19. <p>Content of dialog</p>
  20. </Modal>
  21. <Button @click="modal10 = true">Vertical center</Button>
  22. <Modal
  23. title="Title"
  24. v-model="modal10"
  25. class-name="vertical-center-modal">
  26. <p>Content of dialog</p>
  27. <p>Content of dialog</p>
  28. <p>Content of dialog</p>
  29. </Modal>
  30. </template>
  31. <script>
  32. export default {
  33. data () {
  34. return {
  35. modal9: false,
  36. modal10: false,
  37. }
  38. }
  39. }
  40. </script>

Modal 对话框 - 图6

全屏

设置属性 fullscreen 可以全屏显示。

设置属性 footer-hide 可以隐藏底部内容。

  1. <template>
  2. <Button @click="modal11 = true">Open a fullscreen modal</Button>
  3. <Modal v-model="modal11" fullscreen title="Fullscreen Modal">
  4. <div>This is a fullscreen modal</div>
  5. </Modal>
  6. </template>
  7. <script>
  8. export default {
  9. data () {
  10. return {
  11. modal11: false
  12. }
  13. }
  14. }
  15. </script>

Modal 对话框 - 图7

拖拽移动

设置属性 draggable,对话框可以进行拖拽移动。

  1. <template>
  2. <Button @click="modal12 = true">Open the first modal</Button>
  3. <Button @click="modal13 = true">Open the second modal</Button>
  4. <Modal v-model="modal12" draggable scrollable title="Modal 1">
  5. <div>This is the first modal</div>
  6. </Modal>
  7. <Modal v-model="modal13" draggable scrollable title="Modal 2">
  8. <div>This is the second modal</div>
  9. </Modal>
  10. </template>
  11. <script>
  12. export default {
  13. data () {
  14. return {
  15. modal12: false,
  16. modal13: false
  17. }
  18. }
  19. }
  20. </script>

实例化使用方法

除了上述通过标准组件的使用方法,iView 还精心封装了一些实例方法,用来创建一次性的轻量级对话框。

实例以隐式创建 Vue 组件的方式在全局创建一个对话框,并在消失时移除,所以同时只能操作一个对话框。

Modal 对话框 - 图8

基本用法

四种基本的对话框,只提供一个确定按钮。

  1. <template>
  2. <Button @click="instance('info')">Info</Button>
  3. <Button @click="instance('success')">Success</Button>
  4. <Button @click="instance('warning')">Warning</Button>
  5. <Button @click="instance('error')">Error</Button>
  6. </template>
  7. <script>
  8. export default {
  9. methods: {
  10. instance (type) {
  11. const title = 'Title';
  12. const content = '<p>Content of dialog</p><p>Content of dialog</p>';
  13. switch (type) {
  14. case 'info':
  15. this.$Modal.info({
  16. title: title,
  17. content: content
  18. });
  19. break;
  20. case 'success':
  21. this.$Modal.success({
  22. title: title,
  23. content: content
  24. });
  25. break;
  26. case 'warning':
  27. this.$Modal.warning({
  28. title: title,
  29. content: content
  30. });
  31. break;
  32. case 'error':
  33. this.$Modal.error({
  34. title: title,
  35. content: content
  36. });
  37. break;
  38. }
  39. }
  40. }
  41. }
  42. </script>

Modal 对话框 - 图9

确认对话框

快速弹出确认对话框,并且可以自定义按钮文字及异步关闭。

  1. <template>
  2. <Button @click="confirm">Normal</Button>
  3. <Button @click="custom">Custom button text</Button>
  4. <Button @click="async">Asynchronous closing</Button>
  5. </template>
  6. <script>
  7. export default {
  8. methods: {
  9. confirm () {
  10. this.$Modal.confirm({
  11. title: 'Title',
  12. content: '<p>Content of dialog</p><p>Content of dialog</p>',
  13. onOk: () => {
  14. this.$Message.info('Clicked ok');
  15. },
  16. onCancel: () => {
  17. this.$Message.info('Clicked cancel');
  18. }
  19. });
  20. },
  21. custom () {
  22. this.$Modal.confirm({
  23. title: 'Title',
  24. content: '<p>Content of dialog</p><p>Content of dialog</p>',
  25. okText: 'OK',
  26. cancelText: 'Cancel'
  27. });
  28. },
  29. async () {
  30. this.$Modal.confirm({
  31. title: 'Title',
  32. content: '<p>The dialog box will be closed after 2 seconds</p>',
  33. loading: true,
  34. onOk: () => {
  35. setTimeout(() => {
  36. this.$Modal.remove();
  37. this.$Message.info('Asynchronously close the dialog box');
  38. }, 2000);
  39. }
  40. });
  41. }
  42. }
  43. }
  44. </script>

Modal 对话框 - 图10

自定义内容

使用 render 字段可以基于 Render 函数来自定义内容。

使用 render 后,将不再限制类型,content 也将无效。

学习 Render 函数的内容

  1. <template>
  2. <p>
  3. Name: {{ value }}
  4. </p>
  5. <p>
  6. <Button @click="handleRender">Custom content</Button>
  7. </p>
  8. </template>
  9. <script>
  10. export default {
  11. data () {
  12. return {
  13. value: ''
  14. }
  15. },
  16. methods: {
  17. handleRender () {
  18. this.$Modal.confirm({
  19. render: (h) => {
  20. return h('Input', {
  21. props: {
  22. value: this.value,
  23. autofocus: true,
  24. placeholder: 'Please enter your name...'
  25. },
  26. on: {
  27. input: (val) => {
  28. this.value = val;
  29. }
  30. }
  31. })
  32. }
  33. })
  34. }
  35. }
  36. }
  37. </script>

API

Modal props

属性说明类型默认值
value对话框是否显示,可使用 v-model 双向绑定数据。Booleanfalse
title对话框标题,如果使用 slot 自定义了页头,则 title 无效String-
closable是否显示右上角的关闭按钮,关闭后 Esc 按键也将关闭Booleantrue
mask-closable是否允许点击遮罩层关闭Booleantrue
loading点击确定按钮时,确定按钮是否显示 loading 状态,开启则需手动设置value来关闭对话框Booleanfalse
scrollable页面是否可以滚动Booleanfalse
fullscreen是否全屏显示Booleanfalse
draggable是否可以拖拽移动Booleanfalse
mask是否显示遮罩层,开启 draggable 时,强制不显示Booleantrue
ok-text确定按钮文字String确定
cancel-text取消按钮文字String取消
width对话框宽度,对话框的宽度是响应式的,当屏幕尺寸小于 768px 时,宽度会变为自动auto。当其值不大于 100 时以百分比显示,大于 100 时为像素Number | String520
footer-hide不显示底部Booleanfalse
styles设置浮层样式,调整浮层位置等,该属性设置的是.ivu-modal的样式Object-
class-name设置对话框容器.ivu-modal-wrap的类名,可辅助实现垂直居中等自定义效果String-
z-index层级Number1000
transition-names自定义显示动画,第一项是模态框,第二项是背景Array['ease', 'fade']
transfer是否将弹层放置于 body 内Booleantrue

Modal events

事件名说明返回值
on-ok点击确定的回调
on-cancel点击取消的回调
on-visible-change显示状态发生变化时触发true / false

Modal slot

名称说明
header自定义页头
footer自定义页脚内容
close自定义右上角关闭内容
对话框主体内容

Modal instance

通过直接调用以下方法来使用:

  • this.$Modal.info(config)
  • this.$Modal.success(config)
  • this.$Modal.warning(config)
  • this.$Modal.error(config)
  • this.$Modal.confirm(config)
    以上方法隐式地创建及维护Vue组件。参数 config 为对象,具体说明如下:
属性说明类型默认值
title标题String | Element String-
content内容String | Element String-
render自定义内容,使用后不再限制类型, content 也无效。 学习 Render 函数的内容Function-
width宽度,单位 pxNumber | String416
okText确定按钮的文字String确定
cancelText取消按钮的文字,只在Modal.confirm()下有效String取消
loading点击确定按钮时,确定按钮是否显示 loading 状态,开启则需手动调用Modal.remove()来关闭对话框Booleanfalse
scrollable页面是否可以滚动Booleanfalse
closable是否可以按 Esc 键关闭Booleanfalse
onOk点击确定的回调Function-
onCancel点击取消的回调,只在Modal.confirm()下有效Function-

另外提供了全局关闭对话框的方法:

  • this.$Modal.remove()