jv3-alert
Version:
easy alert from assign by route by cdnagroup
83 lines (66 loc) • 1.46 kB
Markdown
# jv3-alert
A Vue 3 alert/dialog component.
## Features
* Various alert types (info, error, confirm, etc.)
* Customizable colors
* Modal animation
* Keyboard lock
## Installation
```bash
npm install jv3-alert
```
## Usage
In `main.ts`:
```typescript
import { createApp } from 'vue';
import JV3Alert from './jv3-alert';
const app = createApp(App);
app.use(JV3Alert);
app.mount('#app');
```
In your component:
```vue
<template>
<div>
<button @click="showAlert">Show Alert</button>
</div>
</template>
<script setup>
import { useJAlert } from "jv3-alert";
const jalert = useJAlert();
// or
import { inject } from 'vue';
const jalert = inject('jalert');
function alertMessage() {
jalert.alert({
title: "Alert !!",
message: "This is a custom alert message.",
onClose: () => {
console.log("Alert closed");
},
});
}
function confirmMessage() {
jalert.confirm("confirm", (result) => {
if (result) {
jalert.info("You clicked Yes", { title: "Confirmed", color: "green" });
return;
} else {
jalert.info("You clicked No", { color: "red", title: "Cancelled" });
}
});
}
function errorMessage() {
jalert.error({
title: "Error !!",
message: "This is a custom error message.",
onClose: () => {
console.log("Error closed");
},
});
}
</script>
```
