vue 弹出消息框

为了体现更好的交互性,免不了会用到消息弹出功能,于是antd vue提供了很多可以使用的消息控件,比如Modal,message,Popover这些控件。下面就我用过的进行总结。

1. Modal.method() 方法:

Modal.warning({
        title: '提示',
        content: '未完成录入,无法进入下一步。',
        okText: '确定',
        centered: true,
      });

首先引入:import { Modal } from 'ant-design-vue';

title:  标题 ;content:要提示的内容消息;okText:按钮;centered:居中,默认false.

另外,method包括:info(),success(),error(),warning(),confirm()

2. message静态方法

message.info({
                content: item.paramSelectRemarks,
                style: {
                  position: 'absolute',
                  top: parseInt(e.target.getBoundingClientRect().top - 60) + 'px',
                  left: parseInt(e.target.getBoundingClientRect().left - 20) + 'px',
                },
              });

引入:import { message } from 'ant-design-vue';

content:内容;

style: 弹出消息的样式,比如居中,比如如上例,显示在控件的正上方且左对齐。

相关推荐

  1. vue 消息

    2024-06-18 11:22:06       9 阅读
  2. vue 组件重复打开时,资源重新加载

    2024-06-18 11:22:06       9 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-06-18 11:22:06       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-06-18 11:22:06       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-06-18 11:22:06       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-06-18 11:22:06       18 阅读

热门阅读

  1. Hadoop Namenode节点迁移

    2024-06-18 11:22:06       7 阅读
  2. 面向对象编程基本概念

    2024-06-18 11:22:06       9 阅读
  3. 543. 二叉树的直径

    2024-06-18 11:22:06       8 阅读
  4. leetcode56 合并区间

    2024-06-18 11:22:06       7 阅读
  5. Android Intent的几种用法全面总结

    2024-06-18 11:22:06       6 阅读
  6. css3多列布局

    2024-06-18 11:22:06       6 阅读
  7. 在 Python 3 中删除字符串文字前面的“b“字符

    2024-06-18 11:22:06       5 阅读
  8. 在无线网中 2.4G、5G、WiFi6、WiFi7 都是什么意思?

    2024-06-18 11:22:06       11 阅读