toast弹框的作用

  • toast弹框顾名思义,就是为了弹出一个提示框,效果如图:

  • 使用toast弹框可以可用户带来更好的交互体验

toast弹框的使用

  • Toast组件

    • 制做出toast的样式以及出现的条件
<template>
<div class="toast" v-show="isShow">
<div>{{message}}</div>
</div>
</template> <script>
export default {
name: 'Toast',
data() {
return {
message: '',
isShow: false
}
},
methods: {
// 通过调用该方法可以设置弹框信息以及弹框持续的时间
show(message = '默认文字', duration = 2000) {
this.isShow = true
this.message = message
setTimeout(() => {
this.isShow = false
this.message = ''
}, duration)
}
}
}
</script> <style scoped>
.toast {
position: fixed;
top: 50%;
left: 50%;
color: #fff;
z-index: 999;
padding: 8px 10px;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.7);
}
</style>
  • 在vue原型上添加toast

    • 将toast元素挂载到body上
//index.js
import Toast from './Toast'
const obj = {} // install 是默认的方法。当外界在 use 这个组件的时候,就会调用本身的 install 方法(对外暴露一个install方法即可),同时传一个 Vue 这个类的参数。
obj.install = function(Vue) {
// 1.创建组件构造器
const ToastConstructor = Vue.extend(Toast)
// 2.news的方式,根据组件构造器,可以创建出来一个组件对象
const toast = new ToastConstructor()
// 3.将组件对象手动的挂载到某个一个元素上,此时,toast.$el对应的就是div了
toast.$mount(document.createElement('div'))
// 4.将这个div作为body的子元素添加进去
document.body.appendChild(toast.$el)
// 5.将toast对象作为vue的原型属性,便于之后的调用
Vue.prototype.$toast = toast
}
export default obj
  • 在main中安装toast插件
import toast from 'components/common/toast/index.js'

// 安装toast(吐司)插件,用于弹出一个提示
Vue.use(toast)
  • 使用toast弹框
this.$toast.show(res, 1500)

制作一个简单的toast弹框的更多相关文章

  1. TTabControl、TMemo组件(制作一个简单的多文本编辑框)

    TTabControl包含一列字符串标签的tabs 每个标签控制一个对象 首先创建一个TForm;接下来添加TTabControl组件和一个文件对话框TOpenDialog(用于添加文件),然后在TT ...

  2. layer —— 一个简单的jQuery弹出层插件

    layer的使用 4.24更新:注意:layer现在有旧版1.8.5版本和新版本3.0版本的,对应引入的JQ也要不同,相对应的JQ引入1.1和3.1,否则JQ会出问题 4.21更新: 解答4-19的问 ...

  3. 如何使用AEditor制作一个简单的H5交互页demo

    转载自:http://www.alloyteam.com/2015/06/h5-jiao-hu-ye-bian-ji-qi-aeditor-jie-shao/ 本教程演示如何使用AEditor制作一个 ...

  4. 【UWP开发】一个简单的Toast实现

    Toast简介 在安卓里Toast是内置原生支持,它是Android中用来显示显示信息的一种机制.它主要用于向用户显示提示消息,没有焦点,显示的时间有限,过一定的时间就会自动消失.在UWP中虽然没有原 ...

  5. [UWP 开发] 一个简单的Toast实现

    Toast简介 在安卓里Toast是内置原生支持,它是Android中用来显示显示信息的一种机制.它主要用于向用户显示提示消息,没有焦点,显示的时间有限,过一定的时间就会自动消失.在UWP中虽然没有原 ...

  6. PureMVC和Unity3D的UGUI制作一个简单的员工管理系统实例

    前言: 1.关于PureMVC: MVC框架在很多项目当中拥有广泛的应用,很多时候做项目前人开坑开了一半就消失了,后人为了填补各种的坑就遭殃的不得了.嘛,程序猿大家都不喜欢像文案策划一样组织文字写东西 ...

  7. 制作一个简单的WPF图片浏览器

    原文:制作一个简单的WPF图片浏览器 注:本例选自MSDN样例,并略有改动.先看效果: 这里实现了以下几个功能:1.  对指定文件夹下所有JPG文件进行预览2.  对选定图片进行旋转3.  对选定图片 ...

  8. 实例学习SSIS(一)--制作一个简单的ETL包

    原文:实例学习SSIS(一)--制作一个简单的ETL包 导读: 实例学习SSIS(一)--制作一个简单的ETL包 实例学习SSIS(二)--使用迭代 实例学习SSIS(三)--使用包配置 实例学习SS ...

  9. TensorFlow练习13: 制作一个简单的聊天机器人

    现在很多卖货公司都使用聊天机器人充当客服人员,许多科技巨头也纷纷推出各自的聊天助手,如苹果Siri.Google Now.Amazon Alexa.微软小冰等等.前不久有一个视频比较了Google N ...

随机推荐

  1. (数据科学学习手札112)Python+Dash快速web应用开发——表单控件篇(上)

    本文示例代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 这是我的系列教程Python+Dash快速web ...

  2. ch1_6_5求解旋转词问题

    import java.util.Scanner; public class ch1_6_5求解旋转词问题 { public static void main(String[] args) { // ...

  3. Java类集框架详细汇总-底层分析

    前言: Java的类集框架比较多,也十分重要,在这里给出图解,可以理解为相应的继承关系,也可以当作重要知识点回顾: Collection集合接口 继承自:Iterable public interfa ...

  4. Android Studio详解项目中的资源

    •目录结构 •作用 所有以 drawable 开头的文件都是用来放图片的: 所有以 mipmap 开头的文件都是用来放应用图标的: 所有以 value 开头的文件夹都是用来放字符串.样式.颜色等配置的 ...

  5. Golang+Protobuf+PixieJS 开发 Web 多人在线射击游戏(原创翻译)

    简介 Superstellar 是一款开源的多人 Web 太空游戏,非常适合入门 Golang 游戏服务器开发. 规则很简单:摧毁移动的物体,不要被其他玩家和小行星杀死.你拥有两种资源 - 生命值(h ...

  6. 使用Vscode 开发调试 C/C++ 项目

    需要安装的扩展 C/C++ 如果是远程 Linux上开发还需要安装 Remote Development 创建工作目录后,代码远程克隆... 省略.. 创建项目配置文件,主要的作用是代码智能提示,错误 ...

  7. 如何用 Electron + WebRTC 开发一个跨平台的视频会议应用

    在搭建在线教育.医疗.视频会议等场景时,很多中小型公司常常面临 PC 客户端和 Web 端二选一的抉择.Electron 技术的出现解决了这一难题,只需前端开发就能完成一个跨平台的 PC 端应用.本文 ...

  8. C#与Python交互方式

    前言: 在平时工作中,需求有多种实现方式:根据不同的需求可以采用不同的编程语言来实现.发挥各种语言的强项 如:Python的强项是:数据分析.人工智能等 .NET 开发桌面程序界面比Python更简单 ...

  9. 《机器学习Python实现_10_02_集成学习_boosting_adaboost分类器实现》

    一.简介 adaboost是一种boosting方法,它的要点包括如下两方面: 1.模型生成 每一个基分类器会基于上一轮分类器在训练集上的表现,对样本做权重调整,使得错分样本的权重增加,正确分类的样本 ...

  10. Blade模板引擎教程-常用语法格式

    打印变量或者默认值,这个语法会自动转义变量内容中的html标记,使得html标签原样输出Welcome, {{ $name or 'California' }} 打印变量原始内容,不进行转义的用法{! ...