85 lines
2.6 KiB
Markdown
85 lines
2.6 KiB
Markdown
### Modal 模态框
|
||
|
||
自定义 Modal 模态框组件
|
||
|
||
**使用方式：**
|
||
|
||
在 script 中引用组件
|
||
|
||
```javascript
|
||
import neilModal from '@/components/neil-modal/neil-modal.vue';
|
||
export default {
|
||
components: {neilModal}
|
||
}
|
||
```
|
||
|
||
基础使用方式
|
||
|
||
```html
|
||
<neil-modal
|
||
:show="show"
|
||
@close="closeModal"
|
||
title="标题"
|
||
content="这里是正文内容，这里是正文内容，这里是正文内容，这里是正文内容，这里是正文内容，这里是正文内容"
|
||
@cancel="bindBtn('cancel')"
|
||
@confirm="bindBtn('confirm')">
|
||
</neil-modal>
|
||
```
|
||
|
||
单个确认按钮
|
||
|
||
```html
|
||
<neil-modal
|
||
:show="show"
|
||
title="标题"
|
||
content="这里是正文内容，这里是正文内容，这里是正文内容，这里是正文内容，这里是正文内容，这里是正文内容"
|
||
:show-cancel="false">
|
||
</neil-modal>
|
||
```
|
||
|
||
**属性说明：**
|
||
|
||
|属性名 |类型 |默认值 |说明 |
|
||
|--- |---- |--- |--- |
|
||
|title|String||标题 |
|
||
|content|String||内容|
|
||
|align|String|left|内容对齐方式，值为：left（左对齐）、center（居中对齐）、right（右对齐）|
|
||
|show |Boolean |false |Modal的显示状态 |
|
||
|show-cancel|Boolean|true |是否显示取消按钮|
|
||
|auto-close|Boolean|true |点击遮罩是否自动关闭模态框|
|
||
|confirm-color|String|#007aff|确认按钮的颜色 |
|
||
|confirm-text|String|确定|确定按钮的文字 |
|
||
|cancel-color|String|#333333|取消按钮的颜色 |
|
||
|cancel-text|String|取消|取消按钮的文字 |
|
||
|
||
**事件说明：**
|
||
|
||
|事件名|说明 |
|
||
|close|组件关闭时触发事件|
|
||
|confirm|点击确认按钮时触发事件|
|
||
|cancel|点击取消按钮时触发事件|
|
||
|
||
**slot**
|
||
|
||
在 ``neil-modal`` 节点下，可以通过插入节点实现自定义 content 的需求（只有 content 属性为空的时候才会加载 slot）
|
||
|
||
使用示例：
|
||
|
||
```html
|
||
<neil-modal :show="show" @close="closeModal" title="更新提示" confirm-text="立即更新" cancel-text="暂不更新">
|
||
<view style="min-height: 90upx;padding: 32upx 24upx;">
|
||
<view>1. 修复标题颜色不对的问题</view>
|
||
<view>2. 增加支付宝支付功能</view>
|
||
<view>3. 增加更多示例</view>
|
||
</view>
|
||
</neil-modal>
|
||
```
|
||
|
||
**其他**
|
||
|
||
* Modal 组件 z-index 为 1000；
|
||
* Modal 组件非原生组件，使用时会被原生组件所覆盖；
|
||
* 通过本页面下载按钮下载的zip为一个完整 ``uni-app`` 工程，拖入 HBuilderX即可运行体验效果；
|
||
* 若想集成本组件到现有工程，可以将 components 目录下的 neil-modal 目录拷贝到自己工程的 components 目录；
|
||
* 使用过程出现问题或有新的需求可在评论区留言。
|