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设计一个日历表
Dec 03 Vue.js
Vue在H5 项目中使用融云进行实时个人单聊通讯
Dec 14 Vue.js
浅析vue中的nextTick
Dec 28 Vue.js
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 Vue.js
如何在 Vue 中使用 JSX
Feb 14 Vue.js
Vue实现下拉加载更多
May 09 Vue.js
详解Vue的sync修饰符
May 15 Vue.js
vue Element-ui表格实现树形结构表格
Jun 07 Vue.js
vue-router中hash模式与history模式的区别
Jun 23 Vue.js
前端vue+express实现文件的上传下载示例
Feb 18 Vue.js
三种方式清除vue路由跳转router-link的历史记录
Apr 10 Vue.js
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 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
PHP文件上传实例详解!!!
2007/01/02 PHP
浅析application/x-www-form-urlencoded和multipart/form-data的区别
2014/06/22 PHP
老版本PHP转义Json里的特殊字符的函数
2015/06/08 PHP
PHP实现简易用户登录系统
2020/07/10 PHP
删除重复数据的算法
2006/11/23 Javascript
jquery随意添加移除html的实现代码
2011/06/21 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
2012/12/27 Javascript
jquery 关于event.target使用的几点说明介绍
2013/04/26 Javascript
js写的评论分页(还不错)
2013/12/23 Javascript
js时钟翻牌效果实现代码分享
2020/07/31 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
2016/09/06 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
2016/12/14 Javascript
Angular-Touch库用法示例
2016/12/22 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
2017/02/08 Javascript
基于Vue的ajax公共方法(详解)
2018/01/20 Javascript
在vue里面设置全局变量或数据的方法
2018/03/09 Javascript
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
2020/04/09 Javascript
python实现人人网登录示例分享
2014/01/19 Python
Python wxPython库消息对话框MessageDialog用法示例
2018/09/03 Python
python处理两种分隔符的数据集方法
2018/12/12 Python
Tensorflow模型实现预测或识别单张图片
2019/07/19 Python
cProfile Python性能分析工具使用详解
2019/07/22 Python
如何通过python实现人脸识别验证
2020/01/17 Python
购买美国制造的相框和画框架:Picture Frames
2018/08/14 全球购物
爱尔兰旅游网站:ebookers.ie
2020/01/24 全球购物
住房公积金接收函
2014/01/09 职场文书
学子宴答谢词
2014/01/25 职场文书
2014年三八妇女节活动总结
2014/03/01 职场文书
小学生关于梦想的演讲稿
2014/08/22 职场文书
乌镇导游词
2015/02/02 职场文书
南湾猴岛导游词
2015/02/09 职场文书
实习班主任自我评价
2015/03/11 职场文书
2015年政治教研组工作总结
2015/07/22 职场文书
六年级数学教学反思
2016/02/16 职场文书
pytorch 一行代码查看网络参数总量的实现
2021/05/12 Python
Python 数据结构之十大经典排序算法一文通关
2021/10/16 Python