4dkankan-components/packages/components/basic/dialog/src/window.vue

<template>
    <ui-dialog>
        <template #header>
            <span style="font-size: 16px">{{ title }}</span>
            <i class="iconfont icon-close" @click="onNo('close')" v-if="showCloseIcon"></i>
        </template>
        <template v-if="$slots.content">
            <slot name="content"></slot>
        </template>
        <template v-else>
            <div class="message" v-html="content"></div>
        </template>
        <template #footer>
            <ui-button type="cancel" @click="onNo" v-if="showCancelButton">{{ noText }}</ui-button>
            <ui-button :class="{ disabled: !canSubmit }" type="submit primary" @click="onOk">{{ okText }}</ui-button>
        </template>
    </ui-dialog>
</template>
<script>
import { defineComponent } from 'vue'
export default defineComponent({
    name: 'UIWindow',
    props: {
        title: {
            type: String,
            default: '提示',
        },
        content: {
            type: String,
            default: '',
        },
        okText: {
            type: String,
            default: '确定',
        },
        noText: {
            type: String,
            default: '取消',
        },
        showCloseIcon: {
            type: Boolean,
            default: true,
        },
        showCancelButton: {
            type: Boolean,
            default: true,
        },
        canSubmit: {
            type: Boolean,
            default: true,
        },
    },
    emits: ['ok', 'no'],
    setup: function (props, ctx) {
        const onNo = name => {
            ctx.emit('no', name)
        }
        const onOk = () => {
            ctx.emit('ok')
        }
        return {
            onNo,
            onOk,
        }
    },
})
</script>