北京云网站建设,thinkphp 网站源码,wordpress post in,网站建设挣钱 知乎前端组件库造轮子——Message组件开发教程
前言
本系列旨在记录前端组件库开发经验#xff0c;我们的组件库项目目前已在Github开源#xff0c;下面是项目的部分组件。文章会详细介绍一些造组件库轮子的技巧并且最后会给出完整的演示demo。 文章旨在总结经验#xff0c;开…前端组件库造轮子——Message组件开发教程
前言
本系列旨在记录前端组件库开发经验我们的组件库项目目前已在Github开源下面是项目的部分组件。文章会详细介绍一些造组件库轮子的技巧并且最后会给出完整的演示demo。 文章旨在总结经验开源分享有问题的话也希望路过的大佬指正。
组件开发流程
样式和动画
首先我们来考虑样式对于message的调用我们下面再讲。
样式的话无非就是实现一个这样消息弹出框,同时加上弹出时的动画这里借助vue的transition来实现。 这些都是简单的内容代码量很少我就直接贴在这里了。
transition namemessage-fade
div classmessagep classmessage-content/p
/div
/transition.message {position: fixed;top: 20px;left: 50%;z-index: 50;box-sizing: border-box;display: flex;align-items: center;padding: 15px 15px 15px 20px;overflow: hidden;background-color: #f0f9eb;border: 1px solid #ebeef5;border-radius: 5px;transition: opacity 0.3s, transform 0.4s, top 0.4s;transform: translateX(-50%);
}
.message-fade-enter-active,
.message-fade-leave-active {opacity: 0;transform: translate(-50%, -100%);
}.message-content {color: #67c23a;font-size: 14px;margin: 0;
}当然现在这个message是只有空壳一样的内容我们需要实现的效果是有一个message函数接口我们可以调用这个接口后弹出这个消息框。这其实就是和其它一些组件不太一样的地方他的实现更倾向于一个接口函数一样。
写一个函数当然不是问题问题是怎么实现调用函数后渲染我们的消息框出来。
这里就需要了解一下vue中渲染DOM的知识点了。
h函数和render函数
在vue中很多文件的开发都是在.vue文件的这种文件开发是分为三大块来写可以像类似写HTML时的感觉这也是vue的卖点之一让新手更易于上手。
但是我们要知道.vue实际上也是需要通过一些打包工具来编译成js代码才能执行。
h函数就是把.vue中的代码编辑成一个虚拟DOM最终会把template解析为render函数返回虚拟DOM这点可以在Vue Dev Tools中看到
也就是说h函数是负责创建虚拟DOMrender是负责把这个虚拟DOM返回出去
接口函数
通过上面的介绍大概不难猜出这个接口函数应该如何实现了其实就是创建一个虚拟DOM出来包裹住我们的message组件在利用render函数渲染出来即可。
import element from ./message.vue;
import { createVNode, render } from vue;export default function message(options) {if (typeof options string) {options {message: options as string,};}const params {...options,};// vue2 的写法// new Vue(render:() createVNode(element)).mount();const div document.createElement(div); // 创建一个divconst vnode createVNode(element, params); // 创建一个message组件的虚拟DOMrender(vnode, div); // 渲染虚拟DOMdocument.body.appendChild(div.firstElementChild); // 加入到body中
}那我们既然可以调用message接口函数了那么在message组件中还有一些逻辑需要实现——在执行结束后关闭掉弹出来的消息框。
这里就是利用v-show控制开关消息框用定时器回调来解决关闭我们可以利用props接收存在时间duration这样我们的基本功能就算完成了但是message组件还存在很多细节可以补充。
// message.vue
transition namemessage-fadediv classmessage v-showvisiblep classmessage-content{{ message }}/p/div
/transitionconst visible ref(false);
let timer null;
const start () {visible.value true;if (timer ! null) {clearTimeout(timer);}if (props.duration 0) {timer setTimeout(() {visible.value false;}, props.duration);}
};onMounted(() {start();
});onUnmounted(() {if (timer ! null) {clearTimeout(timer);}
});回调删除节点的性能优化
在刚刚上面完成的组件中会发现当我们多次触发了message后哪怕duration过了节点也依然存在在body中这些节点只是被隐藏了并没有随着持续时间结束后删除掉。 这样显然是不太合理的并且操作多了会存在一些性能问题因此我们需要在这个组件在持续时间结束后可以被删除掉。
这里我们可以在动画结束后派发出一个destroy事件 transition namemessage-fade after-leave$emit(destroy) // 派发删除操作div classmessage v-showvisiblep classmessage-content{{ message }}/p/div/transition这个$emit(destroy)会调用我们传进来的props中的onDestroy函数
// message.tsconst div document.createElement(div);
const vnode createVNode(element, params);vnode.props.onDestroy () { // 在参数props中挂载销毁函数render(null, div); // 利用render移除div节点};
render(vnode, div);
document.body.appendChild(div.firstElementChild);连续多次弹出的用户体验优化
当我们连续触发多次message时会弹出多个消息对于这多个消息我们不希望会重叠在一起发生覆盖的情况我们希望的是可以像下面这样。 那我们如何实现上面的效果呢
我们可以在props中加一个offset属性该属性为message组件的离视屏顶部的距离。
然后我们还需要知道上个节点的距离是多少因此我们需要把连续点出的节点都记录起来具体来说就是用一个数组把他们存起来数组中的值按上一节点的offset基础上加合适的距离即可。
// message.ts const instances: VNode[] [];
export default function message(options) {... let offset options.offset || 20; instances.forEach((vnode: VNode) {offset vnode.el.offsetHeight 20;});const params {...options,offset,};const div document.createElement(div);const vnode createVNode(element, params);vnode.props.onDestroy () {render(null, div); // render会移除dom注意此方法在vue2中无法使用instances.pop();};render(vnode, div);document.body.appendChild(div.firstElementChild);instances.push(vnode);
}同时我们需要在渲染出message组件中加上新的offset位置。
// message.vuetransition namemessage-fade after-leave$emit(destroy)div classmessage v-showvisible :styletopStyle // 更改top位置p classmessage-content{{ message }}/p/div
/transitionconst topStyle computed(() {return {top: ${props.offset}px,};
});演示demo
完整项目demo
结语
Message组件的核心开发功能就是上面这些其他更多的详细功能开发可以参考Hview-ui项目源码
如果想要了解更多的组件轮子开发或者组件库开发流程更多详细的组件开发过程更新在GitHub项目源码,最后觉得我们项目or文章不错可以点个star点点小手支持一下也欢迎各路大佬为我们的开源项目添砖加瓦。
