# ev-showModal

**Repository Path**: evelyn0910/ev-show-modal

## Basic Information

- **Project Name**: ev-showModal
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2024-04-17
- **Last Updated**: 2025-02-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ev-showModal 模态弹窗（与uni.showModal字段、调用方式一致，已多端适配）

> 多端适配：替换APP端的uni.showModal模态框，其他端使用原生uni.showModal<br/>
> 参考：<a href="https://ext.dcloud.net.cn/plugin?id=1749" target="_blank">g-show-modal</a><br/>
> 优势：内容高度自适应、内容对齐方式可修改、确认按钮位置可修改、蒙层点击可修改、标题内容字体大小可修改、弹窗宽度可修改、边距可修改。

# git地址
[https://gitee.com/evelyn0910/ev-show-modal](https://gitee.com/evelyn0910/ev-show-modal)
## 调用示例
1. 在App.vue中增加如下代码：
	```
	// App.vue
	import '@/uni_modules/ev-showModal/js_sdk/index.js';
	```
2. 页面调用示例：
	```
	<!-- index.vue -->
	<button class="button" @click="handlerClick">显示模态框</button>
	```

	```
	// index.vue
	export default {
		methods: {
			handlerClick() {
				uni.$showModal();
			}
		}
	}
	```



## 属性说明

| 属性名					| 类型			| 默认值			| 说明																	| 枚举												|
| ---------------	| --------| ----------| -----------------------------------	| -------------------------	|
| title						| String	| 提示				| 提示的标题														|														|
| content					| String	| 提示的内容	| 提示的内容														|														|
| showCancel			| Boolean	| true			| 是否显示取消按钮，默认为 true					|														|
| cancelText			| String	| 取消				| 取消按钮的文字，默认为"取消"						|														|
| cancelColor			| String	| #000000		| 取消按钮的文字颜色，默认为"#000000"		|														|
| confirmText			| String	| 确定				| 确定按钮的文字，默认为"确定"						|														|
| confirmColor		| String	| #000000		| 确定按钮的文字颜色，									|														|
| success					| Function|						| 接口调用成功的回调函数								|														|
| 新增字段:				|					|						|																			|														|
| align						| String	| center		| 内容对齐方式													| 'center', 'left', 'right'	|
| maskClick				| Boolean	| false			| 蒙层点击是否关闭											| false, true								|
| confirmPosition	| String	| left			| 确认按钮位置													| 'left', 'right'						|
| styleOption			| Object	|						| 样式集合															|      参考下文							|


## 样式自定义
如果默认字段满足不了自定义需求。请使用`styleOption`字段自定义：


| 属性名					| 类型			| 默认值						| 说明																		| 枚举												|
| ---------------	| --------| ----------			| -----------------------------------		| -------------------------	|
| widthPerc				| Number	| -30/0						| 横屏为-30，竖屏为0。调整弹窗宽度，单位 %	|														|
| buttonHeight		| Number	| 48							| 按钮高度，单位 px												|														|
| titleFontSize		| Number	| 16							| 标题字体大小，单位 px										|														|
| contentFontSize	| Number	| 14							| 内容字体大小，单位 PX										|														|
| buttonFontSize	| Number	| 16							| 按钮字体大小，单位 px										|														|
| titlePadding		| Number[]| [2.8, 5, 0, 5]	| 标题内边距，单位 %											|														|
| contentPadding	| Number[]| [1.8, 5, 3.8, 5]| 内容内边距，单位 %											|														|
| borderRadius		| Number	| 4								| 边框radius，单位 px										|														|


## 横竖屏
横竖屏不一致可以使用`uni.getDeviceInfo().deviceOrientation === 'landscape'`进行适配。目前已自动适配。


## 修改全局默认
修改路径：`uni_modules/ev-showModal/js_sdk/index.js`。
如果修改了全局默认，从插件市场更新时，将会覆盖已修改的文件。请自行保存一份原先的，更新后重新替换。