kxmh_uni/components/modal/modal.vue

<template>
    <view class="mask" v-if="showClone" @tap="clickMask">
        <view class="modal-content">
            <scroll-view scroll-y class="main-content">
                <view class="title" v-if="title">{{ title }}</view>
                <slot></slot>
            </scroll-view>
            <view v-if="showCancel" class="modal-btn-wrapper">
                <button class="cancel-btn" style="color: rgba(7, 17, 27, 0.6)" @tap="cancel">{{ cancelButtonText }}</button>
                <button class="confirm-btn" style="color: #13b5f5" :open-type="confirmButtonOpenType" @getphonenumber="onGetPhoneNumber" @tap="confirm">
                    {{ confirmButtonText }}
                </button>
            </view>
            <view v-else class="modal-btn-wrapper">
                <button class="confirm-btn" style="color: #13b5f5" @tap="confirm">{{ confirmButtonText }}</button>
            </view>
        </view>
    </view>
</template>

<script>
/**
 * 自定义modal浮层
 * 使用方法：
 * <modal show="{{showModal}}" height='60%' bindcancel="modalCancel" bindconfirm='modalConfirm'>
     <view>你自己需要展示的内容</view>
  </modal>

  属性说明：
  show： 控制modal显示与隐藏
  height：modal的高度
  bindcancel：点击取消按钮的回调函数
  bindconfirm：点击确定按钮的回调函数

  使用模块：
  场馆 -> 发布 -> 选择使用物品
 */
export default {
	name:'modal',
    data() {
        return {};
    },
    /**
     * 组件的属性列表
     */
    props: {
        //是否显示modal
        show: {
            type: Boolean,
            default: false
        },
        title: {
            type: String,
            default: null
        },
        cancelButtonText: {
            type: String,
            default: '取消'
        },
        confirmButtonText: {
            type: String,
            default: '确定'
        },
        showCancel: {
            type: Boolean,
            default: false
        },
        confirmButtonOpenType: String
    },
    /**
     * 组件的方法列表
     */
    methods: {
        clickMask() {
            // this.setData({show: false})
        },

        cancel() {
            this.setData({
                showClone: false
            });
            this.$emit('cancel');
        },

        onGetPhoneNumber: function (event) {
            this.$emit('getphonenumber', {
                detail: event.detail
            });
        },

        confirm() {
            this.setData({
                showClone: false
            });
            this.$emit('confirm');
        }
    },
    watch: {
        show: {
            handler: function (newVal, oldVal) {
                this.showClone = newVal;
            },

            immediate: true
        }
    }
};
</script>
<style>
.mask {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 2229999;
}
.title {
    margin: 40rpx 0 20rpx 0;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    color: #3a3a3a;
}
.modal-content {
    display: flex;
    flex-direction: column;
    width: 90%;
    /* height: 80%; */
    background-color: #fff;
    border-radius: 10rpx;
    position: fixed;
}

.modal-btn-wrapper {
    display: flex;
    flex-direction: row;
    height: 100rpx;
    line-height: 100rpx;
    border-top: 2rpx solid rgba(7, 17, 27, 0.1);
}

.cancel-btn,
.confirm-btn {
    flex: 1;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    font-size: 32rpx;
    background: #fff;
}

.cancel-btn {
    border-right: 2rpx solid rgba(7, 17, 27, 0.1);
}

.main-content {
    flex: 1;
    height: 100%;
    overflow-y: hidden;
}
</style>