# 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](https://cli.vuejs.org/config/).

# BarMessage 顶部消息通知组件

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

## 功能特点

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

## 使用方法

### 基本使用

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

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

### 配置选项

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

### 在组件外部使用

在非Vue组件中使用：

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

### 手动关闭

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

### 关闭所有消息

```js
this.$barMessage.closeAll();
```

## 样式定制

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

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