93 lines
1.7 KiB
Markdown
93 lines
1.7 KiB
Markdown
# 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;
|
||
}
|
||
```
|