https://github.com/eightfeet/messagev2

https://github.com/eightfeet/messagev2

Last synced: about 5 hours ago
JSON representation

• Host: GitHub
• URL: https://github.com/eightfeet/messagev2
• Owner: eightfeet
• Created: 2020-11-05T07:58:14.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2022-08-09T07:28:07.000Z (over 2 years ago)
• Last Synced: 2024-04-16T01:08:28.198Z (7 months ago)
• Language: TypeScript
• Size: 158 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Message

弱提示模块，需要promise polyfill

demo

```sh

npm i @eightfeet/message -S

```

```javascript

import Message from '@eightfeet/message';

const myMessage = new Message();

myMessage.create('A message!').then(() => console.log('已经完成弱提示'));

```

#### parame

| 参数          | 说明                           | 是否必填 | 备注                                                         | 类型   |

| ------------- | ------------------------------ | -------- | ------------------------------------------------------------ | ------ |

| id            | 所创建弱提示的id               | 否       | 不传可自动生成id（message + 时间戳 + 100以内的随机数）       | String |

| zIndex        | message的样式层级关系          | 否       | 默认10000                                                    | Number |

| emBase        | em单位的基准像素               | 否       | 默认自动计算（emBase = document.clientWidth/24）             | Number |

| parentId      | 所挂载的父级ID用于做局部弱提示 | 否       | 默认挂在body下面，指定父级dom时将挂载在父级dom下，配合css实现局部弱提示 | String |

| directionFrom | 入场方向                       | 否       | top，bottom。默认top                                         | String |

| style         | 定义弱提示样式                 | 否       | {
    wrap: 外包裹
    main: 弱提示内容
}     | Object |

#### options

1. ##### create: ƒ (content, time, noRemoval) 创建message

   **content** String 提示内容。

   **time** Number 提示保留时间

   **noRemoval** Boolean 关闭弹窗时是否移除message Dom。 false移除，true保留。

2. ##### hide: ƒ (noRemoval) 隐藏弹窗

   **noRemoval** Boolean 关闭弹窗时是否移除弹窗Dom。 false移除，true保留。

3. ##### remove: ƒ () 移除弹窗

   移除，将message从body中移除。

4. ##### show: ƒ (content) 显示弹窗

   显示页面Message，如果创建的Message是隐藏而不是移除时，调用此方法显示Message。

   **content** String 提示内容。

#### case

```javascript

import Modal from '@eightfeet/Message';

const newMessage = new Message({

        directionFrom: 'top', // 底部位置

        style: { 

            wrap: {

                top: 'auto'

            },

            main: {

                backgroundColor: 'red'

            }

        }

    });

    const btn = document.getElementById('exampleBtn');

    btn.onclick = function(){ 

        return newMessage.create('Message', null, true).then(function(){

            document.getElementById('btnShow').onclick = function(){

                return newMessage.show('显示已存在的Message！');

            };

        });

    }

    

```