# vue-message-yanxing

> 这是颜星写的基于vue的消息插件

Latest version **0.1.2** (published 2022-03-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-message-yanxing
pnpm add vue-message-yanxing
yarn add vue-message-yanxing
bun add vue-message-yanxing
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2022-03-21 |
| First published | 2022-03-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 761.4 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | yanxing |

## Links

- npm: https://www.npmjs.com/package/vue-message-yanxing
- npm.io page: https://npm.io/package/vue-message-yanxing

## Dependencies (4)

- [vue](https://npm.io/package/vue.md) ^2.6.11
- [less](https://npm.io/package/less.md) ^3.10.3
- [core-js](https://npm.io/package/core-js.md) ^3.6.5
- [less-loader](https://npm.io/package/less-loader.md) ^5.0.0

## Recent versions

- 0.1.2 (latest) — 2022-03-21
- 0.1.1 — 2022-03-19
- 0.1.0 — 2022-03-19

## README

# m-message

颜星做的基于 Vue 的信息提示插件。


```js
import Vue from 'vue'
import App from './App.vue'
import Message from 'vue-message-yanxing'
import 'vue-message-yanxing/lib/vue-message-yanxing.css'

// will mount `Vue.prototype.$message`
Vue.use(Message) 
// or
// will mount `Vue.prototype.$msg`
// Vue.use(Message, { name: 'msg' }) 

// 在vue实例中使用
const app = new Vue({
  render: h => h(App),
  data () {
    return {
     
    }
  },
  mounted () {
    setTimeout(() => {
      this.$message({
        title: 'Hi !',
        message: 'Welcome to use this plug-in !',
        iconImg: 'https://img1.baidu.com/it/u=2251659035,1886525937&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=1000',
        duration: -1
      })
    }, 2000)
  }
}).$mount('#app')

window.app = app
```

## Message API

+ **Message(options)** 显示信息
+ **Message.info(msg | options)** 普通信息
+ **Message.success(msg | options)** 成功信息
+ **Message.error(msg | options)** 错误信息
+ **Message.warning(msg | options)** 警告信息
+ **Message.loading(msg | options)** 加载信息
+ **Message.closeAll()** 清空所有消息
+ **Message.globals.options[key] = [value]** 全局默认设置，请看 `options`

## options

| 参数      | 说明    | 类型      | 可选值       | 默认值   |
|---------- |-------- |---------- |-------------  |-------- |
| options   | 消息配置对象   | object | —  |    —   |
| options.type   |  消息类型  | string | 'info', 'success', 'error', 'warning', 'loading'  |   info   |
| options.title   |  消息标题  | string | —  |    ''   |
| options.message   |  消息内容  | string | —  |    ''   |
| options.collapsable   |  是否可折叠  | boolean | —  |   true   |
| options.isCollapsed   |  是否折叠消息内容  | boolean | —  |   false   |
| options.width   |  消息块宽度，默认自动宽  | string | —  |  ''  |
| options.showClose   |  显示close按钮  | boolean | false/true |   false   |
| options.className   |  消息块类名  | string | — |  — |
| options.wrapperClassName   |  包裹层类名  | string | — |  — |
| options.supportHTML   |  消息内容是否支持html  | boolean | — | false |
| options.onClose   |  关闭回调   | function | —  |    —   |
| options.duration   |  消息显示时长，单位ms；-1时不会自定关闭  | number | —  |   3000   |
| options.zIndex   |  堆叠顺序   | number | —  |    1010   |
| options.iconImg   | 图片图标url  | string | —  |   —   |
| options.hasMask   | 是否含有遮罩层  | boolean | —  |  false   |
| options.position   | 消息展示位置  | string | 'top-left', 'top-center', 'top-right', 'center', 'bottom-left', 'bottom-center', 'bottom-right' |

---
_Source: https://npm.io/package/vue-message-yanxing · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._