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

来源:脚本之家  责任编辑:小易  

mian.js里怎么引入2113就怎么用比如a.js里想用elementUI的组件就5261这样import ElementUI from "element-ui";ElementUI.Message ({    title: '警告',    message: '网页还没下载完4102毕,请稍等一下再操作1653',    type: 'warning'});,在jsp中使用js中的设2113置属性,进而获得5261session保存的属性4102值,实例如下:1653session设置:session.setAttribute("username",username);session.setAttribute("password",password);session获取:username=session.getAttribute("username");password=session.getAttribute("password");本回答被网友采纳www.zgxue.com防采集请勿采集本网。

前言

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

在main.js里面使用Vue.component()应注册之后就可以在其他组件里直接引用了

思路梳理

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

{ data: { showcom: false } methods: { onclick: function () { this.showcom = true; } } } Vue.js(读音 /vjuː/, 类似于view)是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心

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

下面的alert输出的数据是this.result.prId,取出的的是原来的数据,并不是data中传过来的数据,你在alert前面加一条: this.result = data.result.prId;

组件编写

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

详细描述一下,是三级选择器吗,如果是,直接在elementui官网有实例

MsgBox组件

给客户做了一个物资管理系统,前台用的是vue+element-ui。因客户的物资大多是没有定位模块的,但又希望在地图上展示物资。因不能从定位模块获取经纬度

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内容请搜索真格学网以前的文章或继续浏览下面的相关文章希望大家以后多多支持真格学网! 您可能感兴趣的文章:ElementUI之Message功能拓展详解

require('./assets/css/index.css')src之下才是你的文件目录 其他访问不到的把index.css放到src的assets/css下 即可 import 引入css 不推荐,1、先把vue import进去(21135261import Vue from 'vue')2、new一个vue实例4102(let v = new Vue();)3、调用elementUI的方法1653如:v.$message({type: 'success', message: 'hello world'})内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • vue数据驱动模拟实现2
  • vue.js 实现点击按钮动态添加li的方法
  • vue.extend构造器的详解
  • vue 点击其他区域关闭自定义div操作
  • vue响应式原理observer、dep、watcher理解
  • 跟混乱的页面弹窗说再见
  • vue组件 keep-alive 和 transition 使用详解
  • vue实现页面加载动画效果
  • 详解vue-cli 2.0配置文件(小结)
  • 解析vue 2.5的diff算法
  • Vue在单独引入js文件中使用ElementUI的弹框,调用的...
  • vue 公共js中怎么使用element ui 的提示组件
  • vue.js使用element-ui改写一个多级联动的选择器
  • C# MVC Vue element-ui ,使用mvc分布页如何提取vu...
  • vue.js怎么将组件做成一个公共组件
  • vue.js中,在一个vue组件中,想通过点击按钮,才加...
  • 如何使用vue.js与后台实现数据交互
  • vue基于elementui三级复选框如何实现,新手,最好...
  • element-ui弹框可以在jq中使用吗
  • vue.js实现页面加载完成执行函数
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全yui.ext相关prototypejqueryangularjsjsonlib_jsjs面向对象extjsmootoolsseajsdojovue.jsbackbone.js其它首页javascriptjavascript类库elementui之message功能拓展详解vue数据驱动模拟实现2vue.js 实现点击按钮动态添加li的方法vue.extend构造器的详解vue 点击其他区域关闭自定义div操作vue响应式原理observer、dep、watcher理解跟混乱的页面弹窗说再见vue组件 keep-alive 和 transition 使用详解vue实现页面加载动画效果详解vue-cli 2.0配置文件(小结)解析vue 2.5的diff算法vue引用js文件的多种方式(推荐)vue之父子组件间通信实例讲解(prvue props用法详解(小结)简单理解vue中props属性vue元素的隐藏和显示(v-show指令vue.js常用指令汇总(v-if、v-fovue 进阶教程之v-model详解使用vue实现图片上传的三种方式详解vue 路由跳转四种方式 (带参vue实现文件上传功能简单理解vue中的nexttick方法使用 element ui table 的 slot-scope方法vue实现pc端录音功能的实例代码基于vue2实现简易的省市区县三级联动组件vue from-validate 表单验证的示例代码vue-cli + sass 的正确打开方式图文详解最细致的vue.js基础语法 值得收藏!vue中路由参数传递可能会遇到的坑vue中v-show和v-if的异同及v-show用法vue实现移动端input上传视频、音频
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved