封装一个简单showToast组件 / 自定义toast组件

父组件：

<tempalte><view><toast ref="mytoast"></toast></view>
</template><script>methods:{func() {// 绑定子组件，调用子组件内的方法this.$refs.mytoast.showtoast( '成功' )}
</script>

子组件：

<template><view class="container" v-if="Flag"><view class="content">{{content}}</view></view>
</template><script>//定时器标识timervar timer = nullexport default {name: "mytoast",data() {return {Flag: false,content: ''};},methods: {showtoast( val ) {this.content = val// 每次清除上一次timer，若无也没影响clearTimeout( timer )this.Flag= true// 添加定时器，1秒后消失timer = setTimeout( () => {this.Flag= false}, 1000 )}}}
</script><style scoped>.container {color: white;padding: 20rpx 20rpx;background-color: rgb(77, 77, 77);border-top-left-radius: 5px;border-top-right-radius: 5px;border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}.content {width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;}
</style>

这里只是封装了一个功能很简单的showToast，有需要的话可以自己定义Toast出现的时间或者自行添加出现退出的动画效果。

封装一个简单showToast组件 / 自定义toast组件相关推荐

基于ForkJoin构建一个简单易用的并发组件
2019独角兽企业重金招聘Python工程师标准>>> 基于ForkJoin构建一个简单易用的并发组件在实际的业务开发中,需要用到并发编程的知识,实际使用线程池来异步执行任务的场景 ...
android视频用什么组件,一个简单的移动端视频组件的实现
一个简单的移动端视频组件的实现据说移动端需要个视频组件,然后自己尝试了一下,不知道能不能用上,有问题希望大家提出来,(>= 这里还是采用了标签video的方式来实现的视频播放. 当然video ...
Qt 封装一个简单的LED(指示灯)控件
Qt 封装一个简单的LED(指示灯)控件 1,效果~ 所以这个简单的LED类可以自定义大小~ 可以点亮或熄灭,也可以闪烁
Vue封装一个简单轻量的上传文件组件
一.之前遇到的一些问题项目中多出有上传文件的需求,使用现有的UI框架实现的过程中,不知道什么原因,总会有一些莫名其妙的bug.比如用某上传组件,明明注明(:multiple="false& ...
【一个简单的vue公式编辑器组件】
vue 一个简单的公式编辑器组件示例一个基于vue实现数据统计公式的基本功能. 新建一个 formula.vue 组件, 使用 <formula ref="formulaPage& ...
使用Python 封装一个简单的Mysql工具类
pymysql操作mysql,虽然简单,但每次都要链接数据库,获取游标,关闭游标,关闭链接.这些操作无技术含量,还要重复编写!!想一想不如封装一个DBUtil,来提高开发效率. 要编写工具类首先要把公 ...
如何用C++封装一个简单的数据流操作类（附源码），从而用于网络上的数据传输和解析？
历史溯源由于历史原因,我们目前看到的大部分的网络协议都是基于ASCII码这种纯文本方式,也就是基于字符串的命令行方式,比如HTTP.FTP.POP3.SMTP.Telnet等.早期操作系统UNIX( ...
Vue 2.x折腾记 - (17) 基于Ant Design Vue 封装一个配置式的表单组件
前言写了个类似上篇搜索的封装,但是要考虑的东西更多. 具体业务比展示的代码要复杂,篇幅太长就不引入了. 效果图 2019-04-25 添加了下拉多选的渲染,并搜索默认过滤文本而非值简化了渲染的子组 ...
一个简单的VUE选择城市组件
首先看下效果: ps: 请忽略上面的水印该组件基于vue + iview搭建而成,可以根据需求自行修改,接下来就是组件的整体的说明了: 一.目录结构这是一个常规的VUE的目录的结构,我们使用的文件 ...

封装一个简单showToast组件 / 自定义toast组件

封装一个简单showToast组件 / 自定义toast组件相关推荐

最新文章

热门文章