用于轻量级反馈或提示，不会打断用户操作。
基本使用
轻提示的基本用法
html
<iui-toast ref="toast"></iui-toast>
<script setup>
import { ref } from "vue";
const toast = ref();
onMounted(() => {
toast.value.show("Tips");
});
</script><iui-toast ref="toast"></iui-toast>
<script setup>
import { ref } from "vue";
const toast = ref();
onMounted(() => {
toast.value.show("Tips");
});
</script>显示位置
Toast 可以显示在 顶部、中间、底部，默认显示在中间。
可以通过 position 属性设置显示位置。
html
<iui-toast ref="toast" position="top"></iui-toast>
<!-- or -->
<iui-toast ref="toast"></iui-toast>
<script setup>
import { ref } from "vue";
const toast = ref();
onMounted(() => {
toast.value.show({
message: "Tips",
position: "top",
});
});
</script><iui-toast ref="toast" position="top"></iui-toast>
<!-- or -->
<iui-toast ref="toast"></iui-toast>
<script setup>
import { ref } from "vue";
const toast = ref();
onMounted(() => {
toast.value.show({
message: "Tips",
position: "top",
});
});
</script>带状态的提示
Toast 除了基本的提示，还额外内置了三种状态提示，分别是 success、error、loading，
可以通过 type 设置提示类型。
html
<iui-toast ref="toast"></iui-toast>
<script setup>
import { ref } from "vue";
const toast = ref();
onMounted(() => {
toast.value.show({
message: "Success tips",
type: "success",
});
});
</script><iui-toast ref="toast"></iui-toast>
<script setup>
import { ref } from "vue";
const toast = ref();
onMounted(() => {
toast.value.show({
message: "Success tips",
type: "success",
});
});
</script>加载中提示
Toast 还内置了 showLoading 和 hideLoading 方法。用于显示和隐藏加载中提示。
html
<iui-toast ref="toast"></iui-toast>
<script setup>
import { ref } from "vue";
const toast = ref();
onMounted(() => {
toast.value.showLoading("Loading...");
});
</script><iui-toast ref="toast"></iui-toast>
<script setup>
import { ref } from "vue";
const toast = ref();
onMounted(() => {
toast.value.showLoading("Loading...");
});
</script>API
<Toast>props<Toast>methods