仿照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 相关文章推荐
ASP中Sub和Function的区别说明
Aug 30 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
Dec 11 Javascript
使用简洁的jQuery方法实现隔行换色功能
Jan 02 Javascript
Mac OS X 系统下安装和部署Egret引擎开发环境
Sep 03 Javascript
jQuery中Form相关知识汇总
Jan 06 Javascript
JS实现超炫网页烟花动画效果的方法
Mar 02 Javascript
JQuery中ajax方法访问web服务实例
Jul 18 Javascript
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
Aug 10 Javascript
jQuery实现移动端滑块拖动选择数字效果
Dec 24 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
Dec 04 Javascript
bootstrap配合Masonry插件实现瀑布式布局
Jan 18 Javascript
JavaScript正则替换HTML标签功能示例
Mar 02 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构造函数与析构函数用法示例
2016/09/28 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
PHP PDOStatement::bindValue讲解
2019/01/30 PHP
PHP使用OB缓存实现静态化功能示例
2019/03/23 PHP
php写入文件不覆盖的实例讲解
2019/09/17 PHP
使用laravel指定日志文件记录任意日志
2019/10/17 PHP
PHP连接MySQL数据库的三种方式实例分析【mysql、mysqli、pdo】
2019/11/04 PHP
javascript dom 基本操作小结
2010/04/11 Javascript
服务器端的JavaScript脚本 Node.js 使用入门
2012/03/07 Javascript
js控制的遮罩层实例介绍
2013/05/29 Javascript
第六章之辅组类与响应式工具
2016/04/25 Javascript
基于Bootstrap实现图片轮播效果
2016/05/22 Javascript
JavaScript动态添加css样式和script标签
2016/07/19 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
2016/08/01 Javascript
微信小程序 swiper组件轮播图详解及实例
2016/11/16 Javascript
node.js的事件机制
2017/02/08 Javascript
jquery实现一个全局计时器(商城可用)
2017/06/30 jQuery
react-router v4如何使用history控制路由跳转详解
2018/01/09 Javascript
Vue Element 分组+多选+可搜索Select选择器实现示例
2018/07/23 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
2020/05/27 Javascript
Python使用正则匹配实现抓图代码分享
2015/04/02 Python
Python模拟登录验证码(代码简单)
2016/02/06 Python
python使用标准库根据进程名如何获取进程的pid详解
2017/10/31 Python
Python实现打印螺旋矩阵功能的方法
2017/11/21 Python
TensorFLow用Saver保存和恢复变量
2018/03/10 Python
Python叠加两幅栅格图像的实现方法
2019/07/05 Python
python 监控logcat关键字功能
2020/09/04 Python
莫斯科购买书籍网站:Book24
2020/01/12 全球购物
大学生毕业求职简历的自我评价
2013/10/24 职场文书
一年级学生期末评语
2014/04/21 职场文书
工作收入证明模板
2014/10/10 职场文书
客房领班岗位职责
2015/02/11 职场文书
2015新学期开学寄语
2015/02/26 职场文书
开学第一周日记(三篇范文)
2019/08/23 职场文书
Pytorch GPU内存占用很高,但是利用率很低如何解决
2021/06/01 Python
MySQL Server 层四个日志
2022/03/31 MySQL