logo
简体中文

导航菜单

文档

AlertDialog

简介

AlertDialog 组件用于显示简单的确认对话框，支持国际化，带有淡入淡出动画效果。

案例

这是一个基础的确认对话框示例

---
import { AlertDialog, Button } from '@coffic/cosy-ui';
---

<div style="padding: 1rem;">
    <Button onclick="showAlertDialog('basic-dialog')"> 显示确认对话框 </Button>

    <AlertDialog message="这是一个基础的确认对话框示例" id="basic-dialog" />
</div>

<script setup lang="ts">
import { AlertDialog } from '@coffic/cosy-ui/vue';
import { ref } from 'vue';

const showDialog = ref(false);
</script>
<template>
    <div style="display: flex; flex-direction: column; gap: 1rem">
        <button @click="showDialog = true" class="cosy:btn cosy:btn-primary">
            显示对话框
        </button>
        <AlertDialog v-model="showDialog" message="这是一条重要信息" />
    </div>
</template>

Props

class

自定义 CSS 类名，用于覆盖默认样式。

这是一个带有自定义样式的确认对话框

---



import { AlertDialog, Button } from "@coffic/cosy-ui";
---

<div style="padding: 1rem;">
  <Button onclick="showAlertDialog('custom-dialog')"
    >显示自定义样式对话框</Button
  >

  <AlertDialog
    message="这是一个带有自定义样式的确认对话框"
    id="custom-dialog"
    class="cosy:bg-primary cosy:text-primary-content"
  />
</div>

<script setup lang="ts">
import { AlertDialog } from '@coffic/cosy-ui/vue';
import { ref } from 'vue';

const showDialog = ref(false);
</script>
<template>
    <div style="display: flex; flex-direction: column; gap: 1rem">
        <button @click="showDialog = true" class="cosy:btn cosy:btn-primary">
            显示自定义样式对话框
        </button>
        <AlertDialog v-model="showDialog" message="这是一个带有自定义样式的确认对话框"
            class="cosy:bg-primary cosy:text-primary-content" />
    </div>
</template>

id

对话框的唯一标识符，用于通过 JavaScript 控制对话框的显示和隐藏（仅 Astro 版本）。

这是一个基础的确认对话框示例

---
import { AlertDialog, Button } from '@coffic/cosy-ui';
---

<div style="padding: 1rem;">
    <Button onclick="showAlertDialog('basic-dialog')"> 显示确认对话框 </Button>

    <AlertDialog message="这是一个基础的确认对话框示例" id="basic-dialog" />
</div>

<script setup lang="ts">
import { AlertDialog } from '@coffic/cosy-ui/vue';
import { ref } from 'vue';

const showDialog = ref(false);
</script>
<template>
    <div style="display: flex; flex-direction: column; gap: 1rem">
        <button @click="showDialog = true" class="cosy:btn cosy:btn-primary">
            显示对话框
        </button>
        <AlertDialog v-model="showDialog" message="这是一条重要信息" />
    </div>
</template>

lang

语言设置，影响按钮文本，支持中文（zh）和英文（en）两种语言。

This is an English confirmation dialog example

---



import { AlertDialog, Button } from "@coffic/cosy-ui";
---

<div style="padding: 1rem;">
  <Button onclick="showAlertDialog('english-dialog')">
    Show English Dialog
  </Button>

  <AlertDialog
    message="This is an English confirmation dialog example"
    lang="en"
    id="english-dialog"
  />
</div>

<script setup lang="ts">
import { AlertDialog } from '@coffic/cosy-ui/vue';
import { ref } from 'vue';

const showDialog = ref(false);
</script>
<template>
    <div style="display: flex; flex-direction: column; gap: 1rem">
        <button @click="showDialog = true" class="cosy:btn cosy:btn-primary">
            Show English Dialog
        </button>
        <AlertDialog v-model="showDialog" message="This is an English confirmation dialog example" lang="en" />
    </div>
</template>

message

对话框显示的消息内容，支持任意文本内容。

这是一个基础的确认对话框示例

---
import { AlertDialog, Button } from '@coffic/cosy-ui';
---

<div style="padding: 1rem;">
    <Button onclick="showAlertDialog('basic-dialog')"> 显示确认对话框 </Button>

    <AlertDialog message="这是一个基础的确认对话框示例" id="basic-dialog" />
</div>

<script setup lang="ts">
import { AlertDialog } from '@coffic/cosy-ui/vue';
import { ref } from 'vue';

const showDialog = ref(false);
</script>
<template>
    <div style="display: flex; flex-direction: column; gap: 1rem">
        <button @click="showDialog = true" class="cosy:btn cosy:btn-primary">
            显示对话框
        </button>
        <AlertDialog v-model="showDialog" message="这是一条重要信息" />
    </div>
</template>

modelValue

控制对话框显示状态，支持 v-model 双向绑定（仅 Vue 版本）。

这是一个基础的确认对话框示例

---
import { AlertDialog, Button } from '@coffic/cosy-ui';
---

<div style="padding: 1rem;">
    <Button onclick="showAlertDialog('basic-dialog')"> 显示确认对话框 </Button>

    <AlertDialog message="这是一个基础的确认对话框示例" id="basic-dialog" />
</div>

<script setup lang="ts">
import { AlertDialog } from '@coffic/cosy-ui/vue';
import { ref } from 'vue';

const showDialog = ref(false);
</script>
<template>
    <div style="display: flex; flex-direction: column; gap: 1rem">
        <button @click="showDialog = true" class="cosy:btn cosy:btn-primary">
            显示对话框
        </button>
        <AlertDialog v-model="showDialog" message="这是一条重要信息" />
    </div>
</template>

Slots

default

无插槽内容，所有内容通过 message 属性传递。

搜索