vue的toast弹窗组件实例详解


Posted in Javascript onMay 14, 2018

相信普通的vue组件大家都会写, 定义 -> 引入 -> 注册 -> 使用 ,行云流水,一气呵成,但是如果我们今天是要自定义一个弹窗组件呢?

首先,我们来分析一下弹窗组件的特性(需求):

0. 轻量 --一个组件小于 1Kib (实际打包完不到0.8k)

1.一般都是多处使用 --需要解决每个页面重复引用+注册

1.一般都是跟js交互的 --无需 在 <template> 里面写 <toast :show="true" text="弹窗消息"></toast>

今天,我们就抱着上面2个需求点,来实现一个基于vue的toast弹窗组件,下图是最终完成的效果图.

vue的toast弹窗组件实例详解 

一. 先写一个普通的vue组件

文件位置 /src/toast/toast.vue

<template>
 <div class="wrap">我是弹窗</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;
 }
</style>

二. 在我们需要使用的页面引入组件,方便看效果和错误

<template>
 <div id="app">
 <toast></toast>
 </div>
</template>
<script>
 import toast from './toast/toast'
 export default {
 components: {toast},
 }
</script>

vue的toast弹窗组件实例详解 

三. 实现动态加载组件

可以看到,已经显示出一个静态的弹出层了,接下来我们就来看看如何实现动态弹出.

我们先在 /src/toast/ 目录下面,新建一个 index.js , 然后在index.js里面,敲入以下代码(由于该代码耦合比较严重,所以就不拆开一行一行讲解了,改成行内注释)

文件位置 /src/toast/index.js

import vue from 'vue'
// 这里就是我们刚刚创建的那个静态组件
import toastComponent from './toast.vue'
// 返回一个 扩展实例构造器
const ToastConstructor = vue.extend(toastComponent)
// 定义弹出组件的函数 接收2个参数, 要显示的文本 和 显示时间
function showToast(text, duration = 2000) {
 // 实例化一个 toast.vue
 const toastDom = new ToastConstructor({
 el: document.createElement('div'),
 data() {
 return {
 text:text,
 show:true
 }
 }
 })
 // 把 实例化的 toast.vue 添加到 body 里
 document.body.appendChild(toastDom.$el)
 // 过了 duration 时间后隐藏
 setTimeout(() => {toastDom.show = false} ,duration)
}
// 注册为全局组件的函数
function registryToast() {
 // 将组件注册到 vue 的 原型链里去,
 // 这样就可以在所有 vue 的实例里面使用 this.$toast()
 vue.prototype.$toast = showToast
}

export default registryToast

附一个传送门vue.extend 官方文档

四. 试用

到这里,我们已经初步完成了一个可以全局注册和动态加载的toast组件,接下来我们来试用一下看看

在vue的入口文件(脚手架生成的话是 ./src/main.js ) 注册一下组件
文件位置 /src/main.js

import toastRegistry from './toast/index'

// 这里也可以直接执行 toastRegistry()
Vue.use(toastRegistry)
我们稍微修改一下使用方式,把 第二步 的引用静态组件的代码,改成如下
<template>
 <div id="app">
 <input type="button" value="显示弹窗" @click="showToast">
 </div>
</template>

<script>
 export default {
 methods: {
 showToast () {
 this.$toast('我是弹出消息')
 }
 }
 }
</script>

vue的toast弹窗组件实例详解 

可以看到,我们已经 不需要 在页面里面 引入 跟 注册 组件,就可以直接使用 this.$toast() 了.

五. 优化

现在我们已经初步实现了一个弹窗.不过离成功还差一点点,缺少一个动画,现在的弹出和隐藏都很生硬.

我们再对 toast/index.js 里的 showToast 函数稍微做一下修改(有注释的地方是有改动的)

文件位置 /src/toast/index.js

function showToast(text, duration = 2000) {
 const toastDom = new ToastConstructor({
 el: document.createElement('div'),
 data() {
 return {
 text:text,
 showWrap:true, // 是否显示组件
 showContent:true // 作用:在隐藏组件之前,显示隐藏动画
 }
 }
 })
 document.body.appendChild(toastDom.$el)

 // 提前 250ms 执行淡出动画(因为我们再css里面设置的隐藏动画持续是250ms)
 setTimeout(() => {toastDom.showContent = false} ,duration - 1250)
 // 过了 duration 时间后隐藏整个组件
 setTimeout(() => {toastDom.showWrap = false} ,duration)
}

然后,再修改一下toast.vue的样式

