import { defineComponent, onMounted, ref } from "vue";
import lottie from "lottie-web"; //引入动效库

export default defineComponent({
  name: "AnimationPic",
  props: {
    value: {
      type: undefined,
      default: ""
    }
  },
  setup(props) {
    const animationPic = ref(null); //获取dom
    function initAnimate() {
      // console.log(props.value, "lottie");
      lottie.loadAnimation({
        container: animationPic.value, //选择渲染dom
        renderer: "svg", //渲染格式
        loop: true, //循环播放
        autoplay: true, //是否i自动播放,
        animationData: props.value //渲染动效json
      });
    }
    onMounted(() => {
      initAnimate();
    });
    return () => {
      // if (!props.value) return null;
      return <div ref={animationPic} />;
    };
  }
});
