Element-plus的 ElMessage 另一种展示形式

介绍: 这是一个Element-plus版本的，如果是Element的需要改一下类名代码，比较简单

效果图

组件代码(example.js)

import { ElMessage as ELMSG } from 'element-plus'// 样式字符串
const MESSAGE_STYLES = `
.el-message {overflow: hidden;
}
.el-message::before {content: '';position: absolute;width: 100%;height: 2px;background: var(--el-message-text-color);bottom: 0;left: 0;animation: countdown var(--message-duration, 3s) linear forwards;
}@keyframes countdown {from {width: 100%;}to {width: 0;}
}
`// 检查样式是否已注入
let stylesInjected = false// 注入样式到页面
function injectStyles() {if (stylesInjected) returnconst styleElement = document.createElement('style')styleElement.textContent = MESSAGE_STYLESdocument.head.appendChild(styleElement)stylesInjected = true
}export function ElMessage(config = {}) {const { duration = 3000 } = config || {}// 设置CSS变量document.documentElement.style.setProperty('--message-duration', `${duration}ms`)// 注入样式injectStyles()// 掉element-plus的方法ELMSG(config)
}

使用

<template><div>vue组件</div>
</template><script setup>
import { ElMessage } from './utils/message'const testMsg =  (type) => {// 和element-plus传参一样ElMessage({duration: 3000,message: '222222222222222222222',type,})
}
</script>