72 lines
2.2 KiB
Vue
72 lines
2.2 KiB
Vue
|
<script>
|
|||
|
|
import classNames from 'classnames'
|
|||
|
|
import Icon from '../icon'
|
|||
|
|
import Dialog from './Modal'
|
|||
|
|
import ActionButton from './ActionButton'
|
|||
|
|
import { getConfirmLocale } from './locale'
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
functional: true,
|
|||
|
|
render () {
|
|||
|
|
const { onCancel, onOk, close, zIndex, afterClose, visible } = this.$props
|
|||
|
|
const props = this.$props
|
|||
|
|
const iconType = props.iconType || 'question-circle'
|
|||
|
|
const okType = props.okType || 'primary'
|
|||
|
|
const prefixCls = props.prefixCls || 'ant-confirm'
|
|||
|
|
// 默认为 true，保持向下兼容
|
|||
|
|
const okCancel = ('okCancel' in props) ? props.okCancel : true
|
|||
|
|
const width = props.width || 416
|
|||
|
|
const style = props.style || {}
|
|||
|
|
// 默认为 false，保持旧版默认行为
|
|||
|
|
const maskClosable = props.maskClosable === undefined ? false : props.maskClosable
|
|||
|
|
const runtimeLocale = getConfirmLocale()
|
|||
|
|
const okText = props.okText ||
|
|||
|
|
(okCancel ? runtimeLocale.okText : runtimeLocale.justOkText)
|
|||
|
|
const cancelText = props.cancelText || runtimeLocale.cancelText
|
|||
|
|
|
|||
|
|
const classString = classNames(
|
|||
|
|
prefixCls,
|
|||
|
|
`${prefixCls}-${props.type}`,
|
|||
|
|
props.class,
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
const cancelButton = okCancel && (
|
|||
|
|
<ActionButton actionFn={onCancel} closeModal={close}>
|
|||
|
|
{cancelText}
|
|||
|
|
</ActionButton>
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Dialog
|
|||
|
|
class={classString}
|
|||
|
|
onCancel={(e) => close({ triggerCancel: true }, e)}
|
|||
|
|
visible={visible}
|
|||
|
|
title=''
|
|||
|
|
transitionName='zoom'
|
|||
|
|
footer=''
|
|||
|
|
maskTransitionName='fade'
|
|||
|
|
maskClosable={maskClosable}
|
|||
|
|
style={style}
|
|||
|
|
width={width}
|
|||
|
|
zIndex={zIndex}
|
|||
|
|
afterClose={afterClose}
|
|||
|
|
>
|
|||
|
|
<div class={`${prefixCls}-body-wrapper`}>
|
|||
|
|
<div class={`${prefixCls}-body`}>
|
|||
|
|
<Icon type={iconType} />
|
|||
|
|
<span class={`${prefixCls}-title`}>{props.title}</span>
|
|||
|
|
<div class={`${prefixCls}-content`}>{props.content}</div>
|
|||
|
|
</div>
|
|||
|
|
<div class={`${prefixCls}-btns`}>
|
|||
|
|
{cancelButton}
|
|||
|
|
<ActionButton type={okType} actionFn={onOk} closeModal={close} autoFocus>
|
|||
|
|
{okText}
|
|||
|
|
</ActionButton>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</Dialog>)
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</script>
|