<template>
<div>
<cube-button icon="cubeic-right" @click="goNext">Button With Icon</cube-button>
</div>
</template> <script>
export default {
methods:{
goNext(){
const toast = this.$createToast({
txt: 'Loading...', // 提示信息
type: 'correct', // type 字段决定了 Toast 的显示图标类型 txt纯文本常用
time: 3000, // 显示时间长短
maskClosable: true, // 点击蒙层是否隐藏
mask: true // mask 设置为 true 时会显示遮罩
})
toast.show() // 实例方法(显示)
setTimeout(() => {
toast.hide() // 实例方法(隐藏)加setTimeout原有 + 1s
console.log(11111) // 11111
}, 2000)
}
}
}
</script> <style> </style>

cube-ui按钮配合toast单例模式应用的更多相关文章

  1. 背水一战 Windows 10 (105) - 通知(Toast): 带按钮的 toast, 带输入的 toast(文本输入框,下拉选择框)

    [源码下载] 背水一战 Windows 10 (105) - 通知(Toast): 带按钮的 toast, 带输入的 toast(文本输入框,下拉选择框) 作者:webabcd 介绍背水一战 Wind ...

  2. Atitit.获取swing ui 按钮控件的id 与名字 与JPDA 调试体系

    Atitit.获取swing ui 按钮控件的id 与名字 与JPDA 调试体系 1. Swing Inspector是一个Java Swing/AWT用户界面分析和调试工具,功能与firebug类似 ...

  3. 单选复选按钮以及Toast学习笔记

    1:单选按钮是以组的形式呈现,xml布局文件中需要定义一个RadioGroup,然后在这个组内再定义RadioButton.在java代码中为该按钮添加监听时,需要用组名来引用对应的方法setOnCh ...

  4. unity中实现监听鼠标的进入和退出某一个UI按钮

    using UnityEngine; using System.Collections; using Assets.Code.myclass; using UnityEngine.UI; using ...

  5. IOS之UI -- 按钮UIButton的细节

    *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...

  6. 关于Cocos2d-x中UI按钮的定义

    1.要有两张不同状态的图片 2.定义一个MenuItemSprite的实例,把这两张图的Sprite实例放进MenuItemSprite的实例 3.把MenuItemSprite的实例放进Menu实例 ...

  7. Android应用Activity、Dialog、PopWindow、Toast窗体加入机制及源代码分析

    [工匠若水 http://blog.csdn.net/yanbober 转载烦请注明出处.尊重劳动成果] 1 背景 之所以写这一篇博客的原因是由于之前有写过一篇<Android应用setCont ...

  8. [UWP]创建一个进度按钮

    1. 前言 最近想要一个进度按钮. 传统上UWP上处理进度可以这样实现,首先是XAML,包括一个ProgressBar和一个按钮: <StackPanel Orientation="H ...

  9. vue UI框架

    一.pc端 element UI 饿了么UI支持vue2.x80分优点:组件的API方法.属性等封装的较为完善缺点:样式有些生硬,不够炫酷美观 N3 N3支持vue2.x70分优点:组件操作几乎都有动 ...

随机推荐

  1. JPA 报错:Page 2 of 1 containing UNKNOWN instances

    JPA 中,page是从0开始,不是从1开始: 因此,将用户输入的从1开始的page页码减1: PageRequest pageRequest = PageRequest.of(page - 1, p ...

  2. Spring Boot 中的事务管理

    希望能在发生异常的时候被回退,这时候就可以使用事务让它实现回退,做法非常简单,我们只需要在test函数上添加@Transactional注解即可. 使用@Transactional注解来声明一个函数需 ...

  3. 【Android Studio】Gradle

    Plugin version Required Gradle version 1.0.0 - 1.1.3 2.2.1 - 2.3 1.2.0 - 1.3.1 2.2.1 - 2.9 1.5.0 2.2 ...

  4. 最后一个对象属性后边不要加豆号的bug,血淋淋的教训啊,模块化开发IE7下的严重错误,养成好习惯

    最近总是写滚动图效果,重复的劳动后,决定写一个滚动图的封装插件.结果写完后在其他浏览器都可以用,却IE7下毫无反应.反复测试各种检查后,发现竟然是在参数对象最后一个属性后多加了个逗号,结果就死在了IE ...

  5. linux内核中的文件描述符(二)--socket和文件描述符

    http://blog.csdn.net/ce123_zhouwei/article/details/8459730 Linux内核中的文件描述符(二)--socket和文件描述符 Kernel ve ...

  6. The Architectural Principles Behind Vrbo’s GraphQL Implementation

    转自:https://medium.com/expedia-group-tech/graphql-component-architecture-principles-homeaway-ede8a58d ...

  7. 大厂HR面试必备ES6中的深入浅出面试题知识点

    ESMAScript6简介,ES6是JavaScript语言的下一代标准,目的是让JavaScript语言可以写复杂的大型应用程序,成为企业级语言.那么ECMAScript和JavaScript的关系 ...

  8. Python研究

    听说Python是种高级语言,故打算研究一下,看看高级在哪 学习资源:https://www.liaoxuefeng.com/wiki/1016959663602400 由于上面所示的网站对Pytho ...

  9. MinHook库的使用 64位下,过滤LoadLibraryExW

    目录 一丶简介 1.minHook库的下载以及安装. 二丶使用MinHook库,过滤LoadLibraryExW 2.1编写X64测试程序. 2.2使用MinHook库 2.3完整HOOK代码 Min ...

  10. nginx 正向代理配置

    需求场景:从以下俩张图可以比较直观的理解正向代理的作用(在其他文章中会表示为“http代理”,注意当前文档的配置不支持https代理) Nginx正向代理配置文件: server{ listen de ...