使用Vant如何完成各种Toast提示框

目录
  • 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提示成就好了

以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • vant中的toast轻提示实现代码

    在main.js中按需引入 import { Toast } from 'vant Vue.use(Toast) 页面中的methods中使用 send(name, img) { let msg = `${this.Cname}送${name}1`; this.$toast({ message: msg, icon: img }); }, 补充知识:Vant的Toast 轻提示API文档不准确解决方案 开发企业微信应用使用Vant组件库过程中,想要用到轻提示Toast,发现API文档无法使用:

  • 解决vant的Toast组件时提示not defined的问题

    按照官方文档引入全局Toast组件,在methods里面定义函数执行函数时产生了报错: //定义的函数 handleClick(){ Toast('点击提示') } 报错信息 [Vue warn]: Error in v-on handler: "ReferenceError: Toast is not defined" 解决方法: handleClick(){ this.$toast('点击提示') } 补充知识:vue+vant移动端遇到的那些问题 1.项目引用了lib-flexi

  • vue.js中toast用法及使用toast弹框的实例代码

    1.首先引入 import { Toast } from 'vant' 写个小列子 绑定一个click事件 2.写事件 在methods写方法 showToast() { this.$toast({ message: "今日签到+3", }) }, 3.效果图如下 一个简单的toast提示成就好了 下面通过实例代码看下vue 中使用 Toast弹框 import { ToastPlugin,ConfirmPlugin,AlertPlugin} from 'vux' Vue.use(To

  • 使用Vant如何完成各种Toast提示框

    目录 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提示

  • Android超实用的Toast提示框优化分享

    前言 相信每位Android开发者都用过Toast,都知道是弹出消息的.类似于js里面的alert,C#里面的MesageBox.当然android里面也有dialog,dialog是有焦点的,可与用户交互.而toast是没有焦点的,时间到了自动消失,不能回应用户的交互,下面就跟大家分享下Android中Toast提示框的优化方法. 先看下源码: public class Toast { public static final int LENGTH_SHORT = 0; public stati

  • IOS 仿Android吐司提示框的实例(分享)

    直接上代码 #import <UIKit/UIKit.h> @interface ShowToastView : UIView +(void)showToastView:(UIView *)uiview WithMessage:(NSString *)message; +(void)showToastViewShort:(UIView *)uiview WithMessage:(NSString *)message; +(void)showToastViewWithCostUpload:(UI

  • Android使用Toast显示消息提示框

    在前面的实例中,已经应用过Toast类来显示一个简单的提示框了.这次将对Toast进行详细介绍.Toast类用于在屏幕中显示一个消息提示框,该消息提示框没有任何控制按钮,并且不会获得焦点,经过一段时间后自动消失.通常用于显示一些快速提示信息,应用范围非常广泛. 使用Toast来显示消息提示框非常简单,只需要一下三个步骤: (1).创建一个Toast对象.通常有两种方法:一种是使用构造方式进行创建: Toast toast=new Toast(this); 另一种是调用Toast类的makeTex

  • flutter Toast实现消息提示框

    本文实例为大家分享了flutter Toast实现消息提示框的具体代码,供大家参考,具体内容如下 使用方法 //默认是显示在中间的 Toast.toast(context,msg: "中间显示的 "); Toast.toast(context,msg: "中间显示的 ",position: ToastPostion.center); Toast.toast(context,msg: "顶部显示的 Toast $_count",position:

  • vue 自定义提示框(Toast)组件的实现代码

    1.自定义 提示框 组件 src / components / Toast / index.js /** * 自定义 提示框( Toast )组件 */ var Toast = {}; var showToast = false, // 存储toast显示状态 showLoad = false, // 存储loading显示状态 toastVM = null, // 存储toast vm loadNode = null; // 存储loading节点元素 Toast.install = func

  • 微信小程序-消息提示框实例

    做Android的时候对toast是很熟悉的.微信小程序开发中toast也是重要的消息提示方式. 提示框: wx.showToast(OBJECT) 显示消息提示框 OBJECT参数说明: 示例代码: wx.showToast({ title: '成功', icon: 'success', duration: 2000 }) wx.hideToast() 隐藏消息提示框 wx.showToast({ title: '加载中', icon: 'loading', duration: 10000 }

  • Android开发技巧之永不关闭的Toast信息框(长时间显示而非系统关闭)

    Toast信息提示框之所以在显示一定时间后会自动关闭,是因为在系统中有一个Toast队列.系统会依次从队列中取(出队列)一个Toast,并显示它.在显示一段时间后,再关闭,然后再显示下一个Toast信息提示框.直到Toast队列中所有Toast都显示完为止.那么有些时候需要这个Toast信息提示框长时间显示,直到需要关闭它时通过代码来控制,而不是让系统自动来关闭Toast信息提示框.不过这个要求对于Toast本身来说有些过分,因为Toast类并没有提供这个功能.虽然如此,但方法总比问题多.通过一

  • Android 自定义一套 Dialog通用提示框 (代码库)

    做Android开发五年了,期间做做停停(去做后台开发,服务器管理),当回来做Android的时候,发现很生疏,好些控件以前写得很顺手,现在好像忘记些什么了,总要打开这个项目,打开那个项目,有时未必还找得到. 总结起来,还是源于没有好好做一个属于自己的代码库,把平时开发项目中一些自定义的控件,或一些耦合性很低的模块封装起来,或者平时比较少写博客.如果你是一个刚学会开发的程序猿,或者是有过好几年开发经验的大鸟,也该开始整理整理自己的代码,这也不枉此生敲代码的岁月,同时在面试中,也会给你带来不少印象

随机推荐