@ued_fpi/data-visual/dist/es/ipes/src/common/LottieAnimation.vue.mjs

<br /> <br /> <div style="text-align:center"> <b style="font-size:30px">@ued_fpi/data-visual</b> <p>基于Vite4+TypeScript的Vue3大屏组件库开发框架</p> <img style="display:inline" src="https://img.shields.io/npm/v/@ued_fpi/data-visual" />

import { defineComponent, ref, computed, onMounted, nextTick, openBlock, createElementBlock, normalizeStyle } from 'vue';

const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "LottieAnimation",
  props: {
    width: { default: 100 },
    height: { default: 100 },
    url: { default: "" },
    data: { default: null }
  },
  setup(__props) {
    const props = __props;
    const canvasRef = ref();
    const width = computed(() => {
      return typeof props.width === "number" ? `${props.width}px` : props.width.toString();
    });
    const height = computed(() => {
      return typeof props.height === "number" ? `${props.height}px` : props.height.toString();
    });
    onMounted(() => {
      const data = {
        container: canvasRef.value,
        renderer: "svg",
        loop: true,
        autoplay: true
        // path: props.url,
        // animationData: props.data,
      };
      if (props.url)
        data.path = props.url;
      else if (props.data)
        data.animationData = props.data;
      nextTick(() => {
        window.lottie?.loadAnimation(data);
      });
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        ref_key: "canvasRef",
        ref: canvasRef,
        class: "dv-ipes-canvas",
        style: normalizeStyle({ width: width.value, height: height.value })
      }, null, 4);
    };
  }
});

export { _sfc_main as default };