弹窗提示

<template>
    <a-button>点击打开弹窗</a-button>
    <mi-modal v-model:open="open" @click="handleModal" title="自定义弹窗标题（Title）">
        自定义弹窗内容（Content）
    </mi-modal>
</template>

<script setup lang="ts">
    import { ref } from 'vue'

    const open = ref<boolean>(false)

    const handleModal = () => {
        open.value = !open.value
        // do something
        console.log('click event')
    }
</script>

<template>
    <!-- 动画请查看 `./component/_utils/props - animations` -->
    <div class="btn">Scale（放大显现 - 默认）</div>
    <mi-modal v-model:open="params.open" :animation="params.animation" @click="handleAnimModal('scale')" :key="params.animation" title="自定义弹窗标题（Title）">
        自定义弹窗内容（Content）
    </mi-modal>
</template>

<script setup lang="ts">
    import { reactive } from 'vue'

    const params = reactive({
        open: false,
        animation: 'scale'
    })

    const handleAnimModal = (name: string) => {
        params.animation = name
        params.open = !params.open
    }
</script>

<template>
    <div class="btn" @click="handleQuickModal('success')">Success</div>
</template>

<script setup lang="ts">
    import { getCurrentInstance, type ComponentInternalInstance } from 'vue'

    const { appContext: { config: { globalProperties: _this } } } = getCurrentInstance() as ComponentInternalInstance

    const handleQuickModal = (type: string) => {
        switch(type) {
            case 'success':
                _this.$modal.success({content: '操作成功（Successed）'})
                break;
            case 'error':
                _this.$modal.error({content: '操作失败（Failed）'})
                break;
            case 'warning':
                _this.$modal.warning({content: '请先引入「 Pinia 」组件'})
                break;
            case 'confirm':
                _this.$modal.confirm({content: '确定删除当前所选的项目吗？'})
                break;
            default:
                _this.$modal.success({content: '操作成功（Successed）'})
                break;
        }
    }
</script>