Vue3自定义说明——骨架屏

鍓嶈█楠ㄦ灦灞忔槸椤甸潰鐨勭┖鐧界増鏈€傞€氬父锛屽湪椤甸潰瀹屽叏鍛堢幇涔嬪墠锛屼細琚竴浜涚伆鑹插潡绮楃暐鍕惧嫆鍑烘潵銆傚姞杞芥暟鎹悗锛屽皢鏇挎崲涓虹湡瀹炴暟鎹€傚唴瀹广€傜洰鍓嶄富娴佺殑UI搴撻兘鏈夐鏋跺睆锛屾瘮濡侲lement-UI銆丄ntd銆傚彲浠ョ湅鍑轰娇鐢ㄨ捣鏉ラ潪甯哥畝鍗曪紝鍙渶瑕佷竴琛屼唬鐮?/element//antd浣嗘槸杩欐牱涓嶅鐏垫椿锛屽椤甸潰涓嶅ソ杩芥眰涓€у寲銆傚悗鏉ワ綖鎯充簡鎯筹紝鑳戒笉鑳芥妸鑺傜偣鏍囪涓€涓嬶紝鐒跺悗鏍规嵁鏍囪鑷姩鐢熸垚瀵瑰簲鐨勯鏋跺睆鍛紵缁撴灉鐪熺殑璁╂垜鎯抽€氫簡锛佸厛鐢ㄦ寚浠ょ湅鏁堟灉o((>蠅<))o~瀹炵幇鍘熺悊鎴戜滑鑷畾涔?鏉℃寚浠わ紝鍒嗗埆鍙玸keleton鍜宻keleton-item//skeleton.tsimport{reactive,watchEffect,h,render}from'vue'conststate=reactive({//鍔犺浇鐘舵€乴oading:false,//浣跨敤v-skeleton-item鎸囦护鐨勮妭鐐逛繚瀛樺湪杩欓噷list:[]})watchEffect(()=>{//鍒涘缓vnodeconstchildren=state.list.map((el)=>h('div',{style:{position:'absolute',top:el.getBoundingClientRect().top+'px',left:el.getBoundingClientRect().left+'px',瀹藉害:el.getBoundingClientRect().width+'px',楂樺害:el.getBoundingClientRect().height+'px',鑳屾櫙:'#e5e5e5',borderRadius:getComputedStyle(el).borderRadius,},}));//鍒涘缓涓€涓猟iv瀹瑰櫒constcontainer=h('div',children)//灏哾iv瀹瑰櫒娓叉煋鍒癰odyrender(state.loading?container:null,document.body)})constSkeleton={mounted(el,binding){state.loading=binding.value},updated(el,binding){state.loading=binding.value},unmounted(el){state.loading=false}}constSkeletonItem={mounted(el,binding){//淇濆瓨elstate.list.push(el)},unmounted(el){//鍒犻櫎elconsti=state.list.indexOf(el)if(i==-1)returnstate.list.splice(i,1)}}//娉ㄥ唽杩欎袱涓寚浠xportdefault{install:app=>{app.directive('skeleton',Skeleton)app.directive('skeleton-item',SkeletonItem)}}export{Skeleton,SkeletonItem}鐐瑰嚮锛堝湪绾胯繍琛岋級绀轰緥浠ｇ爜瀹炵幇鍘熺悊鍏跺疄寰堢畝鍗曘€傛垜浠厛鑷畾涔?鏉℃寚浠わ紝鍙仛skeleton锛氱敤浜庢帶鍒跺姞杞界姸鎬乻keleton-item锛氱敤浜庢爣璁伴渶瑕佸垱寤洪鏋剁殑鑺傜偣銆係keletonItem鎸傝浇鐨勯挬瀛愬嚱鏁板皢el淇濆瓨鍒發ist涓紝閬嶅巻list鍒涘缓瀵瑰簲鐨剉node锛岃皟鐢╡l.getBoundingClientRect()鑾峰彇el鐨勪綅缃拰澶у皬骞惰缃负vnode锛屼娇寰梫node鍜宔l鎭板ソ閲嶅彔鍦ㄤ竴涓綅缃渶鍚庤皟鐢╮ender(state.loading?container:null,document.body)娓叉煋楠ㄦ灦灞忥紙state.loading鐢眘keleton鍛戒护鎺у埗锛堾x-ui-vue3/skeleton鏄熀浜庝互涓婃€濊矾灏佽鐨剉ue3鍛戒护銆傝鎴戜滑鐪嬬湅濡備綍浣跨敤npmi-S@x-ui-vue3/skeletonmain.jsimport{createApp}from'vue'importSkeletonfrom'@x-ui-vue3/skeleton'importAppfrom'./App.vue'瀹夎createApp(App).use(Skeleton).mount('#app')App.vue鏇村渚嬪瓙馃帀DEMO1馃帀DEMO2馃帀DEMO3鏈€鍚庯紝浣犱滑鐨勷煈峫ike猸愬鎴戝緢閲嶈锛屾槸鎴戝潥鎸佺殑鍔ㄥ姏馃憟