Vue 消息弹窗

最新推荐文章于 2025-07-13 17:26:59 发布

原创最新推荐文章于 2025-07-13 17:26:59 发布 · 5.6k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #html #javascript

学习同时被 3 个专栏收录

27 篇文章

订阅专栏

前端

8 篇文章

订阅专栏

Vue

8 篇文章

订阅专栏

本文详细介绍了iView组件库中各种弹窗组件的使用方法，包括提示消息、通知提醒及对话框的实现代码，为开发者提供了一个全面的iView弹窗组件使用指南。

iView弹窗大整理

前言
提示
提醒
对话框

前言

网上大部分文章毫无用处，最后我还得自己到官网学习整理

提示

在这里插入图片描述

this.$Message.info('This is a info tip');
this.$Message.success('This is a success tip');
this.$Message.warning('This is a warning tip');
this.$Message.error('This is an error tip');

在这里插入图片描述

const msg = this.$Message.loading({
                    content: 'Loading...',
                    duration: 0
                });
                setTimeout(msg, 3000);

提醒

在这里插入图片描述

                this.$Notice.info({
                    title: 'Notification title',
                    desc: 'Here is the notification description. Here is the notification description. '
                });
                this.$Notice.success({
                    title: 'Notification title',
                    desc: 'Here is the notification description. Here is the notification description. '
                });
                this.$Notice.warning({
                    title: 'Notification title',
                    desc: 'Here is the notification description. Here is the notification description. '
                });
                this.$Notice.error({
                    title: 'Notification title',
                    desc: 'Here is the notification description. Here is the notification description. '
                });

对话框

在这里插入图片描述

    <Modal
        v-model="modal6"
        title="Title"
        :loading="loading"
        @on-ok="asyncOK">
        <p>After you click ok, the dialog box will close in 2 seconds.</p>
    </Modal>

              asyncOK () {
                setTimeout(() => {
                    this.modal6 = false;
                }, 2000);
            }