最新消息:站点添加了一些不太友好的内容,请见谅...

Vue 移动端 一个 toast 小组件

若思若想 onlyling 2387浏览 0评论

Vue 移动端 一个 toast 小组件

灵感来源 SUI Mobile

下载

复制整个文件夹(vue-toast)到对应的项目。

代码:https://github.com/onlyling/some-demo/tree/master/vue-toast

使用

import Vue from 'vue'
import Toast from 'your path /vue-toast'

Vue.use(Toast)

// new 之前使用
Vue.prototype.$toast('你要显示的文字') // 弹出层2秒后消失
Vue.prototype.$toast('你要显示的文字', 5 * 1000) // 弹出层5秒后消失

// 某个组件中使用

this.$toast('你要显示的文字')

this.$toast('你要显示的文字', 5 * 1000)

思路

创建一个弹出层,N秒后消失,然后删除DOM,可能自己有点小洁癖,所以要删了DOM,还原原来的样子。

整个弹出、隐藏的效果都是CSS 3完成,所以,才会在添加激活样式的时候做了一个延迟,要不然,就会很生硬的弹出来。

转载请注明:OnlyLing-WEB前端开发者 » Vue 移动端 一个 toast 小组件

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址