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) return
  
  const styleElement = document.createElement('style')
  styleElement.textContent = MESSAGE_STYLES
  document.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>