newfront

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Customize configuration

See Configuration Reference.

BarMessage 顶部消息通知组件

一个轻量级的消息通知组件，可在页面顶部显示简短的通知信息。

功能特点

• 支持多种消息类型：成功、错误、警告、信息
• 支持自定义背景颜色
• 支持自定义显示时长
• 支持多种位置：顶部、底部、中间
• 简洁美观的动画效果
• 支持函数式调用

使用方法

基本使用

// 基本调用
this.$barMessage('这是一条消息提示');

// 不同类型
this.$barMessage.success('操作成功');
this.$barMessage.error('操作失败');
this.$barMessage.warning('警告提示');
this.$barMessage.info('信息提示');

配置选项

this.$barMessage({
  message: '这是一条消息提示',
  type: 'success', // 可选: success, error, warning, info
  duration: 3000,  // 显示时长，单位毫秒
  position: 'top', // 可选: top, bottom, center
  color: '#1abc9c' // 自定义背景颜色
});

在组件外部使用

在非Vue组件中使用：

window.$barMessage.success('操作成功');

手动关闭

const msgInstance = this.$barMessage.success('操作成功');
// 手动关闭
msgInstance.close();

关闭所有消息

this.$barMessage.closeAll();

样式定制

组件提供了基本样式，您可以根据需要进行样式覆盖：

/* 例如修改成功消息的颜色 */
.bar-message-content.success {
  background-color: #1abc9c;
}