vue自动生成骨架屏,

　　这篇文章主要介绍了某视频剪辑软件实现骨架屏的示例，帮助大家更好的理解和学习使用某视频剪辑软件框架，感兴趣的朋友可以了解下

骨架屏用途

　　作为矿泉中路由切换的正在加载，结合组件的生命周期和创建交互式、快速动态网页应用的网页开发技术请求返回的时机来使用。(作为装货使用)。作为与用户联系最为密切的前端开发者，用户体验是最值得关注的问题。关于页面装货状态的展示，主流的主要有装货图和进度条两种。除此之外，越来越多的应用采用了"骨架屏"的方式去展示未加载内容，给予了用户焕然一新的体验。

　　作为首屏渲染的优化

Vue架构骨架屏

思路大纲

　　定义一个抽象组件，在抽象组件的提出函数里获取插槽

　　深度循环遍历插槽，将每个元素都添加上通用汽车-骨架的类名

　　将虚拟节点文本内容预暂后清空保证骨架屏出现时不会出现默认文字

　　返回时间

定义一个抽象组件

　　什么是抽象组件？在渲染时会被跳过，只做运行时的操作的组件

　　导出默认值{

　　名称： GmSkeleton ，

　　摘要：真//抽象组件的属性

　　}

获取插槽并初始化操作骨架屏

　　渲染(h) {

　　常量插槽=这个.$老虎机。默认 [h()]

　　这个$nextTick().然后(()={

　　this.handlerPrefix(slots，this.showSpin？这个。addskeletprifix:这个。removeskeletprifix)

　　})

　　返回插槽。长度1?h(div ，{

　　staticClass: this.showSpin？g-spinner :

　　},插槽) :插槽

　　}

　　这里我们将处理时间的方法放置在下一滴答里面，因为handlerPrefix里需要获取真实的多米，下一个滴答是用来执行排序后的更新队列里的所有方法，在执行提出前，GMSkeleton组件的渲染监视器已被收集到更新队列里，所以此时定义下一个滴答声回调函数里能获取到渲染后对应插槽里所有真实多姆，若是不了解下一滴答原理，请移步你不知道的下一滴答

循环slots操作类名

　　handlerComponent(slot，handler/* addskeletprifix removeskeletprifix */，init) {

　　const originchildren=(((槽。组件实例 { })._vnode {}).componentOptions {}).孩子们

　　const comp children=((slot。组件实例 { })._vnode {}).孩子们

　　！初始化处理程序（插槽)

　　如果(comp children)这个。处理程序前缀(comp children，handler，false)

　　如果(originchildren)这个。处理程序前缀(originchildren，handler，false)

　　handlerPrefix(slots，handler，init=true) {

　　slots.forEach(slot={

　　var children=slot。孩子 (槽。组件选项 { }).孩子 ((槽。组件实例 { })._vnode {}).孩子们

　　if (slot.data) {

　　如果(!slot.componentOptions) {

　　！初始化处理程序（插槽)

　　} else if(！这个10.25 $ hoc _ utils。getabstractcomponent(slot)){

　　；（功能（插槽){

　　const handler组件=this。处理程序组件。绑定(this，slot，handler，init)

　　const insert=(插槽。数据。hook { }).插入

　　；(slot.data.hook {}).insert=()={ //函数重构，修改原有的组件钩子，并且保证插入只执行一次

　　插入（插槽)

　　handlerComponent()

　　}

　　；(slot.data.hook {}).postpatch=handlerComponent

　　}).打电话（这个，槽)

　　}

　　如果(槽槽。榆树槽。榆树。nodetype===3){

　　if (this.showSpin) {

　　插槽。memoredtextcontent=插槽。榆树。文本内容

　　slot.elm.textContent=

　　}否则{

　　插槽。榆树。文本内容=槽。memornedtextcontent slot。榆树。文字内容槽。文本

　　}

　　孩子这个。处理程序前缀(children、handler、false)

　　})

　　逐步分析：

　　我们遍历插槽。

　　为下一个周期获取当前vnode下的子集合。

　　为了确定它是否是本机HTML元素，只有组件vnode将具有componentOptions属性。

　　判断一个抽象组件是否抽象，我们知道抽象组件是不会在真实的DOMTree上渲染的，比如keep-alive，transition。每个组件的vnode都有自己的钩子生命周期：init(初始化)、insert(插入)、prepatch(更新)、destroy(销毁)，每个生命周期都会在不同的阶段触发。劫持insert，保留原来的insert方法，然后重构vnode的insert方法，调用handlerComponent方法添加类名。这类似于上面mounted nextTick的使用概念。因为handlerComponent需要知道子组件的实例，所以必须在实例化之后调用它。一个组件的init方法会实例化该组件，直接调用watcher.update(watcher.render())，也就是我们调用insert方法的时候，其实是在update(render())之后，所以我们可以在这里得到实例化的子组件。

　　确定nodeType是否为文本节点。如果是这样的话，需要先保存textContent再删除，这样在出现骨架屏幕的时候就不会显示默认文本了。当骨架屏消失后，原来保留的默认文本会返回到vnode，这样你就可以在骨架屏的显示和隐藏之间自由切换。

操作vnode的静态类名

　　addSkeletPrefix(slot) {

　　const rootVnode=slot . component options？(slot.componentInstance {})。_ vnode { }:slot；

　　if (rootVnode.elm) {

　　rootvnode . elm . class list . add(this . skelet prefix)

　　}否则{

　　；(rootVnode.data {})。static class=` { this . skelet prefix } `

　　}

　　removeSkeletPrefix(slot) {

　　const rootVnode=slot . component options？(slot.componentInstance {})。_ vnode { }:slot；

　　if (rootVnode.elm) {

　　rootvnode . elm . class list rootvnode . elm . class list . remove(this . skelet prefix)

　　} else if(rootvnode . data . static class){

　　rootvnode . data . static class=rootvnode . data . static class . replace(` $ { this . skelet prefix } `，)

　　}

　　AddSkeletePrefix用于添加gm-skeleton类名，removeSkeletonPrefix用于删除gm-skeleton类名。

使用方法

　　从“vue”导入Vue

　　从“path/to/GMSkeleton”导入GMSkeleton

　　Vue.use(GMSkeleton)

　　GM-骨架

　　组件/

　　分区/分区

　　马丁前线/span/div

　　/gm-skeleton

传值

　　属性名

　　价值

　　形容

　　showSpin

　　布尔代数学体系的

　　是否打开骨架画面，默认为真。

　　骨架前缀

　　线

　　屏幕类名，默认为gm-skeleton。

效果如下

　　具体样式是根据开发者自己写的样式生成的，用gm-skeleton包装。下面是一个简单的例子，使用上述方法。

完整地址

　　80行代码实现Vue骨架屏

　　这就是vue实现骨架屏的例子的细节。更多关于vue实现骨架屏的信息，请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。