logo
English

导航菜单

Documents

AlertDialog

Introduction

The AlertDialog component is used to display simple confirmation dialogs with internationalization support and fade-in/fade-out animation effects.

Example

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

---
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

Custom CSS class name for overriding default styles.

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

---



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

Unique identifier for the dialog, used to control the dialog’s show and hide behavior through JavaScript (Astro version only).

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

---
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

Language setting that affects button text, supporting Chinese (zh) and English (en) languages.

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

The message content displayed in the dialog, supporting any text content.

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

---
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

Controls the dialog display state, supports v-model two-way binding (Vue version only).

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

---
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

No slot content, all content is passed through the message property.

搜索