Vue 中 使用 lottie

安装

npm install lottie-web -S

创建目录

• components/loading

在components目录下面(没有请新建) 新建一个loading文件夹

里面创建三个文件

1. data.json

2. index.vue

3. Lottie.vue

Lottie.vue

<template>
  <div :style="style" ref="lavContainer"></div>
</template>

<script setup>
import { ref } from 'vue';
import { defineProps, onMounted, defineEmits } from 'vue';
import lottie from 'lottie-web';
const Props = defineProps({
  options: {
    type: Object,
    required: true
  },
  height: {
    type: Number
  },
  width: {
    type: Number
  }
});

const emits = defineEmits(['animCreated']);

const style = ref({
  width: Props.width ? `${Props.width}px` : '100%',
  height: Props.height ? `${Props.height}px` : '100%',
  overflow: 'hidden',
  margin: '0 auto'
});

// 获取到节点

const lavContainer = ref(null);

// 动画实质

const anim = ref({});

//钩子函数
onMounted(() => {
  anim.value = lottie.loadAnimation({
    container: lavContainer.value,
    renderer: 'svg',
    loop: Props.options.loop !== false,
    autoplay: Props.options.autoplay !== false,
    animationData: Props.options.animationData,
    rendererSettings: Props.options.rendererSettings
  });

  emits('animCreated', anim.value);
});
</script>

<style lang="scss" scoped></style>

index.vue

<template>
  <div>
    <div class="loadingfixed">
      <Lottie
        :options="defaultOptions"
        :height="200"
        :width="200"
        :animCreated="handleAnimation"
        class="lottiecontent"
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import Lottie from './Lottie.vue';

import * as animationData from './data.json';

const defaultOptions = ref({
  animationData: animationData.default
});

const animationSpeed = ref(1);
const handleAnimation = (anim) => {};
</script>

<style lang="scss" scoped>
.loadingfixed {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  top: 0px;
  left: 0px;
  z-index: 999;
  .lottiecontent {
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -100px !important;
    margin-top: -100px !important;
    z-index: 999;
    background: white;
    border-radius: 100%;
  }
}
</style>

使用

<template>
  <div>
    <router-view></router-view>
    <Loading v-if="LoadingFlag"></Loading>
  </div>
</template>

<script lang="ts">
import { computed } from "vue";

import {useStore} from 'vuex';

import Loading from "@/components/Loading/Loading.vue";

const Store = useStore();

const LoadingFlag = computed(()=>{
  return Store.getters.LoadingFlag
})

</script>

<style lang="sass">
#app {
  width: 100vw;
  min-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}
</style>