Skip to content

ScAlert

ScAlert(또는 this.$util.alert)은 사용자가 지정한 메시지를 브라우저 팝업 형태로 표시하는 유틸리티 알림 기능을 제공합니다. 확인 버튼 클릭 시 추가 콜백을 실행할 수 있습니다.


✅ 기본 사용법

vue
<sc-button @click="showAlert">알림 버튼</sc-button>

<script setup>
// Composition API를 사용하여 util 훅을 가져옵니다.
import { useUtil } from '@/plugins/util.js';
const util = useUtil();

// 알림을 표시하는 함수
const showAlert = () => {
  util.alert('알림입니다.');
};
</script>

✨ 사용 예시 모음

▸ 콜백 함수 실행

결과 :
vue
<template>
  <div class="mt-5">
    <sc-button @click="showAlertWithCallback">버튼</sc-button>
    <div class="mt-5 text-sm">결과 : {{ result }}</div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
// Composition API를 사용하여 util 훅을 가져옵니다.
import { useUtil } from '@/plugins/util.js';
const util = useUtil();

const result = ref('');
// 콜백 함수가 있는 알림을 표시하는 함수
const showAlertWithCallback = () => {
  result.value = 'OPEN';
  util.alert('알람입니다.', () => {
    // 확인 클릭 후 실행
    result.value = 'CLOSE';
  });
};
</script>

🛠️ 메서드

이름매개변수설명
alertmessage: string
callback?: Function
메시지를 표시하고, 확인 시 콜백을 실행합니다.