cc-element-components/avatarList/index.es.js

该项目是基于`element-plus`二次封装组件，使用的技术栈为`vue3` + `typescript` + `element-plus`。在此项目当中，我们会基于`element-plus`的组件库已有组件封装如下组件: - 图标选择器 - 时间选择器 - 城市选择器 - 省市区选择器 - 通知菜单 - 趋势标记 - 评论 - 数据列表 - 数值统计 - 倒计时 - 分割面板 - 时间轴 - 弹框拓展 - 进度条拓展 - 导航菜单拓展 - 可配置项表格 - 可配置项表单 - 日历

import { defineComponent, ref, computed, onMounted, watch, resolveComponent, openBlock, createElementBlock, Fragment, renderList, createBlock, withCtx, createVNode, normalizeClass, normalizeStyle, unref, createTextVNode, toDisplayString, createCommentVNode } from "vue";
var index_vue_vue_type_style_index_0_scoped_true_lang = "";
var _export_sfc = (sfc, props) => {
  for (const [key, val] of props) {
    sfc[key] = val;
  }
  return sfc;
};
const _hoisted_1 = { class: "cc-avatar-list" };
const _sfc_main = /* @__PURE__ */ defineComponent({
  props: {
    list: null,
    theme: { default: "dark" },
    size: { default: "large" },
    shape: { default: "circle" },
    max: { default: Infinity }
  },
  setup(__props) {
    const props = __props;
    const avatarList2 = ref(props.list);
    const other = computed(() => {
      if (props.max !== Infinity) {
        return props.list.length - props.max;
      } else
        return 0;
    });
    onMounted(() => {
      if (props.max !== Infinity) {
        avatarList2.value = props.list.slice(0, props.max);
      }
    });
    watch(() => props.list, (val) => {
      avatarList2.value = val;
      if (props.max !== Infinity) {
        avatarList2.value = val.slice(0, props.max);
      }
    }, { deep: true });
    return (_ctx, _cache) => {
      const _component_el_avatar = resolveComponent("el-avatar");
      const _component_el_tooltip = resolveComponent("el-tooltip");
      const _component_el_button = resolveComponent("el-button");
      return openBlock(), createElementBlock("div", _hoisted_1, [
        (openBlock(true), createElementBlock(Fragment, null, renderList(avatarList2.value, (item, index2) => {
          return openBlock(), createBlock(_component_el_tooltip, {
            key: index2,
            effect: __props.theme,
            content: item.title,
            placement: "top"
          }, {
            default: withCtx(() => [
              createVNode(_component_el_avatar, {
                class: normalizeClass(["cc-avatar-list-item", { "cc-avatar-list-item-left": index2 > 0 }]),
                style: normalizeStyle({ left: -index2 * 15 + "px" }),
                src: item.src,
                size: __props.size,
                shape: __props.shape
              }, null, 8, ["class", "style", "src", "size", "shape"])
            ]),
            _: 2
          }, 1032, ["effect", "content"]);
        }), 128)),
        __props.max !== Infinity ? (openBlock(), createBlock(_component_el_button, {
          key: 0,
          type: "warning",
          circle: "",
          size: __props.size,
          style: normalizeStyle([{ "position": "relative", "cursor": "default" }, { left: -(props.list.length - unref(other)) * 15 + "px" }])
        }, {
          default: withCtx(() => [
            createTextVNode("+" + toDisplayString(unref(other)), 1)
          ]),
          _: 1
        }, 8, ["size", "style"])) : createCommentVNode("v-if", true)
      ]);
    };
  }
});
var avatarList = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-761256d9"]]);
var index = {
  install(app) {
    app.component("cc-avatar-list", avatarList);
  }
};
export { index as default };