vue实现Toast组件轻提示


Posted in Vue.js onApril 10, 2022

vue实现Toast轻提示

首先创建一个toast组件

<template>
  <div class="context" v-show="isshow">
    <span class="tip">{{ text }}</span>
  </div>
</template>
<script>
export default {
  name: "Toast",
  props: {
    isshow: {
      type: Boolean,
    },
    text: {
      type: String,
    },
  },
  watch: {
    isshow(val) {
      if (val === true) {
        setTimeout(() => {
          this.isshow = false;
        }, 3000);
      }
    },
  },
};
</script>
<style lang="less" scoped>
.context {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  .tip {
    background-color: rgba(40, 40, 40, 0.8);
    color: aliceblue;
    font-size: 0.6rem;
    padding: 0.2rem;
    border-radius: 0.1rem;
  }
}
</style>

在js文件中引入组件

import Toast from "./Toast.vue";
let NewToast = {
  install: function (Vue) {
    //创建vue插件,官方地址https://cn.vuejs.org/v2/guide/plugins.html
    let newToast = Vue.extend(Toast); //创建vue构造器,官方地址https://cn.vuejs.org/v2/api/#Vue-extend
    let toast = new newToast(); //创建实例
    document.body.appendChild(toast.$mount().$el); //挂载
    Vue.prototype.$Toast = function (text) {
      toast.isshow = true; // 传入props
      toast.text = text; // 传入props
    };
  },
};
export { NewToast };

在入口文件中引入上面这个js文件

import { NewToast } from "@/components/index.js";
Vue.use(NewToast);

下面就可以在view里全局使用了

but() {
    this.$Toast("Are you ok ?");
},

效果图

vue实现Toast组件轻提示

这样一个简单的轻提示就好了,觉得样式丑的话,可以自己调一下。

使用vant的Toast轻提示报错

记录一下今天使用vant中的Toast 轻提示,按照官方文档中的方法去使用发现报错使用不了。

文档中是这样写的

Toast.success('成功文案');
Toast.fail('失败文案');

main.js中引用vant后直接调用Toast报错。

实际使用是这样写

this.$toast.success("成功文案");
this.$toast.fail("失败文案");

和调用路由一样需要this点出来。

以上为个人经验,希望能给大家一个参考,也希望大家多多支持三水点靠木。 

Vue.js 相关文章推荐
Vue用mixin合并重复代码的实现
Nov 27 Vue.js
Vue router安装及使用方法解析
Dec 02 Vue.js
vue3.0实现插件封装
Dec 14 Vue.js
如何在vue中使用HTML 5 拖放API
Jan 14 Vue.js
Vue实现多页签组件
Jan 14 Vue.js
vue-video-player 断点续播的实现
Feb 01 Vue.js
vue使用echarts画组织结构图
Feb 06 Vue.js
Vue3.0写自定义指令的简单步骤记录
Jun 27 Vue.js
Vue图片裁剪组件实例代码
Jul 02 Vue.js
Vue的生命周期一起来看看
Feb 24 Vue.js
vue route新窗口跳转页面并且携带与接收参数
Apr 10 Vue.js
解决vue自定义组件@click点击失效问题
Apr 30 Vue.js
vue自定义右键菜单之全局实现
Apr 09 #Vue.js
vue判断按钮是否可以点击
Apr 09 #Vue.js
VUE之图片Base64编码使用ElementUI组件上传
Apr 09 #Vue.js
vue如何实现关闭对话框后刷新列表
Apr 08 #Vue.js
vue实现列表垂直无缝滚动
Apr 08 #Vue.js
vue3引入highlight.js进行代码高亮的方法实例
vue中的可拖拽宽度div的实现示例
You might like
SONY SRF-40W电路分析
2021/03/02 无线电
Windows下PHP5和Apache的安装与配置
2006/09/05 PHP
使用MaxMind 根据IP地址对访问者定位
2006/10/09 PHP
控制打印时页眉角的代码
2007/02/08 Javascript
jquery调用wcf并展示出数据的方法
2011/07/07 Javascript
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
2013/05/19 Javascript
js对象转json数组的简单实现案例
2014/02/28 Javascript
jQuery Mobile操作HTML5的常用函数总结
2016/05/17 Javascript
基于JavaScript实现淘宝商品广告效果
2017/08/10 Javascript
Vue单文件组件基础模板小结
2017/08/10 Javascript
利用vue和element-ui设置表格内容分页的实例
2018/03/02 Javascript
关于Google发布的JavaScript代码规范你要知道哪些
2018/04/04 Javascript
vue下使用nginx刷新页面404的问题解决
2019/08/02 Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
2020/02/15 Javascript
video.js添加自定义组件的方法
2020/12/09 Javascript
[00:56]PWL开团时刻DAY8——追追追追追!
2020/11/09 DOTA
[01:09:19]DOTA2-DPC中国联赛 正赛 VG vs Aster BO3 第二场 2月28日
2021/03/11 DOTA
github配置使用指南
2014/11/18 Python
python实现基本进制转换的方法
2015/07/11 Python
解决Python传递中文参数的问题
2015/08/04 Python
解决Pycharm 包已经下载,但是运行代码提示找不到模块的问题
2019/08/31 Python
Python实现FLV视频拼接功能
2020/01/21 Python
Python cookie的保存与读取、SSL讲解
2020/02/17 Python
Python读写压缩文件的方法
2020/07/30 Python
轻松掌握CSS3中的字体大小单位rem的使用方法
2016/05/24 HTML / CSS
Waterford加拿大官方网站:世界著名的水晶杯品牌
2016/11/01 全球购物
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/01/13 面试题
美发活动策划书
2014/01/14 职场文书
公司薪酬管理制度
2014/01/31 职场文书
捐助贫困学生倡议书
2014/05/16 职场文书
企业财务总监岗位职责
2015/04/03 职场文书
宝葫芦的秘密观后感
2015/06/11 职场文书
行政处罚告知书
2015/07/01 职场文书
python实现三阶魔方还原的示例代码
2021/04/28 Python
关于vue-router-link选择样式设置
2022/04/30 Vue.js
java版 简单三子棋游戏
2022/05/04 Java/Android