Kros的博客 Kros的博客
首页
  • CSS
  • 工具
  • Vue
  • js
  • Vue3
  • 算法
  • 折腾笔记
一言
  • 分类
  • 标签
  • 归档
码云

Kros

凡心所向,素履以往,生如逆旅,一苇以航
首页
  • CSS
  • 工具
  • Vue
  • js
  • Vue3
  • 算法
  • 折腾笔记
一言
  • 分类
  • 标签
  • 归档
码云
  • CSS

  • JavaScript

  • 工具

  • Vue

  • antdv踩坑记录

    • table左右fix后内容table和固定table出现错位
    • table同时存在额外展开行和固定列时固定列高度默认只有一行
    • antdv常见的全局提示框、弹框api调用
    • customRender实现行列合并
    • customRender中实现自定义渲染元素
    • antdv树结构table
    • table自定义空数据界面
    • mixin混入column时this指向问题
    • antdv日期组件显示英文
    • js导出页面上table
  • Vue3

  • 前端
  • antdv踩坑记录
kros
2022-03-10

antdv常见的全局提示框、弹框api调用

前端开发中消息提示、对话框等操作反馈使用非常频繁,在antdv也带有这些功能,详见官网

Feedback

使用方式如下:

import {Modal, notification} from 'ant-design-vue'

/* 调用函数 */
Modal.info({
	title: 'info',
	content: 'this is content',
	okText: '确认',
	onOk: () => {}
});

notification.success({
	...
})
1
2
3
4
5
6
7
8
9
10
11
12
13

通常情况下我们不想每次使用都需要引入,如果有类似this.$modal(...)api方式调用就最好了,但我查询完整个官方文档也没有找到api调用方式。但是我意外发现官方vscode插件ant-design-vue-helper 对message组件有全局挂载的$message

message使用 message-error

同理modal、notifaction也应有对应的,输入notifaction和modal也得到相应提示

notifaction modal-success

既然有能全局使用,那么antdv源码中一定有挂载的代码,果然在node_modules/ant-design-vue/lib/index.js找到如下代码

node_modules/ant-design-vue/lib/index.js

最后总结,看文档不如看源码ヽ(ー_ー)ノ

上次更新: 2025/09/05, 8:09:00
table同时存在额外展开行和固定列时固定列高度默认只有一行
customRender实现行列合并

← table同时存在额外展开行和固定列时固定列高度默认只有一行 customRender实现行列合并→

最近更新
01
Find the next perfect square
09-05
02
Regex validate PIN code
09-05
03
Find the odd int
09-05
更多文章>
Theme by Vdoing | Copyright © 2020-2025 kros king
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
icon-heart-o icon-heart icon-infinity icon-pause icon-play link next prev