101 lines
2.8 KiB
Vue
101 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
import { defineComponent } from 'vue'
|
|
import { PREFIX } from '../_constants'
|
|
import { useTranslate } from '../../locale'
|
|
import NutButton from '../button/button.vue'
|
|
import NutPopup from '../popup/popup.vue'
|
|
import { dialogEmits, dialogProps } from './dialog'
|
|
import { useDialog } from './use-dialog'
|
|
|
|
const props = defineProps(dialogProps)
|
|
const emit = defineEmits(dialogEmits)
|
|
const {
|
|
contentStyle,
|
|
showPopup,
|
|
onClickOverlay,
|
|
onCancel,
|
|
onOk,
|
|
classes,
|
|
closed,
|
|
dialogStatus,
|
|
showDialog,
|
|
} = useDialog(props, emit)
|
|
|
|
defineExpose({ showDialog, onOk, onCancel })
|
|
</script>
|
|
|
|
<script lang="ts">
|
|
const componentName = `${PREFIX}-dialog`
|
|
export default defineComponent({
|
|
name: componentName,
|
|
inheritAttrs: false,
|
|
options: {
|
|
virtualHost: true,
|
|
addGlobalClass: true,
|
|
styleIsolation: 'shared',
|
|
},
|
|
})
|
|
const { translate } = useTranslate(componentName)
|
|
</script>
|
|
|
|
<template>
|
|
<NutPopup
|
|
v-model:visible="showPopup"
|
|
:close-on-click-overlay="false"
|
|
:lock-scroll="lockScroll"
|
|
:pop-class="popClass"
|
|
:overlay-class="overlayClass"
|
|
:overlay-style="overlayStyle"
|
|
:custom-style="popStyle"
|
|
:z-index="zIndex"
|
|
round
|
|
:transition="transition"
|
|
@click-overlay="onClickOverlay"
|
|
@click-close-icon="closed"
|
|
>
|
|
<view :class="classes" :style="customStyle">
|
|
<view v-if="$slots.header || dialogStatus.title" class="nut-dialog__header">
|
|
<slot v-if="$slots.header" name="header" />
|
|
<template v-else>
|
|
{{ dialogStatus.title || props.title }}
|
|
</template>
|
|
</view>
|
|
|
|
<view class="nut-dialog__content" :style="contentStyle">
|
|
<slot v-if="$slots.default" name="default" />
|
|
<rich-text v-else-if="typeof content === 'string'" :nodes="dialogStatus.content || props.content" />
|
|
<!-- <component :is="content" v-else /> -->
|
|
</view>
|
|
|
|
<view v-if="!dialogStatus.noFooter" class="nut-dialog__footer" :class="{ [footerDirection]: dialogStatus.footerDirection }">
|
|
<slot v-if="$slots.footer" name="footer" />
|
|
<template v-else>
|
|
<NutButton
|
|
v-if="!dialogStatus.noCancelBtn"
|
|
size="small"
|
|
plain
|
|
type="primary"
|
|
custom-class="nut-dialog__footer-cancel"
|
|
@click="onCancel"
|
|
>
|
|
{{ dialogStatus.cancelText || props.cancelText || translate('cancel') }}
|
|
</NutButton>
|
|
<NutButton
|
|
v-if="!dialogStatus.noOkBtn"
|
|
size="small"
|
|
type="primary"
|
|
custom-class="nut-dialog__footer-ok"
|
|
@click="onOk"
|
|
>
|
|
{{ dialogStatus.okText || props.okText || translate('confirm') }}
|
|
</NutButton>
|
|
</template>
|
|
</view>
|
|
</view>
|
|
</NutPopup>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
@import './index';
|
|
</style>
|