文件位置 /src/toast/toast.vue

<template>
 <div class="wrap" 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弹窗组件实例详解 

总结

  1. vue.extend 函数可以生成一个 组件构造器 可以用这个函数构造出一个 vue组件实例
  2. 可以用 document.body.appendChild() 动态的把组件加到 body里面去
  3. vue.prototype.$toast = showToast 可以在全局注册组件
  4. 显示动画比较简单,隐藏动画必须要在隐藏之前预留足够的动画执行时间
  5. 本文源码地址 在这里
  6. 以上都不重要,重要的是 给本文来个 star

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

Javascript 相关文章推荐
jQuery Ajax方法调用 Asp.Net WebService 的详细实例代码
Apr 27 Javascript
基于jquery的图片轮播 tab切换组件
Jul 19 Javascript
多次注册事件会导致一个事件被触发多次的解决方法
Aug 12 Javascript
node.js中的path.extname方法使用说明
Dec 09 Javascript
AngularJs 动态加载模块和依赖
Sep 15 Javascript
jQuery实现自动调用和触发某个事件的方法
Nov 18 Javascript
jquery pagination分页插件使用详解(后台struts2)
Jan 22 Javascript
基于Bootstrap分页的实例讲解(必看篇)
Jul 04 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
Feb 05 Javascript
利用vue.js实现被选中状态的改变方法
Feb 08 Javascript
详解如何模拟实现node中的Events模块(通俗易懂版)
Apr 15 Javascript
Electron + vue 打包桌面操作流程详解
Jun 24 Javascript
Vue页面骨架屏注入方法
May 13 #Javascript
浅谈在node.js进入文件目录的问题
May 13 #Javascript
解决node修改后需频繁手动重启的问题
May 13 #Javascript
垃圾回收器的相关知识点总结
May 13 #Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
May 13 #Javascript
深入理解js 中async 函数的含义和用法
May 13 #Javascript
如何更好的编写js async函数
May 13 #Javascript
You might like
PHP中的正规表达式(一)
2006/10/09 PHP
php在window iis的莫名问题的测试方法
2013/05/14 PHP
PHP设计模式之注册树模式分析
2018/01/26 PHP
PHP安全之register_globals的on和off的区别
2020/07/23 PHP
动态改变textbox的宽高的js
2006/10/26 Javascript
Javascript 模式实例 观察者模式
2009/10/24 Javascript
使用原生javascript创建通用表单验证——更锋利的使用dom对象
2011/09/13 Javascript
jQuery的选择器中的通配符使用介绍
2014/03/20 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
2015/06/01 Javascript
jQuery实现向下滑出的二级菜单效果实例
2015/08/22 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
2016/11/28 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
2016/12/06 Javascript
easyUI combobox实现联动效果
2017/01/17 Javascript
JS基于面向对象实现的多个倒计时器功能示例
2017/02/28 Javascript
angular中实现li或者某个元素点击变色的两种方法
2017/07/27 Javascript
vue中如何实现pdf文件预览的方法
2018/07/12 Javascript
Vue瀑布流插件的使用示例
2018/09/19 Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
2019/04/30 Javascript
vue使用vant中的checkbox实现全选功能
2020/11/17 Vue.js
[46:00]Ti4 冒泡赛第二轮LGD vs C9 2
2014/07/14 DOTA
[16:19]教你分分钟做大人——风暴之灵
2015/03/11 DOTA
[43:03]完美世界DOTA2联赛PWL S2 PXG vs Magma 第二场 11.21
2020/11/24 DOTA
[01:52]PWL S2开团时刻第四期——DOTA2成语故事
2020/12/03 DOTA
python实现在pickling的时候压缩的方法
2014/09/25 Python
详解python开发环境搭建
2016/12/16 Python
python学习开发mock接口
2019/04/28 Python
关于不懂Chromedriver如何配置环境变量问题解决方法
2019/06/12 Python
python3 os进行嵌套操作的实例讲解
2020/11/19 Python
python实现简单猜单词游戏
2020/12/24 Python
如果Session Bean得Remove方法一直都不被调用会怎么样
2012/07/14 面试题
文职个人求职信范文
2013/09/23 职场文书
食品行业求职人的自我评价
2014/01/19 职场文书
节能减排倡议书
2014/04/15 职场文书
大学生英语演讲稿
2014/04/24 职场文书
最新的离婚协议书范本!
2019/07/02 职场文书
PyCharm 安装与使用配置教程(windows,mac通用)
2021/05/12 Python