vue提示框toast
时间: 2023-09-25 11:11:24 浏览: 103
基于Vue的Toast提示框
在Vue中使用提示框toast可以使用第三方库,比如`vue-toastification`。安装该库后,可以在Vue组件中使用以下代码来显示一个简单的提示框:
```vue
<template>
<div>
<button @click="showToast">Show Toast</button>
</div>
</template>
<script>
import { useToast } from 'vue-toastification'
export default {
setup() {
const toast = useToast()
const showToast = () => {
toast.success('Hello World!')
}
return {
showToast
}
}
}
</script>
```
这里使用了`useToast`钩子函数来创建`toast`对象,然后在`showToast`函数中调用`toast.success`方法来显示一个成功提示框。在实际使用中,可以根据需要调用不同的方法来显示不同类型的提示框。
阅读全文