magiccube-vue3/package/components/popup/index.js

vue3-js版组件库

import { ref, watch } from 'vue'
import Popup from '../../utils/popup'

const PopupComponent = {
    name: 'McPopup',
    props: {
        /* visible field */
        modelValue: Boolean,

        /* the button status will be disabled when loading is true on submit in modules */
        loading: Boolean,

        title: {
            type: String,
            default: '弹出框'
        },
        width: {
            type: [String, Number],
            default: 320
        },
        confirmText: {
            type: String,
            default: '确定'
        },
        cancelText: {
            type: String,
            default: '取消'
        },

        maskType: {
            type: String,
            default: 'transparent'
        },

        clickMask: {
            type: Boolean,
            default: true
        },

        buttonAlign: {
            type: String,
            default: 'center'
        },

        /* setting footer button disabled status */
        confirmButtonDisabled: Boolean,
        cancelButtonDisabled: Boolean,

        /* setting footer button visible status */
        hiddenConfirmButton: Boolean,
        hiddenCancelButton: Boolean,

        /* 弹层内提交按钮的loading状态，改状态不涉及弹层整体的loading状态 */
        submitButtonLoading: Boolean,
    },
    emits: ['init', 'cancel', 'close', 'confirm', 'update:loading'],
    setup(props, { emit, slots }) {

        const popupEl = ref(null)

        const innerEl = ref(null)

        /**
         * 未用watchEffect原因是在弹层中用vueDraggable拖动排序时会激发modelValue再次赋值
         * 改用watch可以解决这个问题
         */
        watch(() => props.modelValue, (newValue, oldValue) => {
            if(newValue) {
                if(popupEl.value) popupEl.value.visible()
                /* init function action when dialog is open */
                emit('init')
            } else {
                if(popupEl.value) popupEl.value.invisible()
            }
        })

        const handleConfirm = (e) => {
            emit('confirm')
        }

        const handleCancel = (e) => {
            emit('update:loading', false)
            emit('cancel')
        }

        /* close function action when click mask or close button in dialog */
        const handleClose = (e) => {
            // handleCancel()
            emit('close')
        }

        const handleClickMask = () => {
            props.clickMask && handleClose()
        }

        const headerNode = () => (
            <div class="mc-popup__header">
                <span class="mc-popup__header--title">{props.title}</span>
                <span class="mc-popup__header--close" onClick={handleClose}>
                    <img src={require('../../img/icon_close.svg')} />
                </span>
            </div>
        )

        const bodyNode = () => (
            <div class="mc-popup__body" v-loading={props.loading}>
                {
                    slots.default ? slots.default() : ''
                }
            </div>
        )

        const footerNode = () => {
            if(props.hiddenCancelButton && props.hiddenConfirmButton) return ''

            return (
                <div class={[
                    'mc-popup__footer',
                    [props.buttonAlign === 'right'? 'align-right' : 'align-center']
                ]}>
                    {
                        !props.hiddenCancelButton ? (
                            <McButton type="cancel"
                                onClick={e => handleCancel(e)}
                                disabled={props.loading || props.cancelButtonDisabled}>
                                {props.cancelText}
                            </McButton>
                        ) : ''
                    }
                    {
                        !props.hiddenConfirmButton ? (
                            <McButton onClick={handleConfirm}
                                loading={props.submitButtonLoading}
                                disabled={props.loading || props.confirmButtonDisabled}>
                                {props.confirmText}
                            </McButton>
                        ) : ''
                    }
                </div>
            )
        }

        return () => (
            <Popup ref={popupEl}
                maskType={props.maskType}
                onClickMask={handleClickMask}>
                <div class="mc-popup"
                    ref={innerEl}
                    style={{
                        width: props.width + 'px',
                        marginLeft: 0 - props.width / 2 + 'px',
                    }}>
                    {headerNode()}
                    {bodyNode()}
                    {footerNode()}
                </div>
            </Popup >
        )
    }
}

PopupComponent.install = (app) => {
    app.component(PopupComponent.name, PopupComponent)
}

const McPopup = PopupComponent

export { McPopup, McPopup as default }