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+iview实现文件上传
Nov 17 Vue.js
解决vue页面刷新,数据丢失的问题
Nov 24 Vue.js
Vue解决移动端弹窗滚动穿透问题
Dec 15 Vue.js
Vue组件简易模拟实现购物车
Dec 21 Vue.js
vue实现登录、注册、退出、跳转等功能
Dec 23 Vue.js
vue实现树状表格效果
Dec 29 Vue.js
Vue 修改网站图标的方法
Dec 31 Vue.js
vue实现一个获取按键展示快捷键效果的Input组件
Jan 13 Vue.js
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
vue项目多环境配置(.env)的实现
Jul 21 Vue.js
vue实现登陆页面开发实践
May 30 Vue.js
vue实现在data里引入相对路径
Jun 05 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
粗略计算在线时间,bug:ip相同
2006/12/09 PHP
PHP 面向对象 PHP5 中的常量
2010/05/05 PHP
php中用foreach来操作数组的代码
2011/07/17 PHP
关于URL最大长度限制的相关资料查证
2014/12/23 PHP
PHP实现获取客户端IP并获取IP信息
2015/03/17 PHP
php自定义函数实现二维数组按指定key排序的方法
2016/09/29 PHP
PHPMailer发送邮件
2016/12/28 PHP
一端时间轮换的广告
2006/06/26 Javascript
jquery下操作HTML控件的实现代码
2010/01/12 Javascript
jQuery实现可用于博客的动态滑动菜单
2015/03/09 Javascript
jQuery实现的导航下拉菜单效果
2016/07/04 Javascript
jQuery基于正则表达式的表单验证功能示例
2017/01/21 Javascript
详解vue组件化开发-vuex状态管理库
2017/04/10 Javascript
详解AngularJS 模块化
2017/06/14 Javascript
Bootstrap Table 搜索框和查询功能
2017/11/30 Javascript
python数据结构之图深度优先和广度优先实例详解
2015/07/08 Python
Python验证码识别的方法
2015/07/10 Python
Python实现的井字棋(Tic Tac Toe)游戏示例
2018/01/31 Python
pandas object格式转float64格式的方法
2018/04/10 Python
python3.x实现base64加密和解密
2019/03/28 Python
解决Pyinstaller 打包exe文件 取消dos窗口(黑框框)的问题
2019/06/21 Python
Tensorflow的梯度异步更新示例
2020/01/23 Python
基于keras 模型、结构、权重保存的实现
2020/01/24 Python
python实现FTP文件传输的方法(服务器端和客户端)
2020/03/20 Python
python读取hdfs并返回dataframe教程
2020/06/05 Python
python在linux环境下安装skimage的示例代码
2020/10/14 Python
利用CSS3实现毛玻璃效果示例源码
2016/09/25 HTML / CSS
详解HTML5表单新增属性
2016/12/21 HTML / CSS
从零实现一个自定义html5播放器的示例代码
2017/08/01 HTML / CSS
AE美国鹰日本官方网站: American Eagle Outfitters
2016/12/10 全球购物
巴黎卡诗美国官方网站:始于1964年的头发头皮护理专家
2017/07/10 全球购物
理肤泉加拿大官网:La Roche-Posay加拿大
2018/07/06 全球购物
世界上第一个水枕头:Mediflow
2018/12/06 全球购物
中专毕业生个人职业生涯规划
2014/02/19 职场文书
2015新年寄语(一句话)
2014/12/08 职场文书
哈姆雷特读书笔记
2015/06/29 职场文书