天眼官方网站,关键词seo,查看网站百度排名,phpcms 还有人用吗ant design vue 的 Message 用法
全局展示操作反馈信息
何时使用 #
可提供成功、警告和错误等反馈信息。顶部居中显示并自动消失#xff0c;是一种不打断用户操作的轻量级提示方式。
全局配置#xff1a;
// main.ts// 进行全局配置
message.config({top: 0.7rem,//高度…ant design vue 的 Message 用法
全局展示操作反馈信息
何时使用 #
可提供成功、警告和错误等反馈信息。顶部居中显示并自动消失是一种不打断用户操作的轻量级提示方式。
全局配置
// main.ts// 进行全局配置
message.config({top: 0.7rem,//高度位置duration: 2,//提示持续时间maxCount: 1,//最大页面同时展示几条
});
项目中最常用的用法 1、字符串
message.success(导入成功);
2、html片段
message.error({content: h(span,{ style: display: inline-table;text-align: left; },通知内容),});我这边项目传过来的数据可能参杂br所以我封装了个公共方法
// utils.tsimport { h } from vue;
import { message } from ant-design-vue;
// 接口返回html字段根据br进行拆分处理
export function htmlToList(msg: string, type?: string) {const lines msg.split(br);if (type type warning) {message.warning({content: h(span,{ style: display: inline-table;text-align: left; },lines.map((line, index) {return [h(span, null, line),index lines.length - 1 ? h(br) : null,];})),});} else {message.error({content: h(span,{ style: display: inline-table;text-align: left; },lines.map((line, index) {return [h(span, null, line),index lines.length - 1 ? h(br) : null,];})),});}
}因为ant design vue中message并不像element-plus中存在 属性而是 所以需要借助vue3中的h函数 createVNode去创造虚拟dom
