上传文件至 'components/neil-modal'

components/neil-modal/neil-modal.vue

@@ -0,0 +1,260 @@
+<template>
+    <view class="neil-modal" @touchmove.stop.prevent="bindTouchmove" :class="{'neil-modal--show':isOpen}">
+        <view class="neil-modal__mask" @click="clickMask"></view>
+        <view class="neil-modal__container">
+            <view class="neil-modal__header" v-if="title.length > 0">{{title}}</view>
+            <view class="neil-modal__content" :class="content ? 'neil-modal--padding' : ''" :style="{textAlign:align}">
+                <template v-if="content">
+                    <text class="modal-content">{{content}}</text>
+                </template>
+                <template v-else>
+                    <slot />
+                </template>
+            </view>
+            <view class="neil-modal__footer">
+                <view v-if="showCancel" class="neil-modal__footer-left" @click="clickLeft" :style="{color:cancelColor}"
+                    hover-class="neil-modal__footer-hover" :hover-start-time="20" :hover-stay-time="70">
+                    {{cancelText}}
+                </view>
+                <view class="neil-modal__footer-right" @click="clickRight" :style="{color:confirmColor}" hover-class="neil-modal__footer-hover"
+                    :hover-start-time="20" :hover-stay-time="70">
+                    {{confirmText}}
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+    export default {
+        name: 'neil-modal',
+        props: {
+            title: { //标题
+                type: String,
+                default: ''
+            },
+            content: String, //提示的内容
+            align: { //content 的对齐方式left/center/right
+                type: String,
+                default: 'left'
+            },
+            cancelText: { //取消按钮的文字，默认为"取消"
+                type: String,
+                default: '取消'
+            },
+            cancelColor: { //取消按钮颜色
+                type: String,
+                default: '#333333'
+            },
+            confirmText: { //确定按钮的文字，默认为"确定"
+                type: String,
+                default: '确定'
+            },
+            confirmColor: { //确认按钮颜色
+                type: String,
+                default: '#007aff'
+            },
+            showCancel: { //是否显示取消按钮，默认为 true
+                type: [Boolean, String],
+                default: true
+            },
+            show: { //是否显示模态框
+                type: [Boolean, String],
+                default: false
+            },
+            autoClose: { //点击遮罩是否自动关闭弹窗
+                type: [Boolean, String],
+                default: true
+            }
+        },
+        data() {
+            return {
+                isOpen: false
+            }
+        },
+        watch: {
+            show(val) {
+				this.isOpen = val
+            }
+        },
+        created() {
+        	this.isOpen = this.show
+        },
+        methods: {
+            bindTouchmove() {},
+            clickLeft() {
+                setTimeout(() => {
+                	this.$emit('cancel')
+                }, 200)
+                this.closeModal()
+            },
+            clickRight() {
+                setTimeout(() => {
+                	this.$emit('confirm')
+                }, 200)
+                this.closeModal()
+            },
+			clickMask(){
+				if(this.autoClose){
+					this.closeModal()
+				}
+			},
+            closeModal() {
+                this.showAnimation = false
+				this.isOpen = false
+				this.$emit('close')
+            }
+        }
+    }
+</script>
+
+<style lang="scss">
+    $bg-color-mask:rgba(0, 0, 0, 0.5); //遮罩颜色
+    $bg-color-hover:#f1f1f1; //点击状态颜色
+
+    .neil-modal {
+        position: fixed;
+		visibility: hidden;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        z-index: 1000;
+		transition:visibility 200ms ease-in;
+		
+		&.neil-modal--show{
+			visibility: visible;
+		}
+
+        &__header {
+            position: relative;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            padding: 18upx 24upx;
+            line-height: 1.5;
+            color: #333;
+            font-size: 32upx;
+            text-align: center;
+
+            &::after {
+                content: " ";
+                position: absolute;
+                left: 0;
+                bottom: 0;
+                right: 0;
+                height: 1px;
+                border-top: 1px solid #e5e5e5;
+                transform-origin: 0 0;
+                transform: scaleY(.5);
+            }
+        }
+
+        &__container {
+            position: absolute;
+			z-index: 999;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%) ;
+            transition: transform 0.3s;
+            width: 540upx;
+            border-radius: 20upx;
+            background-color: #fff;
+            overflow: hidden;
+            opacity: 0;
+            transition: opacity 200ms ease-in;
+        }
+
+        &__content {
+            position: relative;
+            color: #333;
+            font-size: 28upx;
+            box-sizing: border-box;
+            line-height: 1.5;
+
+            &::after {
+                content: " ";
+                position: absolute;
+                left: 0;
+                bottom: -1px;
+                right: 0;
+                height: 1px;
+                border-bottom: 1px solid #e5e5e5;
+                transform-origin: 0 0;
+                transform: scaleY(.5);
+            }
+        }
+
+        &__footer {
+            position: relative;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            color: #333;
+            font-size: 32upx;
+            display: flex;
+            flex-direction: row;
+
+            &-left,
+            &-right {
+                position: relative;
+                flex: 1;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                height: 88upx;
+                font-size: 28upx;
+                line-height: 88upx;
+                text-align: center;
+                background-color: #fff;
+                color: #333;
+            }
+
+            &-right {
+                color: #007aff;
+            }
+
+            &-left::after {
+                content: " ";
+                position: absolute;
+                right: -1px;
+                top: 0;
+                width: 1px;
+                bottom: 0;
+                border-right: 1px solid #e5e5e5;
+                transform-origin: 0 0;
+                transform: scaleX(.5);
+            }
+
+            &-hover {
+                background-color: $bg-color-hover;
+            }
+        }
+
+        &__mask {
+            display: block;
+            position: absolute;
+			z-index: 998;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: $bg-color-mask;
+            opacity: 0;
+            transition: opacity 200ms ease-in;
+			&.neil-modal--show{
+				opacity: 1;
+			}
+        }
+
+        &--padding {
+            padding: 32upx 24upx;
+            min-height: 90upx;
+        }
+		&--show {
+		    .neil-modal__container,.neil-modal__mask{
+				opacity: 1;
+			}
+		}
+    }
+</style>

components/neil-modal/readme.md

@@ -0,0 +1,84 @@
+### 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 目录；
+* 使用过程出现问题或有新的需求可在评论区留言。