使用Vant完成各种Toast提示框

痛定思痛。 2024-04-19 07:09 68阅读 0赞

### 效果展示： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70 2][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70 3][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70 4][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70 5][]

### （1）使用前的需要安装Vant奥。[参考博客][Link 1] ###

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

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

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

<template>
      
      <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 [点击去查看][Link 2] ###

2020年01月04日18:13:50 更新补充

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190915102936602.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190915102745622.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20190915102804826.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20190915102825381.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20190915102842804.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/a61c38585d1f4aa9989cf45309092831.png
[Link 1]: https://blog.csdn.net/Miss_liangrm/article/details/100623853
[Link 2]: https://youzan.github.io/vant/#/zh-CN/toast%23options