基本用法：
<template>
<van-button @click="showToast">显示 Toast</van-button>
</template>
<script>
export default {
methods: {
showToast() {
this.$toast('这是一条提示');
}
}
};
</script>
在上述代码中，通过调用 $toast 方法，可以在页面中显示一条简单的提示信息。
自定义位置：
<template>
<van-button @click="showCustomToast">显示自定义位置 Toast</van-button>
</template>
<script>
export default {
methods: {
showCustomToast() {
this.$toast({
message: '自定义位置提示',
position: 'bottom' // 设置提示信息的位置，支持 'top'、'bottom'、'middle'
});
}
}
};
</script>
通过传递一个对象作为参数，可以配置更多的选项，例如 position 来指定提示信息的位置。
自定义持续时间：
<template>
<van-button @click="showCustomDurationToast">显示自定义持续时间 Toast</van-button>
</template>
<script>
export default {
methods: {
showCustomDurationToast() {
this.$toast({
message: '自定义持续时间提示',
duration: 2000 // 设置提示信息持续显示的时间，单位为毫秒
});
}
}
};
</script>
通过设置 duration 属性，可以自定义提示信息的持续时间。
加载中提示：
<template>
<van-button @click="showLoadingToast">显示加载中 Toast</van-button>
</template>
<script>
export default {
methods: {
showLoadingToast() {
const toast = this.$toast.loading({
message: '加载中...',
duration: 0, // 设置 duration 为 0 表示一直显示，直到手动关闭
});
// 模拟异步操作
setTimeout(() => {
toast.clear();
}, 2000);
}
}
};
</script>
通过调用 $toast.loading 方法，可以显示一个加载中的提示，可以设置 duration 为 0 表示一直显示，直到手动关闭。
以上是一些 Vant3 Toast 轻提示组件的基本用法。查阅 Vant3 的官方文档能够获取更详细的信息、配置选项和示例代码：[Vant3 Toast 轻提示文档](https://vant-contrib.gitee.io/vant/v3/#/zh-CN/toast)。
转载请注明出处：http://www.zyzy.cn/article/detail/5715/Vant