Vue3警告提示（Alert）

**Vue3 警告提示（Alert）**

在 Vue3 中，警告提示是通过 `console.warn()` 或 `console.error()` 来实现的。然而，在某些情况下，我们可能需要显示一个更友好的警告提示给用户。这就是我们要讨论的内容。

###1. 使用 `alert` 函数最简单的方法就是使用 `alert` 函数来显示一个警告提示。例如：

javascript// 在 Vue3 中使用 alert 函数function showWarning() {
 alert('这是一个警告提示！');
}

javascript// 在 Vue3 中使用 confirm 函数function showWarning() {
 if (confirm('这是一个警告提示！')) {
 console.log('用户同意！');
 } else {
 console.log('用户不同意！');
 }
}

javascript// 在 Vue3 中使用 vue-notify 库import Notify from 'vue-notify';

export default {
 methods: {
 showWarning() {
 Notify({
 title: '警告提示',
 message: '这是一个警告提示！',
 type: 'warning'
 });
 }
 }
}

javascript// 在 Vue3 中自定义一个警告提示组件<template>
 <div class="warning-alert">
 <span>{{ message }}</span>
 <button @click="close">关闭</button>
 </div>
</template>

<script>
export default {
 props: ['message'],
 methods: {
 close() {
 this.$emit('close');
 }
 }
}
</script>

<style scoped>
.warning-alert {
 position: fixed;
 top:50%;
 left:50%;
 transform: translate(-50%, -50%);
 background-color: #fff;
 padding:20px;
 border-radius:10px;
 box-shadow:0010px rgba(0,0,0,0.1);
}

.warning-alert span {
 font-size:16px;
 color: #333;
}

.warning-alert button {
 background-color: #fff;
 border: none;
 padding:10px20px;
 font-size:14px;
 cursor: pointer;
}
</style>

javascript// 在 Vue3 中使用 useToast hookimport { useToast } from 'vue-toastify';

export default {
 setup() {
 const toast = useToast();

 function showWarning() {
 toast('这是一个警告提示！');
 }

 return {
 showWarning }
 }
}