skeleton-elements/vue/SkeletonBlock.js

Skeleton elements (aka UI Skeletons, Skeleton Screens, Ghost Elements) - UI for improved perceived performance

import { h } from 'vue';
export default {
  name: 'skeleton-block',
  props: {
    tag: {
      type: String,
      default: 'div'
    },
    width: [String, Number],
    height: [String, Number],
    borderRadius: String,
    effect: String
  },

  render() {
    return h(this.tag, {
      class: {
        'skeleton-block': true,
        [`skeleton-effect-${this.effect}`]: this.effect
      },
      style: {
        width: this.width,
        height: this.height,
        borderRadius: this.borderRadius
      }
    }, this.$slots.default && this.$slots.default());
  }

};