@ued_fpi/data-visual/dist/lib/ipes/src/common/LottieAnimation.vue.js

<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" />

'use strict';

Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });

const vue = require('vue');

const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  __name: "LottieAnimation",
  props: {
    width: { default: 100 },
    height: { default: 100 },
    url: { default: "" },
    data: { default: null }
  },
  setup(__props) {
    const props = __props;
    const canvasRef = vue.ref();
    const width = vue.computed(() => {
      return typeof props.width === "number" ? `${props.width}px` : props.width.toString();
    });
    const height = vue.computed(() => {
      return typeof props.height === "number" ? `${props.height}px` : props.height.toString();
    });
    vue.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;
      vue.nextTick(() => {
        window.lottie?.loadAnimation(data);
      });
    });
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock("div", {
        ref_key: "canvasRef",
        ref: canvasRef,
        class: "dv-ipes-canvas",
        style: vue.normalizeStyle({ width: width.value, height: height.value })
      }, null, 4);
    };
  }
});

exports.default = _sfc_main;