视图组件

您所在的位置：网站首页 › dialog弹框取消右上角的关闭 › 视图组件

视图组件

2023-11-22 17:01| 来源: 网络整理| 查看: 265

Modal 对话框概述代码示例普通组件使用方法实例化使用方法APIModal propsModal eventsModal slotModal instanceModal 对话框概述

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

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

代码示例

普通组件使用方法

基础用法

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

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

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

Display dialog box

Content of dialog

export default { data () { return { modal1: false } }, methods: { ok () { this.$Message.info('Clicked ok'); }, cancel () { this.$Message.info('Clicked cancel'); } } }

自定义样式

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

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

Custom header and footer Delete confirmation

After this task is deleted, the downstream 10 tasks will not be implemented.

Will you delete it?

Delete No title bar

Content of dialog

Internationalization

Something...

Set the width

Customize width, unit px, default 520px.

The width of the dialog box is responsive, and the width becomes auto when the screen size is less than 768px.

export default { data () { return { modal2: false, modal_loading: false, modal3: false, modal4: false, modal5: false } }, methods: { del () { this.modal_loading = true; setTimeout(() => { this.modal_loading = false; this.modal2 = false; this.$Message.success('Successfully delete'); }, 2000); } } }

异步关闭

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

Display dialog box

After you click ok, the dialog box will close in 2 seconds.

export default { data () { return { modal6: false, loading: true } }, methods: { asyncOK () { setTimeout(() => { this.modal6 = false; }, 2000); } } }

禁用关闭

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

Disable upper right corner (including Esc key)

Content of dialog

Disable mask layer closure

Content of dialog

export default { data () { return { modal7: false, modal8: false, } } }

自定义位置

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

.vertical-center-modal{ display: flex; align-items: center; justify-content: center; .ivu-modal{ top: 0; } } 20px from the top

Content of dialog

Vertical center

Content of dialog

export default { data () { return { modal9: false, modal10: false, } } }

全屏

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

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

Open a fullscreen modal This is a fullscreen modal export default { data () { return { modal11: false } } }

拖拽移动

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

Open the first modal Open the second modal This is the first modal This is the second modal export default { data () { return { modal12: false, modal13: false } } } 实例化使用方法

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

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

基本用法

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

Info Success Warning Error export default { methods: { instance (type) { const title = 'Title'; const content = '

Content of dialog

'; switch (type) { case 'info': this.$Modal.info({ title: title, content: content }); break; case 'success': this.$Modal.success({ title: title, content: content }); break; case 'warning': this.$Modal.warning({ title: title, content: content }); break; case 'error': this.$Modal.error({ title: title, content: content }); break; } } } }

确认对话框

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

Normal Custom button text Asynchronous closing export default { methods: { confirm () { this.$Modal.confirm({ title: 'Title', content: '

Content of dialog

', onOk: () => { this.$Message.info('Clicked ok'); }, onCancel: () => { this.$Message.info('Clicked cancel'); } }); }, custom () { this.$Modal.confirm({ title: 'Title', content: '

Content of dialog

', okText: 'OK', cancelText: 'Cancel' }); }, async () { this.$Modal.confirm({ title: 'Title', content: '

The dialog box will be closed after 2 seconds

', loading: true, onOk: () => { setTimeout(() => { this.$Modal.remove(); this.$Message.info('Asynchronously close the dialog box'); }, 2000); } }); } } }

自定义内容

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

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

学习 Render 函数的内容

Name: {{ value }}

Custom content

export default { data () { return { value: '' } }, methods: { handleRender () { this.$Modal.confirm({ render: (h) => { return h('Input', { props: { value: this.value, autofocus: true, placeholder: 'Please enter your name...' }, on: { input: (val) => { this.value = val; } } }) } }) } } } API

Modal props

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

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

this.$Modal.remove()

【本文地址】

视图组件

视图组件

今日新闻

推荐新闻