目录
  • Vant完成各种Toast提示框
    • 效果展示
  • Vant Toast用法
    • 1.首先引入
    • 2.写事件
    • 3.效果图如下

Vant完成各种Toast提示框

效果展示

（1）使用前的需要安装Vant奥。

（2）在main.js里面引入Toast

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

（3）在页面使用：（根据步骤代码可以运行奥 Toast.vue文件）（上面截图的，在下面代码都有栗子奥）。

<template>   <!-- Toast提示 -->   <div id="toast">     <van-button plain type="primary" @click="toToast">普通文字提示</van-button>     <van-button plain type="primary" @click="toLoading">加载转圈提示</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">自定义图标提示</van-button>     <van-button plain type="primary" @click="toCustomImage">自定义图片提示</van-button>   </div> </template>

<script>   export default {     data() {       return {         msg: ''       }     },     // 引入 Toast 组件后，会自动在 Vue 的 prototype 上挂载 $toast 方法，便于在组件内调用。     methods: {       // 普通文字提示       toToast() {         this.$toast({           message:'我是需要提示的文字',           position:'top'         });       },         // 加载转圈提示       toLoading() {         this.$toast.loading({           mask: true,           message: '加载中...'         });       },         // 成功提示       toSuccessTip() {         this.$toast.success({           message:'成功的提示文案',         })       },         // 失败提示       toFailTip() {         this.$toast.fail({           message:'失败的提示文案'         })       },         //   自定义图标       toCustomIcon() {         this.$toast({           icon: 'star-o', // 找到自己需要的图标           message: '我是提示文字'         })       },         //自定义图片提示       toCustomImage() {         this.$toast({           icon:'https://www.baidu.com/favicon.ico',           message:'我是提示文字'         })       }       },     mounted() {       }   } </script>

  

<style> </style>

（4）Toast的相关API和Options 点击去查看

更新补充

position 里面的高度不局限与 top bottom等，也可设置数值，例如： 

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

Vant Toast用法

题外话就不多讲了，这是围绕vue.js写的，爱上vue.js

1.首先引入

import { Toast } from 'vant'

写个小列子

绑定一个click事件

2.写事件

在methods写方法

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

3.效果图如下

一个简单的toast提示成就好了

以上为个人经验，希望能给大家一个参考，也希望大家多多支持本网站。

您可能感兴趣的文章:

  • vant中的toast轻提示实现代码
  • 解决vant的Toast组件时提示not defined的问题
  • vue.js中toast用法及使用toast弹框的实例代码