double-ui-vue/es/skeleton/index.js

基于vue框架的ui库

import { defineComponent, computed, openBlock, createElementBlock, Fragment, renderList, unref, normalizeClass, normalizeStyle } from "vue";
var Ot = (e = 8, t = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ") => {
  let r = "";
  for (let o = e; o > 0; --o)
    r += t[Math.floor(Math.random() * t.length)];
  return r;
}, $t = Ot;
var Skeleton_vue_vue_type_style_index_0_lang = "";
const _hoisted_1 = { class: "x-skeleton" };
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "Skeleton",
  props: {
    count: {
      type: Number,
      default: 3
    },
    height: {
      type: [Number, String],
      default: 0
    },
    active: {
      type: Boolean,
      default: false
    }
  },
  setup(__props) {
    const props = __props;
    const list = computed(() => Array.from(new Array(props.count)).map(() => $t(7)));
    const styleHeight = computed(() => props.height ? { height: `${props.height}px` } : null);
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", _hoisted_1, [
        (openBlock(true), createElementBlock(Fragment, null, renderList(unref(list), (item) => {
          return openBlock(), createElementBlock("section", {
            key: item,
            class: normalizeClass(["x-skeleton-item", __props.active && "x-skeleton-active"]),
            style: normalizeStyle(unref(styleHeight))
          }, null, 6);
        }), 128))
      ]);
    };
  }
});
export { _sfc_main as default };