分析

类型：VUE
分数：25分
难度：很难

考点

• 掌握VUE递归组件的使用
• 掌握 VUE v-for 指令的使用
• 掌握 VUE v-if 指令的使用
• 掌握 VUE v-bind 指令的使用

解题思路

第一题：使用 VUE递归组件，实现骨架屏中嵌套 div

第二题：加上动画样式

实现

/*
 * 骨架屏渲染组件
 */
let ItemTemplate = ``;
// TODO: 请补充完整Template，完成组件代码编写

ItemTemplate = `
<div name='root'>
  <div name='container' :class="'ske-'+paragraph.type+'-container'">
    <div name='sub-container' :style='getStyle(paragraph.type,item)' :class="'ske ske-'+paragraph.type" v-for='(item,index) in getData(paragraph)' :key='index'>
      <div :class="'ske-'+item.type+'-container'" v-if="item.type == 'rect' || item.type == 'circle'">
        <div name='rect-cir' :style='item.style' :class="getClass(item.type)"></div>
      </div>

      <item :paragraph="item" :active="active" v-else></item>

    </div>
  </div>
</div>
`


Vue.component("item", {
  name: "item",
  template: ItemTemplate,
  props: ["paragraph", "active"],
  data() {},
  watch: {},
  created:function(){
    console.log("paragraph:",this.paragraph)
  },
  methods: {
    /**
     * 取出样式
     * @param {*} type 
     * @param {*} obj 
     * @returns 
     */
    getStyle(type,obj){
      if(type == 'row'){
        return obj.rowStyle
      }else if(type == 'col'){
        return obj.colStyle
      }
    },
    /**
     * 根据类型取出数据
     * @param {*} obj 
     * @returns 
     */
    getData(obj){
      if(obj.type == 'row'){
        return obj.rows
      }else if( obj.type == 'col'){
        return obj.cols
      }
    },
    /**
     * 拼装 矩形、圆的 class
     * @param {*} type 
     */
    getClass(type){
      if(this.active){
        return 'ske ske-'+type+" ske-ani"
      }else{
        'ske ske-'+type
      }

    }
  },
});

原文出处：/show_1GWMfs1OmBs.html