仿照Element-ui实现一个简易的$message方法


Posted in Javascript onSeptember 14, 2020

前言

在需要对用户进行提示时,有时会遇到这种场景:使用模态框提示太过硬核,使用toast提示又太轻了,这时候可以选择使用页面顶部滑下的消息提示。本文仿照element-ui的实现一个类似$message的方法。

思路梳理

首先我们来看下element-ui中消息提示的效果是怎么样的,找些思路。

仿照Element-ui实现一个简易的$message方法

从图中我们可以看消息提示是可以同时显示多条的,并且定位看起来都是fixed,居中展示,我们自然可以想到使用数组来存储这些消息的信息,并且根据每一条提示消息的显示隐藏更改每一项的top值,然后就是加一些动画(使用transition)以及细节处理了。

组件编写

新建两个组件MsgBox.vue和Msg.vue,前者负责收集和处理传入的消息数据(如:{type: 'success', message: '提示消息'}),对数组进行一定处理后,再将每一项传给Msg.vue展示。

MsgBox组件

ts部分

我们首先在MsgBox.vue中编写方法处理数组的方法addMsg、resetTop和clear,其中addMsg负责收集消息数据,给每一个msg添加一个负责控制该条消息显示隐藏的属性show;resetTop负责控制消息距顶距离的属性top及各条消息的显示隐藏;clear负责当数组中所有消息都处于隐藏状态时将消息数组清空:

private addMsg(msg: Msg) {
 this.msgs.push({...msg, show: true})
 this.resetTop()
}

private resetTop(ind1 = -1) {
 this.clear()
 let ind = 0
 const msgs = this.msgs.map((msg: MsgInfo, i: number) => {
  if (i === ind1) {
   msg.show = false
  }
  if (msg.show) {
   msg.top = 20 + ind * 72
   ind++
  }
  return msg
 })
 this.msgs = [...msgs]
}

private clear() {
 clearTimeout(this.timer)
 this.timer = setTimeout(() => {
  const allFalse = this.msgs.some((t) => t.show)
  if (!allFalse) {
   this.msgs = []
  }
 }, 1000)
}

每次有新消息加入,或者原有消息隐藏时都会触发resetTop方法,用来重新计算各条消息的位置。

template部分

html部分就比较简单了,只是遍历msgs数组,将每一项传给子组件Msg。

<template>
<div>
  <msg-box v-for="(msg,i) of msgs" :msg="msg" :key="i" :ind="i" @resetTop="resetTop" :msgs="msgs"></msg-box>
</div>
</template>

这里传入数组msgs的原因是在每次调用resetTop更改数组时,子组件监听不到msg发生的变化,只好将msgs传入,直接从msgs中取相关数据,如果哪位大佬看出问题了希望可以指点下。

Msg组件

ts部分

子组件中逻辑较少,主要是在组件挂载时启动一个定时器,在一定时间后通过emit触发父组件中的resetTop方法将组件关闭。 另外还有一些根据参数获取当前消息信息的computed方法。

private get info() {
 const msgs = this.msgs as MsgInfo[]
 return msgs[this.ind]
}

private get boxClass() {
 const type = this.msg.type
 return type ? `box-item-${type}` : ''
}

@Emit('resetTop')
private close() {
  return this.ind
}

private mounted() {
 if (this.msg.delay !== 0) {
 const delay = parseInt(this.msg.delay) || 3000
 setTimeout(() => {
  this.close()
 }, delay)
 }
}

template部分

视图部分也比较简单,主要是使用了vue自带的transition组件实现的动画效果,注意要加上appear属性才有入场动画效果。

<template>
 <transition name="msg" appear>
  <div :class="['box-item', boxClass]" v-if="info.show" :style="{top: info.top + 'px'}">
   <div class="msg-container">
   <i :class="['iconfont', iconClass]"></i>
    {{ info.msg }}
   </div>
   <span @click="close">
    <i class="iconfont icon-cc-close"></i>
   </span>
  </div>
 </transition>
</template>

css部分

样式部分主要是借鉴了element-ui的样式,以及使用了animation做了简单的动画效果

.box-item {
 height: 16px;
 position: fixed;
 min-width: 380px;
 // element-ui抄来的样式
 border-width: 1px;
 border-style: solid;
 border-color: #EBEEF5;
 position: fixed;
 left: 50%;
 transform: translateX(-50%);
 background-color: #edf2fc;
 transition: opacity .3s,transform .4s,top .4s;
 padding: 15px 15px 15px 20px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 &-success{
  background-color: #f0f9eb;
  border-color: #e1f3d8;
 }
 &-warning {
  background-color: #fdf6ec;
  border-color: #faecd8;
 }
 &-error {
  background-color: #fef0f0;
  border-color: #fde2e2;
 }
}

.msg-container {
  display: flex;
  align-items: center;
  .iconfont {
   margin-right: 5px;
  }
}

.msg-enter-active {
 animation: anim 0.5s;
}

.msg-leave-active {
 animation: anim 0.5s reverse;
}

@keyframes anim {
 0% {
  opacity: 0;
  transform: translate(-50%, -200%);
 }

 100% {
  opacity: 1;
  transform: translate(-50%, 0);
 }
}

到此为止,除css代码外不到150行实现了消息提示组件。

将组件中方法放到Vue原型链上

但是我们该怎么调用呢,参考element-ui中的使用方式this.$message,是把组件的入口方法挂载到Vue的原型链上,并且在此之前应该实例化了该组件,接下来我们就要实例化组件,然后将组件实例挂载到body上,并且将实例上的入口方法加在Vue原型链上。

