第六集:从零开始在PC端实现一套Vue的ui组件库(加载)组件
时间:2023-03-31 12:09:25
CSS
第六集:从头实现(加载组件)本集定位:加载组件我相信只要和后台有交互,所有的项目都需要。组件虽然简单,但是它的作用很重要:让用户有一个好的体验体验,就是给用户一个信号,‘我在做,等等……’。阻止用户的操作,即在此期间(可能)阻止用户触发其他事件。不要让用户看到白屏,看到白屏的体验差到爆炸。各种酷炫的效果也是吸引眼球的手段。一:当加载需求分析出现时,用户的操作一定要被屏蔽。不依赖dom,可以通过js控制它的出现和隐藏,比如配置axios。它充满了父母,而不是身体。因为是PC端,所以不是小黑块的形式。屏幕上方进度条的讨论,我去年的项目中用过。进度条,体验太差了,不够显眼,而且不能点屏让人眼花缭乱,所以这次没有用。骨架屏的讨论将在下一章(骨架屏简易版)进行。很多技术方向都是为了完美展示dom结构的影子,1:1还原dom还没有加载的样子。事实上,我认为没有必要这样做。这只是一个过渡阶段,一般外观就足够了。应该把更多的精力和能力放在业务方面,根据我对很多APP的观察,100%还原的确实不多,问过很多朋友有没有注意到骨架屏和真实DOM结构的偏差,而且他们都表示没注意到,所以骨架屏一方面,这套组件只做最基本的功能。二:基本结构搭建模板//老规矩://黑色遮罩层//图标和内容展示区//图标组件//显示的提示文字{{title}}模板>jsprops:{标题:{类型:St响铃,默认:“加载中……”},iconName:{//加载图标的外观必须是自定义类型:String,default:"cc-load1"//默认是普通的菊花},iconColor:{//图标的颜色也是用户自己设置的,如果有特殊要求type:String,default:"#3F8BDB"}}css部分封装了居中定位。@import'./common/var.scss';@import'./common/extend.scss';@import'./common/mixin.scss';@includeb(loading){@includeposition();&__curtain{@include位置();}&__icon{位置:绝对;颜色:$--颜色正常;z-指数:10;@include弹性中心;@include位置();:nth-child(1){//用一些margin-bottom:6px;分隔文本和图标}}}src/style/common/mixin.scss@mixinposition($position:absolute){margin:auto;位置:$位置;顶部:0;左:0;右:0;底部:0;}@mixinflexCenter{显示:flex;对齐项目:居中;弹性方向:列;justify-content:center;}Usedisplay//当你需要显示的时候,让这个dom显示,因为默认是定位浏览器的。<cc-loadingv-if='show'/>三:对于父级定位,而不是全局加载其实很简单,就是属性的区别,替换固定定位即可,替换吸附属性即可浪一郎让我加了很多友好的属性{{title}}
js,这里的默认值是本项目常用的值;道具:{位置:{类型:字符串,默认值:“固定”},标题:{类型:String,默认值:“正在加载......”},textColor:{type:String,default:"#3F8BDB"},opacity:{type:Number,default:0.8},iconName:{type:String,default:"cc-load1"},iconColor:{类型:字符串,默认值:“#3F8BDB”},窗帘颜色:{类型:字符串,默认值:“黑色”},boxZIndex:{类型:数字,默认值:100},textFontSize:{类型:数字,默认值:17},图标大小:{type:Number,default:25}},效果展示4:添加事件和js程序化调用其实即使是屏蔽状态,也必须给出一个点击事件,比如用户点击了很多下载之后,可以弹出消息“我很快就好了,我受不了了……”,用户可以通过native修饰符自行完成,但那样太不工程化了。
onClickLoading(){this.$emit("click");}别忘了加上stop修饰符,不然点进去就不好了。我们经常需要从js开始vue-cc-ui/src/components/loading/main/loading.js//引入写好的组件importLoadingfrom'./loading.vue';Loading.install=function(Vue){//注册使用Vue.component(Loading.name,Loading);//挂在原型上Vue.prototype.$ccShowLoading=function(options){//extend就是实例化这个组件letConstructor=Vue.extend(Loading);letnode=newConstructor({propsData:options//所有配置也以数字形式传入});//执行到他的钩子node.vm=node.$mount();//插入body,因为这是不必要的插入一个固定的parent,用户自己传过去。document.body.appendChild(node.$el);};//出现和消失Vue.prototype.$ccHiddenLoading=function(){//从body中找到有这个类的元素并杀死它。document.body.childNodes.forEach(item=>{if(item.className==='cc-loading'){document.body.removeChild(item);}});};};exportdefaultLoading;下一章:简易骨架屏欢迎大家一起进步!github:链接说明个人网站:链接说明