需求
1、Ant Design of Vue官网的Message有一个duration
API用于设置自动关闭的延时,默认3秒后自动关闭
2、领导的要求是:客户在使用时可能仅仅只需要快速浏览一下操作反馈就可以了,3S关闭延时太长,可能会对客户后续操作有影响,希望提供一个手动关闭功能,让客户在快速浏览反馈信息后可以立马关闭
- 效果如下:
技术栈
- 前端框架:vue2
- 前端UI框架:Ant Design of Vue(v1.7.8)
实现方法
- 返回一个带有关闭图标的 VNode
代码
- 将以下代码封装到
message.js
里
// 实现Message全局提示可手动关闭
import {
message } from 'ant-design-vue';
/*
h: 是content自带的参数,表示createElement
content:文本内容
*/
const createElementVNode = (h, content) => {
// 延用的官方的文本内容及样式
const innerText = h('span', {
style: {
color: '#4a5970', fontSize: '14px' } }, content);
// 自定义关闭图标
const innerIcon = h('a-icon', {
style: {
marginLeft: '10px', color: '#1890ff', cursor: 'pointer' },
attrs: {
type: 'close-circle' },
on: {
click: () => message.destroy() },
});
// 合并到一个VNode节点中
const container = h('span', {
}, [innerText, innerIcon]);
return container;
};
// 由于message有多种状态, 这里需要额外处理
const dtMessage = {
};
// 给dtMessage循环赋值不同类型的message函数
['error', 'success', 'info', 'warning', 'warn'].forEach((type) => {
// 处理message[type](config)参数为对象类型
dtMessage[type] = (content, duration, onClose) => {
if (typeof content === 'object') {
return message[type]({
...content, content: h => createElementVNode(h, content?.content) });
}
return message[type](h => createElementVNode(h, content), duration, onClose);
};
});
export default dtMessage;
// 按需加载antdvue组件的文件(lazy_use.js)
// 引入message.js
import message from '@/core/message.js'
import Vue from 'vue'
// 定义Vue实例的原型属性,使每个Vue实例中都可以用,又不会污染全局作用域
Vue.prototype.$message = message
使用
<template>
<a-button type="primary" @click="onClick">点击弹出message</a-button>
</template>
<script>
export default {
methods: {
onClick() {
this.$message.success('This is a success message');
this.$message.error('This is an error message');
this.$message.warning('This is a warning message');
},
},
};
</script>
<style></style>