这里使用到了我们公司一位大佬参考react写的vue中的传送门方法portal,主要思路是将组件挂载新的Vue上,并实例化,然后再将新实例挂载到body下面(这样也防止DOM层级嵌套产生的zIndex无法覆盖等问题),最后将指定方法添加到Vue原型链上。

import Vue, {VueConstructor} from "vue";

interface Param {
 cmp: VueConstructor & {instance?: () => any};
 name: string;
 method?: string;
 target?: string | HTMLElement;
 props?: any;
}

export default function portal(param: Param){
  let {cmp, name, method, target = document.body, props = {}} = param
  if(typeof target === 'string') target = document.querySelector(target) as HTMLElement;
  method = method || 'show'
  cmp.instance = ()=>{
    let instance = new Vue({
      render(h){
        return h(cmp, {props})
      }
    })

    instance.$mount();

    // 将instance.$el放到想放的位置
    (target as HTMLElement).appendChild(instance.$el);
    return instance.$children[0];
  }
  const instance = cmp.instance()
  
  Vue.prototype[`$${name}`] = instance[method];
}

接着,在Vue项目入口文件中使用传送门方法将Msg组件挂载上去就可以在组件中使用了。

portal({
 name: 'msg',
 cmp: MsgBox,
 method: 'addMsg'
})

到此这篇关于仿照Element-ui实现一个简易的$message方法的文章就介绍到这了,更多相关Element-ui $message内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
使用Grunt.js管理你项目的应用说明
Apr 24 Javascript
jquery插件推荐 jquery.cookie
Nov 09 Javascript
js给网页加上背景音乐及选择音效的方法
Mar 03 Javascript
JavaScript中判断两个字符串是否相等的方法
Jul 07 Javascript
JavaScript中的事件委托及好处
Jul 12 Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
Oct 17 Javascript
微信小程序 石头剪刀布实例代码
Jan 04 Javascript
bootstrap输入框组使用方法
Feb 07 Javascript
vue解决跨域路由冲突问题思路解析
Nov 03 Javascript
使用D3.js创建物流地图的示例代码
Jan 27 Javascript
详解从Vue-router到html5的pushState
Jul 21 Javascript
node.js实现简单的压缩/解压缩功能示例
Nov 05 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
Sep 14 #Javascript
JavaScript 如何计算文本的行数的实现
Sep 14 #Javascript
JavaScript实现串行请求的示例代码
Sep 14 #Javascript
浅谈JavaScript 声明提升
Sep 14 #Javascript
详解vue 中 scoped 样式作用域的规则
Sep 14 #Javascript
详解JavaScript 高阶函数
Sep 14 #Javascript
vue实现简单计算商品价格
Sep 14 #Javascript
You might like
php 多关键字 高亮显示实现代码
2012/04/23 PHP
深入PHP许愿墙模块功能分析
2013/06/25 PHP
PHP error_log()将错误信息写入一个文件(定义和用法)
2013/10/25 PHP
PHP 面向对象程序设计(oop)学习笔记 (二) - 静态变量的属性和方法及延迟绑定
2014/06/12 PHP
php通过function_exists检测函数是否存在的方法
2015/03/18 PHP
codeigniter发送邮件并打印调试信息的方法
2015/03/21 PHP
PHP实现清除MySQL死连接的方法
2016/07/23 PHP
解决Laravel blade模板转义html标签的问题
2019/09/03 PHP
JS获取dom 对象 ajax操作 读写cookie函数
2009/11/18 Javascript
javascript 模拟JQuery的Ready方法实现并出现的问题
2009/12/06 Javascript
加载jQuery后$冲突的解决办法
2010/07/09 Javascript
jquery select(列表)的操作(取值/赋值)
2011/03/16 Javascript
javascript自定义函数参数传递为字符串格式
2014/07/29 Javascript
javascript转换日期字符串为Date日期对象的方法
2015/02/13 Javascript
AngularJs动态加载模块和依赖注入详解
2016/01/11 Javascript
JS对象的深度克隆方法示例
2017/03/16 Javascript
微信小程序 自定义Toast实例代码
2017/06/12 Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
2017/10/04 Javascript
JavaScript中的垃圾回收与内存泄漏示例详解
2019/05/02 Javascript
JS使用new操作符创建对象的方法分析
2019/05/30 Javascript
js实现贪吃蛇小游戏(加墙)
2020/07/31 Javascript
JavaScript交换变量常用4种方法解析
2020/09/02 Javascript
[54:41]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VGJ.T VS paiN
2018/03/31 DOTA
python使用正则表达式分析网页中的图片并进行替换的方法
2015/03/26 Python
Python工程师必考的6个经典面试题
2020/06/28 Python
土木工程个人自荐信范文
2013/11/30 职场文书
大型会议接待方案
2014/03/01 职场文书
《特殊的葬礼》教学反思
2014/04/27 职场文书
大学生精神文明先进个人事迹材料
2014/05/02 职场文书
保护环境建议书300字
2014/05/13 职场文书
2014年法制宣传日活动方案
2014/11/02 职场文书
网络销售员岗位职责
2015/04/11 职场文书
担保书格式范文
2015/09/22 职场文书
2015年幼儿园师德师风建设工作总结
2015/10/23 职场文书
2016入党心得体会范文
2016/01/06 职场文书
Redis5之后版本的高可用集群搭建的实现
2021/04/27 Redis