<template>
<div>
<van-button @click="showToast">显示轻提示</van-button>
</div>
</template>
<script>
export default {
methods: {
showToast() {
// 显示文本提示
this.$toast('这是一条提示信息');
// 或者显示加载中提示
this.$toast.loading({
message: '加载中...',
forbidClick: true, // 是否禁止背景点击
duration: 0 // 设置为 0 表示不自动关闭,需要手动调用 close 方法关闭
});
// 两秒后关闭加载中提示
setTimeout(() => {
this.$toast.clear();
}, 2000);
}
}
};
</script>
在上面的例子中,通过点击按钮触发 showToast 方法,然后使用 this.$toast 方法显示文本提示或加载中提示。this.$toast 方法支持多种类型的提示,比如文本提示、成功提示、加载中提示等。
确保你已经正确引入了 Vant 组件库,并按照其文档进行了配置。
转载请注明出处:http://www.zyzy.cn/article/detail/5676/Vant