|
副问题[/!--empirenews.page--]
短视频，自媒体，达人种草一站处事
这篇文章首要先容了模拟Element-ui实现一个浅显的$message要领，文中通过示例代码先容的很是具体，对各人的进修可能事变具有必然的参考进修代价，必要的伴侣们下面跟着小编来一路进修进修吧
媒介
在必要对用户举办提醒时，偶然会碰着这种场景：行使模态框提醒过分硬核，行使toast提醒又太轻了，这时辰可以选择行使页面顶部滑下的动静提醒。本文模拟element-ui的实现一个相同$message的要领。
思绪梳理
起首我们来看下element-ui中动静提醒的结果是怎么样的，找些思绪。
从图中我们可以看动静提醒是可以同时表现多条的，而且定位看起来都是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 appear>
<div :class="['box-item', boxClass]" v-if="info.show" :style="{top: info.top + 'px'}">
<div>
<i :class="['iconfont', iconClass]"></i>
{{ info.msg }}
</div>
<span @click="close">
<i></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原型链上
（编辑：湖南网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
