vue的toast弹窗组件实例详解(2)

<template> <div v-if="showWrap" :class="showContent ?'fadein':'fadeout'">{{text}}</div> </template> <style scoped> .wrap{ position: fixed; left: 50%; top:50%; background: rgba(0,0,0,.35); padding: 10px; border-radius: 5px; transform: translate(-50%,-50%); color:#fff; } .fadein { animation: animate_in 0.25s; } .fadeout { animation: animate_out 0.25s; opacity: 0; } @keyframes animate_in { 0% { opacity: 0; } 100%{ opacity: 1; } } @keyframes animate_out { 0% { opacity: 1; } 100%{ opacity: 0; } } </style>

大功告成,一个toast组件初步完成

vue的toast弹窗组件实例详解

 

总结

vue.extend 函数可以生成一个 组件构造器 可以用这个函数构造出一个 vue组件实例

可以用 document.body.appendChild() 动态的把组件加到 body里面去

vue.prototype.$toast = showToast 可以在全局注册组件

显示动画比较简单,隐藏动画必须要在隐藏之前预留足够的动画执行时间

本文源码地址 在这里

以上都不重要,重要的是 给本文来个 star

以上所述是小编给大家介绍的vue的toast弹窗组件实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/3f44b5470431b05564d1daf13319f621.html