import { Toast } from 'vant';
Vue.use(Toast);

<template>
? <!-- Toast提示 -->
? <div id="toast">
? ? <van-button plain type="primary" @click="toToast">普通文字提示</van-button>
? ? <van-button plain type="primary" @click="toLoading">加載轉(zhuǎn)圈提示</van-button>
? ? <van-button plain type="primary" @click="toSuccessTip">成功提示</van-button>
? ? <van-button plain type="primary" @click="toFailTip">失敗提示</van-button>
? ? <van-button plain type="primary" @click="toCustomIcon">自定義圖標(biāo)提示</van-button>
? ? <van-button plain type="primary" @click="toCustomImage">自定義圖片提示</van-button>
? </div>
</template>

<script>
? export default {
? ? data() {
? ? ? return {
? ? ? ? msg: ''
? ? ? }
? ? },
? ? // 引入 Toast 組件后，會(huì)自動(dòng)在 Vue 的 prototype 上掛載 $toast 方法，便于在組件內(nèi)調(diào)用。
? ? methods: {
? ? ? // 普通文字提示
? ? ? toToast() {
? ? ? ? this.$toast({
? ? ? ? ? message:'我是需要提示的文字',
? ? ? ? ? position:'top'
? ? ? ? });
? ? ? },
?
? ? ? // 加載轉(zhuǎn)圈提示
? ? ? toLoading() {
? ? ? ? this.$toast.loading({
? ? ? ? ? mask: true,
? ? ? ? ? message: '加載中...'
? ? ? ? });
? ? ? },
?
? ? ? // 成功提示
? ? ? toSuccessTip() {
? ? ? ? this.$toast.success({
? ? ? ? ? message:'成功的提示文案',
? ? ? ? })
? ? ? },
?
? ? ? // 失敗提示
? ? ? toFailTip() {
? ? ? ? this.$toast.fail({
? ? ? ? ? message:'失敗的提示文案'
? ? ? ? })
? ? ? },
?
? ? ? // ? 自定義圖標(biāo)
? ? ? toCustomIcon() {
? ? ? ? this.$toast({
? ? ? ? ? icon: 'star-o', // 找到自己需要的圖標(biāo)
? ? ? ? ? message: '我是提示文字'
? ? ? ? })
? ? ? },
?
? ? ? //自定義圖片提示
? ? ? toCustomImage() {
? ? ? ? this.$toast({
? ? ? ? ? icon:'https://www.baidu.com/favicon.ico',
? ? ? ? ? message:'我是提示文字'
? ? ? ? })
? ? ? }
?
? ? },
? ? mounted() {
?
? ? }
? }
</script>

<style>
</style>

this.$toast({
    message:'我是需要提示的文字',
    position:'200px'   // 彈框的位置可以自己設(shè)置
});

import { Toast } from 'vant'

showToast() {
                this.$toast({
                    message: "今日簽到+3",
                  })
      },