import {
|
defineComponent,
|
SetupContext,
|
computed,
|
useSlots,
|
Fragment,
|
} from 'vue'
|
import { _t } from '@/libs/Language/Language'
|
import Icon from '../Icon/Icon'
|
import './BaseDialog.scss'
|
|
export default defineComponent({
|
emits: ['close', 'confirm', 'open'],
|
props: [],
|
setup(props, { emit, attrs, slots }: SetupContext) {
|
const footer = !!useSlots().footer
|
const className = computed(() => {
|
if (attrs.class) {
|
return `without-cs-dialog ${attrs.class}`
|
}
|
return 'without-cs-dialog'
|
})
|
|
// 关闭弹窗都会调这个方法，有些时候点击confirm的时候不能同时触发close的，加个参数，用于区分是点击按钮关闭的事件还是close事件
|
const onClose = (isClose = true) => emit('close', isClose)
|
|
const onConfirm = () => emit('confirm')
|
|
const onOpen = () => emit('open')
|
|
const currentHeight = computed(() => {
|
return attrs.height || 'auto'
|
})
|
return () => {
|
return (
|
<el-dialog
|
class={className.value}
|
width="525px"
|
v-bind="attrs"
|
show-close={false}
|
onClose={() => onClose(false)}
|
onOpen={onOpen}
|
v-slots={{
|
header: () => (
|
<div class="cs-dialog-content">
|
<p>{_t(attrs.title)}</p>
|
{!attrs.hideClose ? (
|
<Icon
|
style="cursor: pointer"
|
width={16}
|
height={16}
|
icon="X"
|
onClick={onClose}
|
/>
|
) : null}
|
</div>
|
),
|
footer: () =>
|
attrs.isHideFooter ? null : (
|
<div class="cs-dialog-footer">
|
{footer ? (
|
// <slot name="footer"></slot>
|
slots?.footer?.()
|
) : (
|
<Fragment>
|
{slots?.customBtn?.()}
|
{/* <slot name="custom-btn"></slot> */}
|
<el-button
|
onClick={onClose}
|
type="info"
|
plain
|
class="dialog-btn cs-base-btn"
|
>
|
{_t('取消')}
|
</el-button>
|
{!attrs.hideSubmit ? (
|
<el-button
|
v-if=""
|
disabled={attrs.submitDisabled}
|
onClick={onConfirm}
|
type="primary"
|
class="cs-base-btn"
|
>
|
{_t('确认')}
|
</el-button>
|
) : null}
|
</Fragment>
|
)}
|
</div>
|
),
|
}}
|
>
|
<div
|
style={`
|
height: ${currentHeight};
|
overflow: ${attrs.height ? 'auto' : 'initial'};
|
padding-right: 20px;
|
`}
|
>
|
{slots?.default?.()}
|
</div>
|
</el-dialog>
|
)
|
}
|
},
|
})
|
