129 lines
3.2 KiB
Vue
129 lines
3.2 KiB
Vue
|
|
import omit from 'omit.js'
|
|
import Tooltip from '../tooltip'
|
|
import abstractTooltipProps from '../tooltip/abstractTooltipProps'
|
|
import PropTypes from '../_util/vue-types'
|
|
import { getOptionProps, hasProp, getComponentFromProp } from '../_util/props-util'
|
|
import BaseMixin from '../_util/BaseMixin'
|
|
import buttonTypes from '../button/buttonTypes'
|
|
import Icon from '../icon'
|
|
import Button from '../button'
|
|
import LocaleReceiver from '../locale-provider/LocaleReceiver'
|
|
import defaultLocale from '../locale-provider/default'
|
|
|
|
const tooltipProps = abstractTooltipProps()
|
|
const btnProps = buttonTypes()
|
|
export default {
|
|
name: 'APopconfirm',
|
|
props: {
|
|
...tooltipProps,
|
|
prefixCls: PropTypes.string.def('ant-popover'),
|
|
transitionName: PropTypes.string.def('zoom-big'),
|
|
content: PropTypes.any,
|
|
title: PropTypes.any,
|
|
trigger: tooltipProps.trigger.def('click'),
|
|
okType: btnProps.type.def('primary'),
|
|
okText: PropTypes.any,
|
|
cancelText: PropTypes.any,
|
|
},
|
|
mixins: [BaseMixin],
|
|
model: {
|
|
prop: 'visible',
|
|
event: 'visibleChange',
|
|
},
|
|
watch: {
|
|
visible (val) {
|
|
this.sVisible = val
|
|
},
|
|
},
|
|
data () {
|
|
return {
|
|
sVisible: this.$props.visible,
|
|
}
|
|
},
|
|
methods: {
|
|
onConfirm (e) {
|
|
this.setVisible(false)
|
|
this.$emit('confirm', e)
|
|
},
|
|
|
|
onCancel (e) {
|
|
this.setVisible(false)
|
|
this.$emit('cancel', e)
|
|
},
|
|
|
|
onVisibleChange (sVisible) {
|
|
this.setVisible(sVisible)
|
|
},
|
|
|
|
setVisible (sVisible) {
|
|
if (!hasProp(this, 'visible')) {
|
|
this.setState({ sVisible })
|
|
}
|
|
this.$emit('visibleChange', sVisible)
|
|
},
|
|
getPopupDomNode () {
|
|
return this.$refs.tooltip.getPopupDomNode()
|
|
},
|
|
renderOverlay (popconfirmLocale) {
|
|
const { prefixCls, okType } = this
|
|
return (
|
|
<div class={`${prefixCls}-inner-content`}>
|
|
<div class={`${prefixCls}-message`}>
|
|
<Icon type='exclamation-circle' />
|
|
<div class={`${prefixCls}-message-title`}>
|
|
{getComponentFromProp(this, 'title')}
|
|
</div>
|
|
</div>
|
|
<div class={`${prefixCls}-buttons`}>
|
|
<Button onClick={this.onCancel} size='small'>
|
|
{getComponentFromProp(this, 'cancelText') || popconfirmLocale.cancelText}
|
|
</Button>
|
|
<Button onClick={this.onConfirm} type={okType} size='small'>
|
|
{getComponentFromProp(this, 'okText') || popconfirmLocale.okText}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)
|
|
},
|
|
},
|
|
render (h) {
|
|
const props = getOptionProps(this)
|
|
const otherProps = omit(props, [
|
|
'title',
|
|
'content',
|
|
'cancelText',
|
|
'okText',
|
|
])
|
|
const tooltipProps = {
|
|
props: {
|
|
...otherProps,
|
|
visible: this.sVisible,
|
|
},
|
|
ref: 'tooltip',
|
|
on: {
|
|
visibleChange: this.onVisibleChange,
|
|
},
|
|
}
|
|
const overlay = (
|
|
<LocaleReceiver
|
|
componentName='Popconfirm'
|
|
defaultLocale={defaultLocale.Popconfirm}
|
|
scopedSlots={
|
|
{ default: this.renderOverlay }
|
|
}
|
|
/>)
|
|
return (
|
|
<Tooltip
|
|
{...tooltipProps}
|
|
>
|
|
<template slot='title'>
|
|
{overlay}
|
|
</template>
|
|
{this.$slots.default}
|
|
</Tooltip>
|
|
)
|
|
},
|
|
}
|
|
|