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

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

import { defineComponent, ref, onMounted, resolveComponent, openBlock, createBlock, withCtx, createElementBlock, Fragment, renderList, createElementVNode, normalizeClass, toDisplayString, createVNode, createCommentVNode, normalizeStyle, renderSlot } 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 = ["onClick"];
const _hoisted_2 = { style: { "display": "flex" } };
const _hoisted_3 = ["id"];
const _sfc_main = /* @__PURE__ */ defineComponent({
  props: {
    data: null,
    toggle: { type: Boolean, default: false },
    showArrow: { type: Boolean, default: true }
  },
  setup(__props) {
    const props = __props;
    const timelineData = ref([...props.data]);
    const clickItem = (item) => {
      if (!item.desc || !props.toggle)
        return;
      item.flag = !item.flag;
      item.height = !item.flag ? item.initHeight : 0;
      item.opacity = !item.flag ? 1 : 0;
    };
    onMounted(() => {
      let arr = [...props.data];
      arr.map((item, index2) => {
        if (item.desc && props.toggle) {
          item.flag = false;
          let content = document.getElementById(`cc-timeline-item-desc-${index2}`);
          item.height = Number(window.getComputedStyle(content).height.replace("px", ""));
          item.initHeight = Number(window.getComputedStyle(content).height.replace("px", ""));
        }
      });
      timelineData.value = arr;
    });
    return (_ctx, _cache) => {
      const _component_el_icon_arrowdown = resolveComponent("el-icon-arrowdown");
      const _component_el_timeline_item = resolveComponent("el-timeline-item");
      const _component_el_timeline = resolveComponent("el-timeline");
      return openBlock(), createBlock(_component_el_timeline, null, {
        default: withCtx(() => [
          (openBlock(true), createElementBlock(Fragment, null, renderList(timelineData.value, (item, index2) => {
            return openBlock(), createBlock(_component_el_timeline_item, {
              key: index2,
              color: item.color,
              icon: item.icon,
              type: item.type,
              size: item.size,
              hollow: item.hollow,
              "hide-timestamp": item.hideTimestamp
            }, {
              default: withCtx(() => [
                createElementVNode("div", {
                  class: normalizeClass({ cursor: item.desc && __props.toggle }),
                  onClick: ($event) => clickItem(item)
                }, [
                  createElementVNode("div", _hoisted_2, [
                    createElementVNode("div", null, toDisplayString(item.title), 1),
                    item.desc && __props.toggle && __props.showArrow ? (openBlock(), createElementBlock("div", {
                      key: 0,
                      class: normalizeClass(["cc-timeline-item-arrow", { "cc-timeline-item-arrow-rotate": item.flag && __props.toggle, "cc-timeline-item-arrow-top": item.flag && __props.toggle }])
                    }, [
                      createVNode(_component_el_icon_arrowdown)
                    ], 2)) : createCommentVNode("v-if", true)
                  ]),
                  createElementVNode("div", {
                    id: `cc-timeline-item-desc-${index2}`,
                    class: "cc-timeline-item-desc",
                    style: normalizeStyle({ height: item.height + "px", opacity: item.opacity })
                  }, [
                    renderSlot(_ctx.$slots, item.desc, {}, void 0, true)
                  ], 12, _hoisted_3)
                ], 10, _hoisted_1)
              ]),
              _: 2
            }, 1032, ["color", "icon", "type", "size", "hollow", "hide-timestamp"]);
          }), 128))
        ]),
        _: 3
      });
    };
  }
});
var timeline = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ebb30de4"]]);
var index = {
  install(app) {
    app.component("cc-timeline", timeline);
  }
};
export { index as default };