magiccube-vue3
Version:
vue3-js版组件库
70 lines (69 loc) • 2.27 kB
JavaScript
import McButton from '../../button'
import {_uuid} from '../../../utils/common'
export default {
props: {
content: String,
title: {
type: String,
default: '魔方提示'
},
confirmText: {
type: String,
default: '确定'
},
cancelText: {
type: String,
default: '取消'
},
hiddenConfirmText: {
type: Boolean,
default: false
},
hiddenCancelText: {
type: Boolean,
default: false
},
width: {
type: [Number, String],
default: 364
},
visible: Boolean,
showCloseBtn: {
type: Boolean,
default: true
},
close: Function,
cancel: Function,
confirm: Function,
},
setup(props) {
return () => (
<div class="mc-message" id={'mopai_message_'+_uuid()}>
<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>
{
props.showCloseBtn? (
<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 type="cancel" v-show={!props.hiddenCancelText}
onClick={props.cancel}>{props.cancelText}</McButton>
<McButton v-show={!props.hiddenConfirmText}
onClick={props.confirm}>{props.confirmText}</McButton>
</div>
</div>
</div>
)
}
}