# mlayer

**Repository Path**: dtmuban/mlayer

## Basic Information

- **Project Name**: mlayer
- **Description**: 适用于移动端的，简洁化弹窗组件
- **Primary Language**: JavaScript
- **License**: CC-BY-4.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2024-08-15
- **Last Updated**: 2024-08-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# mlayer

### 介绍
适用于移动端的，简洁化弹窗组件，有H5独立版，和uni-app跨平台插件两个版本。

演示地址 https://luckymoke.gitee.io/mlayer/

### 安装教程
在h5页面中，使用`script`标签引入`mlayer.min.js`文件

### 使用说明

#### alert弹窗

```javascript
mlayer.alert({
	title: '提示',
	content: '提示的内容',
	yes: function(index){
		// index 为此弹窗的ID
		alert('你点击了好的按钮');
		mlayer.close(index);
	}
});
```

|参数名称|必填？|类型|备注|
|---|---|---|----|
|title|可选|string|弹窗的标题|
|content|必填|string|弹窗内容|
|btn|可选|string/array|字符串只显示一个按钮，数组显示两个按钮，默认为“好的”|
|yes|可选|function|点击确认按钮后执行的操作|
|no|可选|function|点击取消按钮后执行的操作|
|class|可选|string|自定义外层class名|
|color|可选|string|自定义按钮颜色 #000000|
|shadeClose|可选|boole|是否可以点击背景层关闭弹窗，默认false|
|success|可选|function|打开弹窗后执行的操作|
|end|可选|function|关闭弹窗后执行的操作|

#### msg小提示

```javascript
mlayer.msg({
	content: '提示的内容',
	time: 3
});
```

|参数名称|必填？|类型|备注|
|---|---|---|----|
|content|必填|string|弹窗内容|
|time|必填|int|几秒后自动关闭|
|class|可选|string|自定义外层class名|
|success|可选|function|打开弹窗后执行的操作|
|end|可选|function|关闭弹窗后执行的操作|

#### frame大弹窗

```javascript
mlayer.frame({
	title: '弹窗标题',
	content: '<p>弹窗的内容</p>',
	btn: '关闭'
});
mlayer.frame({
	title: '打开百度',
	url: 'https://www.baidu.com/',
	btn: '关闭'
});
```

|参数名称|必填？|类型|备注|
|---|---|---|----|
|title|必填|string|弹窗的标题|
|content|二选一|string|可以是html内容，和url参数二选一|
|url|二选一|string|填写url链接，优先级大于content|
|btn|可选|string|作用为只能关闭窗口|
|color|可选|string|自定义按钮颜色 #000000|
|class|可选|string|自定义外层class名|
|shadeClose|可选|boole|是否可以点击背景层关闭弹窗，默认false|
|success|可选|function|打开弹窗后执行的操作|
|end|可选|function|关闭弹窗后执行的操作|

#### success成功提示

```javascript
mlayer.success({
	title: '恭喜您',
	time: 3
});
```

|参数名称|必填？|类型|备注|
|---|---|---|----|
|title|可选|string|提示文字，默认“success”|
|time|必填|int|几秒后自动关闭|
|class|可选|string|自定义外层class名|
|success|可选|function|打开弹窗后执行的操作|
|end|可选|function|关闭弹窗后执行的操作|

#### error错误提示

```javascript
mlayer.error({
	title: '很抱歉',
	time: 3
});
```

|参数名称|必填？|类型|备注|
|---|---|---|----|
|title|可选|string|提示文字，默认“error”|
|time|必填|int|几秒后自动关闭|
|class|可选|string|自定义外层class名|
|success|可选|function|打开弹窗后执行的操作|
|end|可选|function|关闭弹窗后执行的操作|

#### loading加载动画

```javascript
var index = mlayer.loading({
	title: '加载中'
});

// 请通过 close 方法在加载完成后关闭动画
mlayer.close(index);
```

|参数名称|必填？|类型|备注|
|---|---|---|----|
|title|可选|string|提示文字，默认“加载中”|
|class|可选|string|自定义外层class名|
|success|可选|function|打开弹窗后执行的操作|
|end|可选|function|关闭弹窗后执行的操作|

#### login登陆弹窗

```javascript
mlayer.login({
	btn: ['我再看看', '立即登陆'],
	yes: function(index){
		// index 为此弹窗的ID
		alert('你点击了立即登陆按钮');
		mlayer.close(index);
	}
});
```

|参数名称|必填？|类型|备注|
|---|---|---|----|
|title|可选|string|弹窗的标题|
|content|必填|string|弹窗内容|
|btn|可选|string/array|字符串只显示一个按钮，数组显示两个按钮，默认为“好的”|
|yes|可选|function|点击确认按钮后执行的操作|
|no|可选|function|点击取消按钮后执行的操作|
|class|可选|string|自定义外层class名|
|color|可选|string|自定义按钮颜色 #000000|
|shadeClose|可选|boole|是否可以点击背景层关闭弹窗，默认false|
|success|可选|function|打开弹窗后执行的操作|
|end|可选|function|关闭弹窗后执行的操作|

#### close关闭指定弹窗

```javascript
// index为弹窗的ID;
var index = mlayer.alert({options});
mlayer.close(index);
```

#### closeAll关闭所有弹窗

```javascript
mlayer.closeAll();
```