1. Toast 提示框
<template>
<div>
<van-button @click="showToast">显示 Toast</van-button>
</div>
</template>
<script>
import { Toast } from 'vant';
export default {
methods: {
showToast() {
Toast('这是一个提示框');
},
},
};
</script>
2. Dialog 弹出框
<template>
<div>
<van-button @click="showDialog">显示 Dialog</van-button>
</div>
</template>
<script>
import { Dialog } from 'vant';
export default {
methods: {
showDialog() {
Dialog.alert({
title: '弹出框标题',
message: '这是一个弹出框',
});
},
},
};
</script>
3. Notify 通知
<template>
<div>
<van-button @click="showNotify">显示 Notify</van-button>
</div>
</template>
<script>
import { Notify } from 'vant';
export default {
methods: {
showNotify() {
Notify('这是一条通知');
},
},
};
</script>
4. Loading 加载中
<template>
<div>
<van-button @click="showLoading">显示 Loading</van-button>
</div>
</template>
<script>
import { Loading } from 'vant';
export default {
methods: {
showLoading() {
const loading = Loading({
message: '加载中...',
duration: 0, // 设置 duration 为 0，表示一直显示，直到手动关闭
});
// 模拟异步操作
setTimeout(() => {
loading.clear(); // 关闭 Loading
}, 2000);
},
},
};
</script>
这些是一些基本的使用示例。你可以根据实际需求，进一步配置和定制这些反馈组件。确保在你的项目中正确引入了 Vant UI 组件库，并按照文档中的方式进行配置。
转载请注明出处：http://www.zyzy.cn/article/detail/5668/Vant