cione-comp-lib/es/packages/co-time-line/time_item.mjs

`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`

import { defineComponent, computed, toRefs, openBlock, createElementBlock, normalizeStyle, createElementVNode, toDisplayString, Fragment, renderList } from "vue";
import _export_sfc from "../../_virtual/plugin-vue_export-helper.mjs";
const DEFAULTDATA = {
  time: "\u65F6\u95F4",
  title: "\u6807\u9898",
  type: "text",
  text: "\u5185\u5BB9",
  imgSrc: "\u56FE\u7247\u5730\u5740",
  videoSrc: "\u89C6\u9891\u5730\u5740"
};
const DEFAULTCONTAINER = {
  width: 400,
  minHeight: 120,
  background: "/data/web/components/images/container_bg.png",
  marginBottom: 10,
  translateX: 0,
  fontSize: 20,
  color: "rgb(78, 229, 247)",
  fontWeight: "bolder",
  fontFamily: "\u5FAE\u8F6F",
  textSize: 16,
  textColor: "rgb(78, 229, 247)",
  textWeight: "normal",
  textFamily: "\u5FAE\u8F6F"
};
const DEFAULTTIME = {
  width: 100,
  fontSize: 16,
  color: "rgb(78, 229, 247)",
  fontWeight: "normal",
  fontFamily: "\u5FAE\u8F6F"
};
const DEFAULTCIRCLE = {
  size: 36,
  url: "/data/web/components/images/bg.png",
  lineColor: "rgba(0, 69, 89, 1)"
};
const DEFAULTMEDIA = { width: 200, height: 120 };
const Props = {
  data: { type: Object, default: DEFAULTDATA },
  direction: { type: String, default: "right" },
  timeProps: { type: Object, default: DEFAULTTIME },
  circleProps: { type: Object, default: DEFAULTCIRCLE },
  containerProps: { type: Object, default: DEFAULTCONTAINER },
  mediaProps: { type: Object, default: DEFAULTMEDIA }
};
const _sfc_main = defineComponent({
  name: "TimeLineItem",
  props: Props,
  setup(props) {
    const containerStyle = computed(() => {
      let direction = "row";
      let transform = props.timeProps.width + 4 + props.circleProps.size / 2 + 1;
      const mainContainerWidth = props.containerProps.width - props.timeProps.width - props.circleProps.size - 14;
      if (props.direction == "left") {
        direction = "row-reverse";
        transform = mainContainerWidth + 4 + props.circleProps.size / 2 + 1;
      }
      return {
        "--transform": `-${transform}px`,
        "--direction": direction
      };
    });
    const contentContainerStyle = computed(() => {
      return {
        "--width": `${props.containerProps.width}px`,
        "--minHeight": `${props.containerProps.minHeight}px`,
        "--marginBottom": `${props.containerProps.marginBottom}px`,
        "--bg": `url(${props.containerProps.background})`,
        "--padding": `6px ${props.containerProps.padding || 2}px`
      };
    });
    const timeTextStyle = computed(() => {
      return {
        "--width": `${props.timeProps.width}px`,
        "--fontSize": `${props.timeProps.fontSize}px`,
        "--fontColor": `${props.timeProps.color}`,
        "--fontWeight": `${props.timeProps.fontWeight}`
      };
    });
    const circleStyle = computed(() => {
      return {
        "--size": `${props.circleProps.size}px`,
        "--url": `url(${props.circleProps.url})`,
        "--lineColor": `${props.circleProps.lineColor}`
      };
    });
    const titleStyle = computed(() => {
      return {
        "--translate": `translate3d(${props.containerProps.fontLeft}px, ${props.containerProps.fontTop}px, 0)`,
        "--fontSize": `${props.containerProps.fontSize}px`,
        "--fontColor": `${props.containerProps.color}`,
        "--fontWeight": `${props.containerProps.fontWeight}`,
        "--fontFamily": `${props.containerProps.fontFamily}`
      };
    });
    const textStyle = computed(() => {
      return {
        "--direction": `${props.containerProps.direction || "row"}`,
        "--fontSize": `${props.containerProps.textSize}px`,
        "--fontColor": `${props.containerProps.textColor}`,
        "--fontWeight": `${props.containerProps.textWeight}`,
        "--fontFamily": `${props.containerProps.textFamily}`,
        "--marginTop": `${props.containerProps.textMarginTop || 0}px`,
        "--textDirection": `${props.containerProps.textDirection}`
      };
    });
    const mediaStyle = computed(() => {
      return {
        "--marginTop": `${props.mediaProps.marginTop || 0}px`,
        "--marginLeft": `${props.mediaProps.marginLeft || 0}px`,
        "--marginRight": `${props.mediaProps.marginRight || 0}px`,
        "--width": `${props.mediaProps.width}px`,
        "--height": `${props.mediaProps.height}px`
      };
    });
    const textList = computed(() => {
      const res = props.data.text.split("\\n");
      return res;
    });
    return {
      ...toRefs(props),
      textList,
      containerStyle,
      contentContainerStyle,
      timeTextStyle,
      circleStyle,
      titleStyle,
      textStyle,
      mediaStyle
    };
  }
});
const _hoisted_1 = { class: "co-time-line-item-circle-container" };
const _hoisted_2 = ["src"];
const _hoisted_3 = ["src"];
const _hoisted_4 = ["src"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return openBlock(), createElementBlock("li", {
    class: "co-time-line-item-container",
    style: normalizeStyle({ ..._ctx.containerStyle, ..._ctx.contentContainerStyle })
  }, [
    createElementVNode("p", {
      class: "co-time-line-item-time",
      style: normalizeStyle({ ..._ctx.timeTextStyle })
    }, toDisplayString(_ctx.data.time), 5),
    createElementVNode("div", _hoisted_1, [
      createElementVNode("span", {
        class: "co-time-line-item-circle",
        style: normalizeStyle({ ..._ctx.circleStyle })
      }, null, 4),
      createElementVNode("div", {
        class: "line",
        style: normalizeStyle({ ..._ctx.circleStyle })
      }, null, 4)
    ]),
    createElementVNode("div", {
      class: "co-time-line-item-content-container",
      style: normalizeStyle({ ..._ctx.contentContainerStyle })
    }, [
      createElementVNode("p", {
        class: "co-time-line-item-title",
        style: normalizeStyle({ ..._ctx.titleStyle })
      }, toDisplayString(_ctx.data.title), 5),
      _ctx.data.type === "img" ? (openBlock(), createElementBlock("div", {
        key: 0,
        class: "co-time-line-item-img",
        style: normalizeStyle({ ..._ctx.mediaStyle })
      }, [
        createElementVNode("img", {
          src: _ctx.data.imgSrc || _ctx.data.text,
          alt: ""
        }, null, 8, _hoisted_2)
      ], 4)) : _ctx.data.type === "video" ? (openBlock(), createElementBlock("div", {
        key: 1,
        class: "co-time-line-item-video",
        style: normalizeStyle({ ..._ctx.mediaStyle })
      }, [
        createElementVNode("video", {
          playsinline: "true",
          "webkit-playsinline": "true",
          "x5-playsinline": "true",
          tabindex: "2",
          mediatype: "video",
          src: _ctx.data.videoSrc || _ctx.data.text
        }, null, 8, _hoisted_3)
      ], 4)) : _ctx.data.type === "mix" ? (openBlock(), createElementBlock("div", {
        key: 2,
        class: "co-time-line-item-mix-container",
        style: normalizeStyle({ ..._ctx.textStyle })
      }, [
        createElementVNode("img", {
          src: _ctx.data.imgSrc,
          style: normalizeStyle({ ..._ctx.mediaStyle })
        }, null, 12, _hoisted_4),
        createElementVNode("p", null, [
          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.textList, (it) => {
            return openBlock(), createElementBlock("span", null, toDisplayString(it), 1);
          }), 256))
        ])
      ], 4)) : (openBlock(), createElementBlock("p", {
        key: 3,
        class: "co-time-line-item-text",
        style: normalizeStyle({ ..._ctx.textStyle })
      }, [
        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.textList, (it) => {
          return openBlock(), createElementBlock("span", null, toDisplayString(it), 1);
        }), 256))
      ], 4))
    ], 4)
  ], 4);
}
var TimeLineItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export { Props, TimeLineItem as default };