magiccube-vue3/package/components/notification/Component.js

vue3-js版组件库

import { Transition, computed, nextTick } from 'vue'

export default {
    props: {
        title: {
            type: String,
            default: '',
        },
        type: {
            type: String,
            default: ''
        },
        dangerouslyUseHTMLString: {
            type: Boolean,
            default: false
        }, // 是否将 message 属性作为 HTML 片段处理
        message: [String, Object],
        showClose: {
            type: Boolean,
            default: true
        },
        position: {
            type: String,
            values: ['top-right', 'top-left', 'bottom-right', 'bottom-left'],
            default: 'top-right',
        },
        offset: {
            type: Number,
            default: 0
        },
        id: {
            type: String,
            default: ''
        },
        duration: {
            type: Number,
            default: 4500,
        },
        onClose: {
            type: Function,
            required: true,
        }
    },
    /**
     * @TODO
     * 1、icon
     * 2、notify.success()直接调用icon
     * 3、transition，没起作用
     */
    emits: ['close'],
    setup(props, { slots, emit }) {


        const handleClick = (e) => {
            e.stopPropagation()
            // close()
            emit('close')
        }

        const close = () => {
            emit('close')
        }

        const positionStyle = computed(() => {
            return {
                [verticalProps.value]: `${props.offset}px`
            }
        })

        /** 水平方向 */
        const horizontalClassName = computed(() => {
            return props.position.endsWith('right')? 'right' : 'left'
        })

        /** 垂直方向 */
        const verticalProps = computed(() => {
            return props.position.startsWith('top')? 'top' : 'bottom'
        })

        /**
         * props.duration后消失
         */
        const setDuration = () => {
            if(props.duration > 0) {
                setTimeout(() => {
                    emit('close')
                }, props.duration)
            }
        }

        nextTick(() => setDuration())

        const contentSlots = () => {
            return (
                <>
                    {
                        !props.dangerouslyUseHTMLString?
                            <p>{ props.message }</p> : <p domPropsInnerHTML={props.message}></p>
                    }
                </>
            )
        }

        return () => (
            <Transition name="mc-notify-fade">
                <div style={positionStyle.value}
                    class={[
                        'mc-notify',
                        horizontalClassName.value,
                    ]}>
                    {/* icon, 待添加 */}
                    {/* group */}
                    <div class="mc-notify__group">
                        <h2  class="mc-notify__title"
                            v-show={props.title} >{props.title}</h2>
                        <div class="mc-notify__content"
                            v-show={props.message}>
                            {
                                slots.default? slots.default() : contentSlots()
                            }
                        </div>
                    </div>
                    {/* close */}
                    <div class="mc-notify__close"
                        v-show={props.showClose}
                        onClick={handleClick}></div>
                </div>
            </Transition>
        )
    }
}