基本用法
1. 安装 Vant4 和 Toast 组件：
确保你已经安装了 Vant4 和相关的样式：
npm install vant@next
2. 引入 Toast 组件：
在需要使用 Toast 的组件中，引入 Toast 组件：
<template>
<button @click="showToast">显示 Toast</button>
</template>
<script>
import { ref } from 'vue';
import { Toast } from 'vant';
export default {
methods: {
showToast() {
Toast('这是一条提示信息');
}
}
};
</script>
常见配置选项
以下是一些常见的 Toast 配置选项：
- message： 提示文本内容。
<template>
<button @click="showToast">显示 Toast</button>
</template>
<script>
import { ref } from 'vue';
import { Toast } from 'vant';
export default {
methods: {
showToast() {
Toast({
message: '这是一条自定义文本',
duration: 2000 // 显示时长，单位毫秒，默认为 2000 毫秒
});
}
}
};
</script>
- duration： 显示时长，单位毫秒，默认为 2000 毫秒。
<template>
<button @click="showToast">显示 Toast</button>
</template>
<script>
import { ref } from 'vue';
import { Toast } from 'vant';
export default {
methods: {
showToast() {
Toast({
message: '这是一条提示信息',
duration: 3000 // 显示时长为 3000 毫秒
});
}
}
};
</script>
- position： Toast 的位置，可选值为 'top'、'middle'、'bottom'，默认为 'middle'。
<template>
<button @click="showToast">显示 Toast</button>
</template>
<script>
import { ref } from 'vue';
import { Toast } from 'vant';
export default {
methods: {
showToast() {
Toast({
message: '这是一条提示信息',
position: 'top' // 显示在顶部
});
}
}
};
</script>
- onClose： Toast 关闭时的回调函数。
<template>
<button @click="showToast">显示 Toast</button>
</template>
<script>
import { ref } from 'vue';
import { Toast } from 'vant';
export default {
methods: {
showToast() {
Toast({
message: '这是一条提示信息',
onClose: () => {
console.log('Toast 关闭了');
}
});
}
}
};
</script>
这只是 Vant4 中 Toast 轻提示组件的一些基本用法和配置选项。你可以根据项目需要，查阅 Vant4 官方文档以获取更多详细信息和高级用法。
转载请注明出处：http://www.pingtaimeng.com/article/detail/5798/Vant