cube-ui按钮配合toast单例模式应用
<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单例模式应用的更多相关文章
- 背水一战 Windows 10 (105) - 通知(Toast): 带按钮的 toast, 带输入的 toast(文本输入框,下拉选择框)
[源码下载] 背水一战 Windows 10 (105) - 通知(Toast): 带按钮的 toast, 带输入的 toast(文本输入框,下拉选择框) 作者:webabcd 介绍背水一战 Wind ...
- Atitit.获取swing ui 按钮控件的id 与名字 与JPDA 调试体系
Atitit.获取swing ui 按钮控件的id 与名字 与JPDA 调试体系 1. Swing Inspector是一个Java Swing/AWT用户界面分析和调试工具,功能与firebug类似 ...
- 单选复选按钮以及Toast学习笔记
1:单选按钮是以组的形式呈现,xml布局文件中需要定义一个RadioGroup,然后在这个组内再定义RadioButton.在java代码中为该按钮添加监听时,需要用组名来引用对应的方法setOnCh ...
- unity中实现监听鼠标的进入和退出某一个UI按钮
using UnityEngine; using System.Collections; using Assets.Code.myclass; using UnityEngine.UI; using ...
- IOS之UI -- 按钮UIButton的细节
*:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...
- 关于Cocos2d-x中UI按钮的定义
1.要有两张不同状态的图片 2.定义一个MenuItemSprite的实例,把这两张图的Sprite实例放进MenuItemSprite的实例 3.把MenuItemSprite的实例放进Menu实例 ...
- Android应用Activity、Dialog、PopWindow、Toast窗体加入机制及源代码分析
[工匠若水 http://blog.csdn.net/yanbober 转载烦请注明出处.尊重劳动成果] 1 背景 之所以写这一篇博客的原因是由于之前有写过一篇<Android应用setCont ...
- [UWP]创建一个进度按钮
1. 前言 最近想要一个进度按钮. 传统上UWP上处理进度可以这样实现,首先是XAML,包括一个ProgressBar和一个按钮: <StackPanel Orientation="H ...
- vue UI框架
一.pc端 element UI 饿了么UI支持vue2.x80分优点:组件的API方法.属性等封装的较为完善缺点:样式有些生硬,不够炫酷美观 N3 N3支持vue2.x70分优点:组件操作几乎都有动 ...
随机推荐
- P2220 [HAOI2012]容易题[小学数学]
题目描述 为了使得大家高兴,小Q特意出个自认为的简单题(easy)来满足大家,这道简单题是描述如下: 有一个数列A已知对于所有的A[i]都是1~n的自然数,并且知道对于一些A[i]不能取哪些值,我们定 ...
- Cause: com.mysql.cj.jdbc.exceptions.MysqlDataTruncation: Data truncation: Incorrect date value
Cause: com.mysql.cj.jdbc.exceptions.MysqlDataTruncation: Data truncation: Incorrect date value: '154 ...
- 1062 Error 'Duplicate entry '1438019' for key 'PRIMARY'' on query
mysql主从库同步错误:1062 Error 'Duplicate entry '1438019' for key 'PRIMARY'' on querymysql主从库在同步时会发生1062 La ...
- 使用python处理selenium中的获取元素属性
# 获取我的订单元素class属性值 get_class_name = driver.find_element_by_link_text('我的订单').get_attribute('class') ...
- 项目Beta冲刺(团队)——05.24(2/7)
项目Beta冲刺(团队)--05.24(2/7) 格式描述 课程名称:软件工程1916|W(福州大学) 作业要求:项目Beta冲刺(团队) 团队名称:为了交项目干杯 作业目标:记录Beta敏捷冲刺第2 ...
- react native redux 草稿
Provider > Provider > 使组件层级中的 方法都能够获得 Redux store.正常情况下,你的根组件应该嵌套在 Provider 中才能使用 方法. 如果你真的不想把 ...
- RabbitMQ六种队列模式-路由模式
前言 RabbitMQ六种队列模式-简单队列RabbitMQ六种队列模式-工作队列RabbitMQ六种队列模式-发布订阅RabbitMQ六种队列模式-路由模式 [本文]RabbitMQ六种队列模式-主 ...
- day39线程
复习: C/S架构: 客户端 服务器模式 B/S架构: 浏览器 服务器模式 B/S架构的客户端对PC机的性能要求比较低.统一了应用的接口 B/S架构隶属于C/S架构 TCP UDP的区 ...
- [RN] React Native 使用开源库 react-native-image-crop-picker 实现图片选择、图片剪裁
React Native 使用开源库 react-native-image-crop-picker 实现图片选择.图片剪裁 该库可以实现启动本地相册和照相机来采集图片,并且提供多选.图片裁剪等功能,支 ...
- 插入排序;至少要比较N(N-1)/2次;N表示元素个数
<script type="text/javascript"> //冒泡排序:至少要比较N(N-1)/2次:N表示元素个数 function get(){ var nu ...