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分优点:组件操作几乎都有动 ...
随机推荐
- pip下载加速
安装pqi pip install pqi pqi回车 pqi ls pqi tuna pqi show pip install --upgrade pqi git链接 https://github. ...
- Mockito 学习资料
Mockito 学习资料 网址 单元测试指南:Mockito https://blinkfox.github.io/2018/11/15/hou-duan/java/dan-yuan-ce-shi-z ...
- vue实现分页组件
创建pagination.vue /* * 所需参数 * total Number 总页数 * current Number 当前页面下标 * pageSize Number 页面显示条数 * siz ...
- Ofbiz项目学习——阶段性小结——服务返回结果
一.返回成功 1.在.DispatcherReturnDemoService类中编写服务[returnSuccess],内容如下: /** * 返回成功结果 * @param dctx * @para ...
- reactNative 获取组件高、宽、位置等信息
import {findNodeHandle, UIManager} from 'react-native' layout(ref) { const handle = findNodeHandle(r ...
- 硬币游戏1——打表&&记忆化搜索
题目 Alice和Bo在玩这样一个游戏,给定 $k$ 个数字 $a_1, a_2,..,a_k$.一开始有 $x$ 枚硬币,Alice和Bob轮流取硬币.每次所取的硬币的枚数一定要在 $k$ 个数当中 ...
- 验证码破解 | Selenium模拟登陆12306
12306官网登录的验证码破解比较简单,验证码是常规的点触类型验证码,使用超级鹰识别率比较高. 思路: (1)webdriver打开浏览器: (2)先对整个屏幕截屏,通过标签定位找到验证码图片,并定位 ...
- [RN] React Native 键盘管理 在Android TextInput遮盖,上移等问题解决办法
React Native 键盘管理 在Android TextInput遮盖,上移等问题解决办法 解决办法: 打开android工程,在AndroidManifest.xml中配置如下: <ac ...
- Ubuntu 下安装 Qt Designer
1. apt-get install qt5-designer 2.终端下输入designer,显示: designer: could not exec '/usr/lib/x86_64-linux- ...
- Cloud-init原理
Ubuntu修改主机名后,重启自动恢复原来的主机名? 这是因为Ubuntu18.10上,默认安装并启动了cloud-init, 需要停止它的四个服务进程,才可以使用传统的方式修改主机名. cloud- ...