El brindis de la biblioteca de componentes vant del proyecto vue mobile
Atributos específicos
<template>
<div>
<van-button type="primary" @click="handler1">基础提示</van-button>
<van-button type="primary" @click="handler2">加载提示</van-button>
<van-button type="primary" @click="handler3">成功提示</van-button>
<van-button type="primary" @click="handler4">失败提示</van-button>
<van-button type="primary" @click="handler5">自定义图标</van-button>
<van-button type="primary" @click="handler6">动态更新</van-button>
<!-- 自定义位置 position 一般居中 不做设置-->
</div>
</template>
<script>
import {
Toast, Button } from "vant";
export default {
components: {
vanButton: Button,
},
created() {
},
methods: {
handler1() {
Toast("基础提示");
},
handler2() {
Toast.loading({
message: "加载中...",
forbidClick: true,
});
},
handler3() {
Toast.success("成功提示");
},
handler4() {
Toast.fail("失败提示");
},
handler5() {
Toast({
message: "自定义图标",
icon: "like-o",
// icon: 'https://img01.yzcdn.cn/vant/logo.png',
});
},
handler6() {
const toast = Toast.loading({
duration: 0, // 持续展示 toast
forbidClick: true,
message: "倒计时 3 秒",
});
let second = 3;
const timer = setInterval(() => {
second--;
if (second) {
toast.message = `倒计时 ${
second} 秒`;
} else {
clearInterval(timer);
// 手动清除 Toast
Toast.clear();
}
}, 1000);
},
},
};
</script>
<style lang="scss" scoped>
</style>
efecto
