网络技术分享-基于vue3实现自己的组件库，第一章：消息组件

@importurl('../../assets/css/animation.css');.v-message{位置：固定；z-指数：99999；顶部：50px；左：0；右：0；保证金：自动；宽度：380px；.message-item{显示：flex;对齐项目：居中；证明内容：空格之间；底部边距：14px；盒子-s调整：边框框；边界半径：6px；填充：14px；溢出：隐藏；边框：1px实心透明；动画：messageShow.5s；动画填充模式：转发；.content{字体大小：12px；行高：20px；弹性：1；}.close{游标：指针；&:hover{颜色：#6b6b6b;}}i{字体大小：18px；}.icon{margin-right:14px;}}.center{证明内容：中心；.content{flex:01auto;}}.messageHide{动画：messageHide.2s线性；动画填充模式：转发；}.prompt{border:1pxsolid#ebeef5;背景色：#edf2fc；.content,i{颜色:#909399;}}.success{背景颜色：#f0f9eb;边框颜色：#e1f3d8;.content,i{颜色:#67C23A;}}.warning{背景色：#fdf6ec；边框颜色：#faecd8；.content,i{颜色:#E6A23C;}}.error{背景颜色：#fef0f0;边框颜色：#fde2e2；.content,i{颜色:#F56C6C;}}}大家好，今天开始新系列，实现自己的基于vue3的组件库。在本文中，您将默认安装并创建一个vue3项目。如果不会，请参考vue官网。废话不多说，开始实现本章的目标Message组件；创建组件库项目目录vair为组件库名称（名称可选）安装项目依赖npminstallless-Dnpminstallless-loader-Dtemplatescriptimport{ref,defineComponent}from'vue';exportdefaultdefineComponent({name:'message',setup(){//消息列表constmessageList=ref([]);//引用列表constcontentList=ref([]);constmessage=(options)=>{computedConfig(options);}constsuccess=(options)=>{computedConfig(options,'success');}constwarning=(options)=>{computedConfig(options,'warning');}consterror=(options)=>{computedConfig(options,'error');}constcomputedConfig=(options,type)=>{varoption=options||{};输入&&(option.type=type);constconfig={类型：option.type||'prompt',//没有消息类型就是默认消息message:option.message||'',iconClass:选项.iconClass||computedIconClass(type||'prompt'),customClass:option.customClass,duration:option.duration>=0?option.duration:3000,showClose:option.showClose,center:option.cent呃，onClose:option.onClose,id:Math.floor(newDate())};messageList.value.push(配置);//如果延迟时间不等于0，就要设置消除时间if(config.duration!==0){setTimeout(()=>{contentList.value[0].className+='messageHide';setTimeout(()=>{messageList.value.splice(0,1);},200);},config.duration+messageList.value.length*100);}};constcomputedIconClass=(type)=>{switch(type){case'prompt':return'iconfonticon-tishi';case'success':return'iconfonticon-success';case'warning':return'iconfonticon-jinggao--';case'error':return'iconfonticon-cuowu';}};constclose=(config)=>{constindex=messageList.value.findIndex(item=>item.id===config.id);if(index!==-1){contentList.value[index].className+='messageHide';setTimeout(()=>{messageList.value.splice(index,1);config.onClose&&config.onClose(config);},200);}}return{messageList、contentList、close、message、success、warning、error}}});css@importurl('../../assets/css/animation.css');.v-message{位置：固定；z-指数：99999；顶部：50px；左：0；右：0；保证金：自动；宽度：380px；.message-item{显示：flex;对齐项目：居中；证明内容：空格之间；底部边距：14px；盒子-s调整：边框框；边界半径：6px；填充：14px；溢出：隐藏；边框：1px实心透明；动画：messageShow.5s；动画填充模式：转发；.content{字体大小：12px；行高：20px；弹性：1；}.close{游标：指针；&:hover{颜色：#6b6b6b;}}i{字体大小：18px；}.icon{margin-right:14px;}}.center{证明内容：中心；.content{flex:01auto;}}.messageHide{动画：messageHide.2s线性；动画填充模式：转发；}.prompt{border:1pxsolid#ebeef5;背景色：#edf2fc；.content,i{颜色:#909399;}}.success{背景颜色：#f0f9eb;边框颜色：#e1f3d8;.content,i{颜色:#67C23A;}}.warning{背景色：#fdf6ec；边框颜色：#faecd8；.content,i{颜色:#E6A23C;}}.error{背景颜色：#fef0f0;边框颜色：#fde2e2；.content,i{颜色:#F56C6C;}}}animation.css这个文件的作用是定义组件需要的动画@keyframesmessageShow{0%{transform:translateY(-50px);不透明度：0；}100%{转换：translateY(0);不透明度：1；}}@keyframesmessageHide{0%{transform:translateY(0);不透明度：1；}100%{变换：平移（-50px）；不透明度：0；}}writemessage.jsimportMessagefrom"./Message.vue";import{createApp}from"vue";constcreateMessage=function(){constdiv=document.createElement("div");div.id="v-消息";文档.body.appendChild(div);returncreateApp(Message).mount("#v-message");};exportdefaultcreateMessage();写vairexportindex.js这个文件后面会引入很多组件//消息消息提示importMessagefrom'./components/Message/message.js';constVair=function(Vue){//消息消息提示Vue.config.globalProperties.$message=Message;}exportdefaultVair;使用组件库在main.js中导入;应用程序使用（Vair）。安装（'#app'）；App.vue调用.message{宽度：500px;显示：弹性；证明内容：空格之间；}。按钮{宽度：76px；行高：34px；半径：4px；颜色：#fff；背景色：#1890FF；文本对齐：居中；游标：指针；font-size:12px;}效果展示