magiccube-vue3/package/components/message/alert/Component.js

vue3-js版组件库

import McButton from '../../button'
import {_uuid} from '../../../utils/common'
export default {
    props: {
        content: String,
        title: {
            type: String,
            default: '魔方提示'
        },
        confirmText: {
            type: String,
            default: '确定'
        },
        visible: Boolean,
        width: {
            type: [Number, String],
            default: 364
        },
        close: Function,
        confirm: Function,
    },
    setup(props) {
        return () => (
            <div class="mc-message" id={'mopai_message_'+_uuid()} onClick={props.close}>
                <div class={[
                    'mc-message__inner',
                    { 'visible': props.visible }
                ]} style={{'width': props.width + 'px'}}>
                    <div class="mc-message__inner--header">
                        <span style="flex:1;">{props.title}</span>
                        <span>
                            <img src={require('../../../img/icon_close.svg')} onClick={props.close} style="cursor:pointer;" />
                        </span>
                    </div>
                    <div class="mc-message__inner--body">
                        <div v-html={props.content}></div>
                    </div>
                    <div class="mc-message__inner--footer">
                        <McButton onClick={props.confirm}>{props.confirmText}</McButton>
                    </div>
                </div>
            </div>
        )
    }
}