# @wu-component/wu-message

> > TODO: description

Latest version **2.0.3** (published 2023-12-11) · ISC license · 0 weekly downloads

## Install

```sh
npm install @wu-component/wu-message
pnpm add @wu-component/wu-message
yarn add @wu-component/wu-message
bun add @wu-component/wu-message
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.3 |
| Published | 2023-12-11 |
| First published | 2022-08-28 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >= 10 |
| Dependencies | 2 |
| Unpacked size | 57.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 218 |
| Author | Marvin |
| Maintainers | canyuegongzi |

## Links

- npm: https://www.npmjs.com/package/@wu-component/wu-message
- Repository: https://github.com/wu-component/web-component-plus
- Homepage: https://github.com/wu-component/web-component-plus#readme
- Issues: https://github.com/wu-component/web-component-plus/issues
- npm.io page: https://npm.io/package/@wu-component/wu-message

## Dependencies (2)

- [@wu-component/common](https://npm.io/package/@wu-component/common.md) latest
- [@wu-component/web-core-plus](https://npm.io/package/@wu-component/web-core-plus.md) latest

## Recent versions

- 2.0.3 (latest) — 2023-12-11
- 2.0.0 (next) — 2023-02-26
- 2.0.1 — 2023-02-26
- 1.11.8 — 2023-02-16
- 1.11.7 — 2023-02-16
- 1.11.6 — 2023-02-15
- 1.11.4 — 2023-02-14
- 1.10.6 — 2023-02-13
- 1.10.2 — 2023-02-13
- 1.10.1 — 2023-02-13
- 1.9.24 — 2022-11-13
- 1.9.21 — 2022-11-12
- 1.9.20 — 2022-11-12
- 1.9.17 — 2022-11-12
- 1.9.1 — 2022-11-05
- … 19 more at https://npm.io/package/@wu-component/wu-message/versions

## README

## Message 消息提示

常用于主动操作后的反馈提示。

### 基础用法 && 不同状态

从顶部出现，3 秒后自动消失。

::: demo
```html
<template>
    <div style="display: flex; align-items: center;justify-content: center;width: 100%; margin-top: 8px; margin-bottom: 16px">
        <wu-plus-button size="mini" id="messageButton1">info消息</wu-plus-button>
        <wu-plus-button style="margin-left: 8px" size="mini" id="messageButton2">success消息</wu-plus-button>
        <wu-plus-button style="margin-left: 8px" size="mini" id="messageButton3">warning消息</wu-plus-button>
        <wu-plus-button style="margin-left: 8px" size="mini" id="messageButton4">error消息</wu-plus-button>
    </div>
</template>
<script>
    export default {
       mounted() {
           setTimeout(() => {
               document.querySelector("#messageButton1").addEventListener("click", () => {
                   webUIPlus.Message.setOption({
                       message: "测试消息1",
                       type: "info",
                       duration: 3000
                   })
               })
               document.querySelector("#messageButton2").addEventListener("click", () => {
                   webUIPlus.Message.setOption({
                       message: "测试消息2",
                       type: "success",
                       duration: 4000
                   })
               })
               document.querySelector("#messageButton3").addEventListener("click", () => {
                   webUIPlus.Message.setOption({
                       message: "测试消息3",
                       type: "warning",
                       duration: 5000
                   })
               })
               document.querySelector("#messageButton4").addEventListener("click", () => {
                   webUIPlus.Message.setOption({
                       message: "测试消息4",
                       type: "error",
                       duration: 6000
                   })
               })
           }, 1000)
           
       }
    }
</script>
```
:::

### 可关闭

可以添加关闭按钮。

::: demo
```html
<template>
    <div style="display: flex; align-items: center;justify-content: center;width: 100%; margin-top: 8px; margin-bottom: 16px">
        <wu-plus-button size="mini" id="messageButton5" type="success">success消息</wu-plus-button>
    </div>
</template>
<script>
    export default {
       mounted() {
           setTimeout(() => {
               document.querySelector("#messageButton5").addEventListener("click", () => {
                   webUIPlus.Message.setOption({
                       message: "测试消息1",
                       type: "success",
                       showClose: true,
                       duration: 6000
                   })
               })
           }, 1000)
           
       }
    }
</script>
```
:::

### 文字居中

使用 center 属性让文字水平居中。

::: demo
```html
<template>
    <div style="display: flex; align-items: center;justify-content: center;width: 100%; margin-top: 8px; margin-bottom: 16px">
        <wu-plus-button size="mini" id="messageButton6" type="success">success消息</wu-plus-button>
    </div>
</template>
<script>
    export default {
       mounted() {
           setTimeout(() => {
               document.querySelector("#messageButton6").addEventListener("click", () => {
                   webUIPlus.Message.setOption({
                       message: "测试消息1",
                       type: "success",
                       showClose: false,
                       duration: 3000,
                       center: true
                   })
               })
           }, 1000)
           
       }
    }
</script>
```
:::


### Attributes

<style>
</style>
| 参数      | 说明    | 类型      | 可选值       | 默认值   |
|---------- |-------- |---------- |-------------  |-------- |
| message | 消息文字 | String | --| '' |
| type | 主题 | TypeEnums | success/warning/info/error| 'info' |
| duration | 显示时间, 毫秒。设为 0 则不会自动关闭 | Number | --| 0 |
| showClose | 是否显示关闭按钮 |Boolean | true、false | false |
| center | 文字是否居中 |Boolean | true、false | false |

### Event

| 事件名      | 说明    | 参数     | 
|---------- |-------- |---------- |
| close | 关闭 | (event: CustomEvent) => void |

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