Dialog 对话框
<template>
<div>
<van-button @click="showDialog">打开对话框</van-button>
</div>
</template>
<script>
import { ref } from 'vue';
import { Dialog } from 'vant';
export default {
components: {
[Dialog.name]: Dialog,
},
setup() {
const showDialog = () => {
Dialog.alert({
title: '提示',
message: '这是一个对话框',
});
};
return {
showDialog,
};
},
};
</script>
Toast 轻提示
<template>
<div>
<van-button @click="showToast">打开轻提示</van-button>
</div>
</template>
<script>
import { ref } from 'vue';
import { Toast } from 'vant';
export default {
components: {
[Toast.name]: Toast,
},
setup() {
const showToast = () => {
Toast('这是一个轻提示');
};
return {
showToast,
};
},
};
</script>
Notify 通知
<template>
<div>
<van-button @click="showNotify">打开通知</van-button>
</div>
</template>
<script>
import { ref } from 'vue';
import { Notify } from 'vant';
export default {
components: {
[Notify.name]: Notify,
},
setup() {
const showNotify = () => {
Notify('这是一个通知');
};
return {
showNotify,
};
},
};
</script>
这些是使用Vant3的一些反馈组件的简单例子。你可以根据你的需求进行配置和使用。确保你的项目已经正确配置Vant3，并根据实际情况调整代码。
转载请注明出处：http://www.zyzy.cn/article/detail/5733/Vant